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:
{JSEvent} event The event object associated with the card click.
{CustomType<servoyextra-collapse.card>} card The card that was clicked.
{CustomType<servoyextra-collapse.collapsible>} collapsible The collapsible containing the card.
{Number} cardIndex The index of the clicked card.
{Number} collapsibleIndex The index of the collapsible.
{String} dataTarget The data target identifier for the card.
onCollapsibleHidden(event,collapsible,collapsibleIndex)
Called when a collapsible is hidden.
Parameters:
{JSEvent} event The event object associated with the hide event.
{CustomType<servoyextra-collapse.collapsible>} collapsible The collapsible that was hidden.
{Number} collapsibleIndex The index of the hidden collapsible.
onCollapsibleShown(event,collapsible,collapsibleIndex)
Called when a collapsible is shown.
Parameters:
{JSEvent} event The event object associated with the show event.
{CustomType<servoyextra-collapse.collapsible>} collapsible The collapsible that was shown.
{Number} collapsibleIndex The index of the shown collapsible.
onHeaderClicked(event,collapsible,collapsibleIndex,dataTarget)
Called when a header of a collapsible is clicked.
Parameters:
{JSEvent} event The event object associated with the header click.
{CustomType<servoyextra-collapse.collapsible>} collapsible The collapsible whose header was clicked.
{Number} collapsibleIndex The index of the collapsible.
{String} dataTarget The data target identifier for the header.
Returns: {Boolean}
onHeaderDoubleClicked(event,collapsible,collapsibleIndex,dataTarget)
Called when a header of a collapsible is double-clicked.
Parameters:
{JSEvent} event The event object associated with the header double-click.
{CustomType<servoyextra-collapse.collapsible>} collapsible The collapsible whose header was double-clicked.
{Number} collapsibleIndex The index of the collapsible.
{String} dataTarget The data target identifier for the header.
Returns: {Boolean}
API
addCollapsible(collapsible,index)
Adds a new collapsible to the list of collapsibles of this Collapse component
Parameters:
{CustomType<servoyextra-collapse.collapsible>} collapsible The collapsible object to be added to the Collapse component.
{Number} [index] The 0-based index at which to insert the new collapsible. If not provided, the collapsible is added at the end.
createCard(textOrHtml,cardId,styleClass)
Creates a new card that can be added to any collapsible's cards array
Parameters:
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:
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:
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:
{Array<CustomType<servoyextra-collapse.collapsible>>} collapsibles An array of collapsible objects to set as the complete list of collapsibles for the Collapse component.
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.
Type: styleclass
collapsible
Represents a collapsible element within the Collapse component. scripting type: CustomType<servoyextra-collapse.collapsible>
bodyStyleClass
CSS style classes applied to the collapsible body.
Type: styleclass
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.
Type: styleclass
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.
Type: styleclass
Default Value: ""
Last updated
Was this helpful?