Collapse

(part of package 'Servoy Extra Components') Extends designtime/SolutionModel: JSWebComponent Extends runtime: RuntimeWebComponent

A Collapse Component that groups multiple collapsible panels.

This is a reference page; many components have detailed usage guides here.

Properties

accordionMode

Determines whether the collapse component behaves in accordion mode (only one panel open at a time). Type: Boolean Default Value: true


collapsibles

An array of collapsible objects contained in this component. Type: Array<CustomType<servoyextra-collapse.collapsible>>


expandedIndices

An array of indices representing which collapsibles are currently expanded. Type: Array<Number>


styleClass

CSS style classes applied to the collapse component container. Type: Styleclass


tabSeq

Tab sequence order for keyboard navigation. Type: Tabseq


visible

Flag indicating whether the collapse component is visible. Type: Visible


Events

onCardClicked(event,card,collapsible,cardIndex,collapsibleIndex,dataTarget)

Called when a card within a collapsible is clicked.

Parameters:


onCollapsibleHidden(event,collapsible,collapsibleIndex)

Called when a collapsible is hidden.

Parameters:


onCollapsibleShown(event,collapsible,collapsibleIndex)

Called when a collapsible is shown.

Parameters:


onHeaderClicked(event,collapsible,collapsibleIndex,dataTarget)

Called when a header of a collapsible is clicked.

Parameters:

Returns: {Boolean}


onHeaderDoubleClicked(event,collapsible,collapsibleIndex,dataTarget)

Called when a header of a collapsible is double-clicked.

Parameters:

Returns: {Boolean}


API

addCollapsible(collapsible,index)

Adds a new collapsible to the list of collapsibles of this Collapse component

Parameters:


createCard(textOrHtml,cardId,styleClass)

Creates a new card that can be added to any collapsible's cards array

Parameters:

  • {String} [textOrHtml] The text or HTML content to be displayed inside the card.

  • {String} [cardId] The unique identifier for the card. If not provided, an ID may be generated automatically.

  • {String} [styleClass] A custom style class to apply to the card for styling purposes.

Returns: CustomType<servoyextra-collapse.card> Returns a newly created card object with the specified content, ID, and style class.


createCollapsible(headerHtml,collapsibleId)

Creates a new collapsible that can be added to the Collapse component using addCollapsible / setCollapsibles

Parameters:

  • {String} [headerHtml] The HTML content to be used as the header of the collapsible.

  • {String} [collapsibleId] The unique identifier for the collapsible.

Returns: CustomType<servoyextra-collapse.collapsible> Returns a newly created collapsible object with the specified header and ID.


getCard(cardIndex,collapsibleIndex)

Returns the card with the given index

Parameters:

  • {Number} cardIndex The index of the card to get (0 based)

  • {Number} [collapsibleIndex] If not given, the first collapsible is used

Returns: CustomType<servoyextra-collapse.card> The card or null when not found


getCardById(cardId)

Returns the card with the given ID

Parameters:

  • {String} cardId The unique identifier of the card to retrieve.

Returns: CustomType<servoyextra-collapse.card> Returns the card object with the specified ID, or `null` if the card is not found.


getCollapsible(index)

Returns the collapsible with the given index (0 based)

Parameters:

  • {Number} index If not given, the first collapsible is used

Returns: CustomType<servoyextra-collapse.collapsible> The collapsible or null when not found


getCollapsibleById(collapsibleId)

Returns the collapsible with the given ID

Parameters:

  • {String} [collapsibleId] If not given, the first collapsible is used

Returns: CustomType<servoyextra-collapse.collapsible> The card or null when not found


hide(index)

Hides the collapsible at the given index (or the first/only one, if no index is given)

Parameters:

  • {Number} [index] TTe index of the collapsible to hide


isCollapsed(index)

Returns whether the collapsible at the given index (or the first one if no index is provided) is collapsed

Parameters:

  • {Number} [index] The 0-based index of the collapsible to check. If omitted, the method checks the first collapsible.

