Accordion

Use

An Accordion UI element is similar to the vertical version of a TabStrip, with the difference that with Accordion all subordinate elements can be collapsed simultaneously.

Accordion

An Accordion contains AccordionItems (and MultipleAccordionItems), which are displayed by a header. If an AccordionItem is selected, like in the example screenshot Item 1, its content area is shown below the header (First item in the screenshot).

Comparison with TabStrip

Similar functions
- The same as TabStrip, Accordion provides drag and drop functions.
- The same as with TabStrip only one entry at a time can be selected.
Other functions
- Different to TabStrip all entries can be deselected at the same time, but only if you set property Accordion.allowDeselect to TRUE.
- Different to TabStrip there are two types of subordinate elements that can be aggregated: AccordionItems and MultipleAccordionItems, whereby the latter are simply AccordionItems that are multiplied across the context. AccordionItems and MultipleAccordionItems behave together like RoadMapStep does with MultiRoadMapStep, or BreadCrumbStep does with MultipleBreadCrumbStep.
- Differently to TabStrib, in which the TabContent expands theTabStrip, theAccordionItemContent does not expand the Accordion.

Implementation Details

Runtime Class

CL_WD_ACCORDION

Name	Type	Initial Value	Bindable
id	STRING	(automatic)	No
allowDeselect	WDY_BOOLEAN	false	Yes
contextMenuBehaviour	WDUI_CONTEXT_MENU_BEHAVIOUR	inherit	No
contextMenuId	WDY_MD_UI_ELEMENT_REFERENCE		No
enabled	WDY_BOOLEAN	true	Yes
selectedItem	STRING		Yes
styleClassName	STRING		Yes
tooltip	Translatable text		Yes
visible	WDUI_VISIBILITY	visible	Yes

Name	Cardinality	Type
DRAG_SOURCE_INFO	0..1	DragSourceInfo
DROP_TARGET_INFO	0..1	DropTargetInfo
ITEMS	0..n	AccordionItem

Name
onDrop
onSelect

Dynamic Programming

For dynamic programming, the same properties, events, and aggregations as in the View Designer are available. But note that the spelling format and use of upper/lower case is different.

View Designer Name	Runtime Name	Type
allowDeselect	ALLOW_DESELECT	WDY_BOOLEAN
contextMenuBehaviour	CONTEXT_MENU_BEHAVIOUR	WDUI_CONTEXT_MENU_BEHAVIOUR
contextMenuBehaviour: inherit	CL_WD_ACCORDION=>E_CONTEXT_MENU_BEHAVIOUR-INHERIT
contextMenuBehaviour: provide	CL_WD_ACCORDION=>E_CONTEXT_MENU_BEHAVIOUR-PROVIDE
contextMenuBehaviour: suppress	CL_WD_ACCORDION=>E_CONTEXT_MENU_BEHAVIOUR-SUPPRESS
contextMenuId	CONTEXT_MENU_ID	WDY_MD_UI_ELEMENT_REFERENCE
enabled	ENABLED	WDY_BOOLEAN
selectedItem	SELECTED_ITEM	STRING
styleClassName	STYLE_CLASS_NAME	STRING
tooltip	TOOLTIP	WDY_MD_TRANSLATABLE_TEXT
visible	VISIBLE	WDUI_VISIBILITY
visible: none	CL_WD_ACCORDION=>E_VISIBLE-NONE
visible: visible	CL_WD_ACCORDION=>E_VISIBLE-VISIBLE

View Designer Name	Runtime Name
onDrop	ON_DROP
onSelect	ON_SELECT

View Designer Name	Runtime Name	Cardinality
DRAG_SOURCE_INFO	DRAG_SOURCE_INFO	0..1
DROP_TARGET_INFO	DROP_TARGET_INFO	0..1
ITEMS	ITEMS	0..n

Example

You can find an example of this UI element in the WDR_TEST_ACCORDION component.