X4 Produktdokumentation
X4 Produktdokumentation
Breadcrumbs

Accordion

<Accordion> controls can be used to structure the areas of a page and dispay extensive lists. This is useful, for example, if you are working with numerous input fields from different categories. In addition, <Accordion> controls offer a high degree of flexibility, since you can add additional <Accordion> elements at any time and your Web App remains clearly structured.

Instructions for use

An <Accordion> control is created with the <Accordion> element.

<Accordion>
...
</Accordion>

You can use <Accordion> controls in all available layout types. A layout must be used within the <Accordion> control. For more information, see Layouts.

Attribute

Note:

There are a number of default attributes that can be set for all controls. For more information about the default attributes, see Default attributes.

In addition to the default attributes, you can define the following attributes for <Accordion> controls.

Attribute

Description

expanded

Specifies whether the Accordion element is expanded or closed when the Web App is opened.

  • Data binding (Boolean) is possible

Possible values:

  • true (default)

  • false

  • Expression for data binding

subtitle

Subtitle of the Accordion element

Possible values:

  • Any string

  • Expression for data binding (String, Date , DateTime)

subtitleForeground

Defines a color for the foreground of the subtitle.

Note:

  • This setting overrides the default color of the color scheme!

Possible values:

  • Hexadecimal color value, e.g. ff5a00

Note:

  • Do not use a hash before the color value.

  • Do not use an abbreviated notation of the color value.

  • Color code from the color palette of the Web App (cf. Theming), e.g. A200

title

Title of the Accordion element

Possible values:

  • Any string

  • Expression for data binding (String, Date, DateTime, Integer, Decimal, URL)

Actions

The following actions are available for <Accordion> controls. For more information, see Actions.

<SelectAction>

You can insert the Select action using the <SelectAction/> element within <Accordion>. The action is triggered when the user selects the corresponding element in the Accordion.

Note:

You must insert the <SelectAction> element before the desired layout type (BoxLayout, FlowLayout, GridLayout, ResponsiveLayout, TabLayout).

<DoubleClickAction>

You can insert the DoubleClick action using the <DoubleClickAction/> element within <Accordion>. The action is triggered when the user double-clicks the corresponding element in the Accordion.

Note:

You must insert the <DoubleClickAction> element before the desired layout type (BoxLayout, FlowLayout, GridLayout, ResponsiveLayout, TabLayout).

Examples

Here you will find various examples of <Accordion> controls.

Example 1: Expanded and collapsed <Accordion>

This example showns an expanded <Accordion> and a collapsed one.

Accordion control in the Detail Component 
<Accordion title="Title" subtitle="Subtitle" expanded="true">
  <FlowLayout>
    <Label value="Expanded accordion">
  </FlowLayout>
</Accordion>
<Accordion title="Title" subtitle="Subtitle" expanded="false">
  <FlowLayout>
    <Label value="Closed accordion">
  </FlowLayout>
</Accordion>
image-20260312-071233.png


Example 2: <Accordion> with <TabLayout>

In this example, the <Accordion> contains a <TabLayout>. For more information on tab layouts, see Tab Layout: Tab Group.

Accordion control in the Detail Component 
<Accordion title="Accordion" subtitle="with TabLayout" expanded="false">
					<TabLayout>
						<Tab displayName="Tab 1">
							<FlowLayout>
								<Label value="This is a normal Accordion"/>
							</FlowLayout>
						</Tab>
						<Tab displayName="Tab 2">
							<FlowLayout>
								<Label value="But with a TabLayout"/>
							</FlowLayout>
						</Tab>
					</TabLayout>
				</Accordion>
image-20260312-071256.png


Example 3: <Accordion> with additional controls

In this example, the <Accordion> control contains a <Card> control and a <Checkbox> control.

Accordion control in the Detail Component 
<BoxLayout marginBottom="5" units="pixels">
			<FlowLayout>
				<Header value="Accordions with Controls" titleLevel="subtitle"/>
				<Accordion title="Card" expanded="false"  >
					<FlowLayout>
						<Card title="This is a Card control" subtitle="Inside of an accordion control" icon="icon:bedtime" border="true">
							<FlowLayout>
								<Label value="This is the content of a card control inside of an accordion control"/>
							</FlowLayout>
						</Card>
						<Checkbox checked="false" displayName="This is a checkbox within an accordion control" horizontalAlign="left"></Checkbox>
					</FlowLayout>
				</Accordion>
			</FlowLayout>
		</BoxLayout>
image-20250320-080131.png