Returns: Boolean Returns `true` if the specified collapsible (or the first one by default) is collapsed, otherwise `false`.


removeAllCollapsibles()

Removes all collapsibles. It will also hide the forms that are showing on any of the collpsibles.

If one of the collapsibles has a form showing that denies hide, the removeAllCollapsibles operation will stop and return false. In this case, all collapsibles that had forms and were hidden so far will still be in the collapsible array but they will be 'collapsed'.

Returns: Boolean `true` if all collapsibles were removed successfully; `false` if one of the collapsibles had a form which denied hide.


removeCollapsibleAt(index)

Remove the collapsible with the given index (the index is 0 based) or the first collapsible if no index is given. If the collapsible was showing a form, it will hide that form as well.

Parameters:

  • {Number} [index] The index of the collapsible to remove; if not given, the first collapsible is used

Returns: Boolean True if the collapsible at the give index (or 0 if not given) was removed; false if index is out of bounds or if the form shown by this collapsible denied hide.


removeCollapsibleById(collapsibleId)

Removes the collapsible with the given ID. If the collapsible was showing a form, it will hide that form as well.

Parameters:

  • {String} collapsibleId The id of the collapsible to remove.

Returns: Boolean True if the collapsible with the given id was removed; false if collapsibleId is not given, not found or if the form shown by this collapsible denied hide.


setCollapsibles(collapsibles)

Sets all collapsibles of this Collapse component

Parameters:


show(index)

Shows the collapsible at the given index (or the first/only one, if no index is given)

Parameters:

  • {Number} [index] The index of the collapsible to show


toggle(index)

Toggles the collapsible at the given index (or the first/only one, if no index is given)

Parameters:

  • {Number} [index] The index of the collapsible to toggle


Types

card

Represents a card within a collapsible. scripting type: CustomType<servoyextra-collapse.card>

  • cardId

    • Unique identifier for the card.

    • Type: string

  • contentHtml

    • HTML content displayed inside the card.

    • Type: tagstring

  • form

    • Optional form associated with the card.

    • Type: form

    • Default Value: ""

  • maxResponsiveHeight

    • Maximum responsive height for the card.

    • Type: int

    • Default Value: null

  • minResponsiveHeight

    • Minimum responsive height for the card.

    • Type: int

    • Default Value: null

  • styleClass

    • CSS style classes applied to the card.

collapsible

Represents a collapsible element within the Collapse component. scripting type: CustomType<servoyextra-collapse.collapsible>

  • bodyStyleClass

    • CSS style classes applied to the collapsible body.

  • cards

    • An array of card objects contained within the collapsible.

    • Type: card[]

  • collapsedIconName

    • Icon name displayed when the collapsible is collapsed.

    • Type: string

    • Default Value: "fa fa-2x fa-angle-down"

  • collapsibleHtml

    • HTML content for the collapsible body.

    • Type: tagstring

    • Default Value: ""

  • collapsibleId

    • Unique identifier for the collapsible.

    • Type: string

  • expandedIconName

    • Icon name displayed when the collapsible is expanded.

    • Type: string

    • Default Value: "fa fa-2x fa-angle-up"

  • form

    • Optional form to be displayed within the collapsible.

    • Type: form

    • Default Value: ""

  • headerHtml

    • HTML content for the header of the collapsible.

    • Type: tagstring

    • Default Value: ""

  • headerStyleClass

    • CSS style classes applied to the collapsible header.

    • Default Value: ""

  • iconLocation

    • Location of the icon relative to the header (e.g. LEFT, RIGHT, HIDDEN).

    • Type: string

    • Default Value: "RIGHT"

  • maxResponsiveHeight

    • Maximum responsive height for the collapsible.

    • Type: int

    • Default Value: null

  • minResponsiveHeight

    • Minimum responsive height for the collapsible.

    • Type: int

    • Default Value: null

  • relationName

    • Relation name used to associate the collapsible with data.

    • Type: relation

  • styleClass

    • CSS style classes applied to the collapsible container.

    • Default Value: ""


Last updated

Was this helpful?