Skip to main content
Version: 8.1

Perspective - Accordion

Component Palette Icon:

Description

The Accordion component allows the embedding of expandable/collapsible views which can be toggled with a click or a tap of their headers. The headers may contain text or a view.

Properties

Most Properties have binding options. For more information on Bindings, see Types of Bindings in Perspective. This section only documents the Props Category of properties. The other Categories are described on the Perspective Component Properties page.

NameDescriptionProperty Type
expansionModeDetermines how many items can be expanded at a given time. Options are 'single' and 'multiple'. When using 'single' any item that's currently expanded will collapse if another one is clicked. When using 'multiple', items that are expanded will remained open until they are collapsed.value: string
itemsAn array of items in the accordion. Each item has a separate header and body configurations.
  • expanded: Determines if the the accordion body expanded. Set to true to expand, false to collapse. Value is boolean.
  • header: An object containing configuration options for the toggle icon. Click to see header properties.
  • body: An object containing configuration options for the body. Click to see body properties.
  • array
    styleSets a style for this component. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object
    unusedSpaceStyleSets a style for the empty area at the bottom of the accordion. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object

    header Properties

    NameDescriptionProperty Type
    toggleAn object containing configuration options for the toggle icon.
  • enabled: Enables the collapse and expand toggle. Value is boolean.
  • expandedIcon: An object containing configuration options for the header icon while the item body is expanded.
    • path: Shorthand path to the icon source, in format: library/iconName. Value is string.
    • color: Color of the icon. May instead 'fill' in the styles prop. Value is string.
    • style: Sets a style for the expandedIcon. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.
  • collapsedIcon: An object containing configuration options for the header icon while the item body is collapsed.
    • path: Shorthand path to the icon source, in format: library/iconName. Value is string.
    • color: Color of the icon. If deleted, the Shape "fill" property in the adjacent style object will determine the color of the icon. Value is string.
    • style: Sets a style for the expandedIcon. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.
    object
    contentAn object containing configuration options for the content. 
  • type: Whether text or a view will be rendered in this accordion header. Set this property to either 'text' or 'view'. Value is string.
  • text: Text to display for this accordion header. Value is string.
  • useDefaultViewWidth: Use of view's default width instead of adjusting based on the content's width. Value is boolean.
  • useDefaultViewHeight: Use of view's default height instead of adjusting based on the content's height. Value is boolean.
  • viewPath: Path to view to render in this according header. Value is string.
  • viewParams: Params to pass to this view rendered in this accordion header.
      New in 8.1.4
      As of 8.1.4 a dropdown list of parameters is available when the user clicks the Add Object Member icon. This makes it easy to add parameters from the rendered view.
  • style: Sets a style for the content. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.
  • object
    heightThe height of the header.value: string
    reverseReverses the order of the toggle and header content, (i.e., from left side to the right side).value: boolean
    styleSets a style for the header. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object

    body Properties

    NameDescriptionProperty Type
    viewPathPath of the view to display.
    New in 8.1.29
    If a path is present in the viewPath property, an Open View icon will appear that will navigate directly to the view when clicked.
    value: string
    viewParamsParameters for the view. If passing parameters into the embedded view, the names here must match the parameters on that view.

    New in 8.1.4
    As of 8.1.4 a dropdown list of parameters is available when the user clicks the Add Object Member icon. This makes it easy to add parameters from the rendered view.
    object
    useDefaultViewWidthUse of view's default width instead of adjusting based on the content's width.value: boolean
    useDefaultViewHeightUse of view's default height instead of adjusting based on the content's height.value: boolean
    heightThe height of the body.value: string
    styleSets a style for the body. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object

    Scripting

    See the Perspective - Accordion Scripting page for the full list of scripting functions available for this component.

    Example

    This Accordion example has three multiple embedded expandable and collapsible views. Each view can be expanded or collapsed by clicking on their headers. The Tank Farm and the Production Alarms views are both expanded while the Report view is collapsed.

    The three views used in the accordion example are working views and the component was configured to use these existing views. Configuring the accordion component is just a matter of how you want to present the information on the component, and then to configure its properties.

    Preview Mode

    Property Settings

    PropertyValue
    expansionModemultiple
    props.items.0.header.toggle.expandedIcon.pathmaterial/assignment
    props.items.0.header.toggle.collapsedIcon.pathmaterial/expand_more
    props.items.0.header.content.typetext
    props.items.0.header.content.textTank Farm
    props.items.0.body.viewPathTank Farm
    props.items.0.body.style.marginTop3px
    props.items.0.body.style.margin10px
    props.items.1.header.toggle.expandedIcon.pathmaterial/alarm
    props.items.1.header.toggle.collapsedIcon.pathmaterial/expand_more
    props.items.1.header.content.typetext
    props.items.1.header.content.textProduction Alarms
    props.items.1.body.viewPathProduction Alarms
    props.items.1.body.style.marginTop3px
    props.items.1.body.style.margin10px
    props.items.2.header.toggle.expandedIcon.pathmaterial/info
    props.items.2.header.toggle.collapsedIcon.pathmaterial/expand_more
    props.items.2.header.content.typetext
    props.items.2.header.content.textReport
    props.items.2.body.viewPathReport4
    props.items.2.body.style.marginTop3px
    props.items.2.body.style.margin10px