Search

User Manual

GETTING STARTED


MODULES AND PLATFORM


APPENDIX


TUTORIALS & HELPFUL TRICKS


GLOSSARY


STRATEGIC PARTNER LINKS

Sepasoft - MES Modules
Cirrus Link - MQTT Modules

RESOURCES

Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support
SDK Documentation
SDK Examples

ALL USER MANUAL VERSIONS

Ignition 8.1
Ignition 7.9
Ignition 7.8

Deprecated Pages

Skip to end of metadata
Go to start of metadata

The following feature is new in Ignition version 8.0.14
Click here to check out the other new features

General

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
expansionMode

Determines 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
items

An array of items in the accordion. Each item has a separate header and body configurations.

NameDescriptionProperty Type
expandedDetermines if the the accordion body expanded. Set to true to expand, false to collapse. value: boolean
header

An object containing configuration options for the toggle icon.

 Click to see header properties
NameDescriptionProperty Type
toggle

An object containing configuration options for the toggle icon.

 Click to see toggle properties
NameDescriptionProperty Type
enabledEnables the collapse and expand toggle.value: boolean

expandedIcon

An object containing configuration options for the header icon while the item body is expanded.

 Click to see expandedIcon properties
NameDescriptionProperty Type
pathShorthand path to the icon source, in format: library/iconNamevalue: string
colorColor of the icon. May instead 'fill' in the styles prop.value: string
styleSets 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
object
collapsedIcon

An object containing configuration options for the header icon while the item body is collapsed.

 Click to see collapsedIcon properties
NameDescriptionProperty Type
pathShorthand path to icon source, in format: library/iconNamevalue: 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: string
styleSets a style for the collapsedIcon. 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
object
object
content

An object containing configuration options for the content.

 Click to see content properties
NameDescriptionProperty Type
type

Whether text or a view will be rendered in this accordion header. Set this property to either 'text' or 'view'.

value: string
textText to display for this accordion header.value: string
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
viewPathPath to view to render in this according header.value: string
viewParamsParams to pass to this view rendered in this accordion header.object
styleSets 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
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
object
body

An object containing configuration options for the body.

 Click to see body properties
NameDescriptionProperty Type
viewPathPath of the view to display.value: string
viewParamsParameters to be passed to the view. Names in this object must match input parameters defined on the 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
object
array
unusedSpaceStyleSets a style for the empty area at the bottom of the accordion. Full menu of style options is available. You can also specify a style class.object
styleSets a style for this component. Full menu of style options is available. You can also specify a style class.object

Perspective Component Events

The Perspective Event Types Reference page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The Component Events and Actions page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the 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


  • No labels