Collapse

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

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

Properties

accordionMode

Type: boolean Default Value: true


collapsibles

Type: collapsible[]


expandedIndices

Type: int[]


styleClass

Type: styleclass


tabSeq

Type: tabseq


visible

Type: visible


Events

onCardClicked

Parameters:

event JSEvent card card collapsible collapsible cardIndex int collapsibleIndex int dataTarget string


onCollapsibleHidden

Parameters:

event JSEvent collapsible collapsible collapsibleIndex int


onCollapsibleShown

Parameters:

event JSEvent collapsible collapsible collapsibleIndex int


onHeaderClicked

Parameters:

event JSEvent collapsible collapsible collapsibleIndex int dataTarget string

Returns: boolean


onHeaderDoubleClicked

Parameters:

event JSEvent collapsible collapsible collapsibleIndex int dataTarget string

Returns: boolean


API

addCollapsible

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

@param {CustomType<svy-collapse.collapsible>} collapsible @param {Number} [index] the index to insert the new collapsible at

Parameters:

collapsible collapsible index int (optional)


createCard

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

@param {String} [textOrHtml] @param {String} [cardId] @param {String} [styleClass] @return {CustomType<svy-collapse.card>}

Parameters:

textOrHtml string (optional) cardId string (optional) styleClass string (optional)

Returns: card


createCollapsible

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

@param {String} [headerHtml] @param {String} [collapsibleId] @return {CustomType<svy-collapse.collapsible>}

Parameters:

headerHtml string (optional) collapsibleId string (optional)

Returns: collapsible


getCard

Returns the card with the given index

@param {Number} cardIndex the index of the card to get (0 based) @param {Number} [collapsibleIndex] if not given, the first collapsible is used @return {CustomType<svy-collapse.card>} the card or null when not found

Parameters:

index int collapsibleIndex int (optional)

Returns: card


getCardById

Returns the card with the given ID

@param {String} cardId @return {CustomType<svy-collapse.card>} the card or null when not found

Parameters:

cardId string

Returns: card


getCollapsible

Returns the collapsible with the given index (0 based)

@param {Number} [collapsibleIndex] if not given, the first collapsible is used @return {CustomType<svy-collapse.card>} the card or null when not found

Parameters:

index int

Returns: collapsible


getCollapsibleById

Returns the collapsible with the given ID

@param {String} [collapsibleId] if not given, the first collapsible is used @return {CustomType<svy-collapse.card>} the card or null when not found

Parameters:

collapsibleId string

Returns: collapsible


hide

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

@param {Number} index the index of the collapsible to hide

Parameters:

index int (optional)


isCollapsed

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

@param {Number} [collapsibleIndex] @return {Boolean}

Parameters:

index int (optional)


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'.

@return {Boolean} true if all collapsibles were removed successfully; false if one of the collapsibles had a form which denied hide.

Returns: boolean


removeCollapsibleAt

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

@param {Number} [collapsibleIndex] the index of the collapsible to remove; if not given, the first collapsible is used @return {Boolean} true if the collapsible at the give index (or 0 if not given) was removed; false if collapsibleIndex is out of bounds or if the form shown by this collapsible denied hide.

Parameters:

index int

Returns: boolean


removeCollapsibleById

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

@param {String} collapsibleId the id of the collapsible to remove. @return {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.

Parameters:

collapsibleId string

Returns: boolean


setCollapsibles

Sets all collapsibles of this Collapse component

@param {Array<CustomType<svy-collapse.collapsible>>} collapsibles

Parameters:

collapsibles collapsible[]


show

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

@param {Number} index the index of the collapsible to show

Parameters:

index int (optional)


toggle

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

@param {Number} index the index of the collapsible to toggle

Parameters:

index int (optional)


Types

card

scripting type: CustomType<servoyextra-collapse.card>

  • cardId

  • contentHtml

  • form

    • Type: form

    • Default Value: ""

  • maxResponsiveHeight

    • Type: int

    • Default Value: null

  • minResponsiveHeight

    • Type: int

    • Default Value: null

  • styleClass

collapsible

scripting type: CustomType<servoyextra-collapse.collapsible>

  • bodyStyleClass

  • cards

  • collapsedIconName

    • Type: string

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

  • collapsibleHtml

  • collapsibleId

  • expandedIconName

    • Type: string

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

  • form

    • Type: form

    • Default Value: ""

  • headerHtml

  • headerStyleClass

  • iconLocation

    • Type: string

    • Default Value: "RIGHT"

  • maxResponsiveHeight

    • Type: int

    • Default Value: null

  • minResponsiveHeight

    • Type: int

    • Default Value: null

  • relationName

  • styleClass


Last updated