Accordion | X4Documentation

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.

You can use Accordion controls in all available layout types.

BoxLayout
FlowLayout
GridLayout
ResponsiveLayout
TabLayout

The following attributes can be defined for an Accordion control.

Attribute	Description
`background`	Defines a color for the background of the control. This setting overrides the default color of the color scheme. This attribute does not work for the `Maps` and `HtmlDocument` elements! Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash before the color value! Do not use a shortened notation of the color value! Color code from the color palette of the Web App (cf. Theming), e.g. `A200`
`disabled`	Specifies whether the user can interact with the control. Data binding (Boolean) is possible Possible values: `true`/`false` or expression for data binding
`enabled`	Specifies whether the user can interact with the control. Data binding (Boolean) is possible Possible values: `true`/`false` or expression for data binding
`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
`fontFamily`	Specifies the font family. This attribute overwrites the default Web App font for this layout. If the attribute is defined on an element, the font family is inherited by any child elements unless the `fontFamily` attribute is explicitly defined for the child elements. This attribute does not work for the `Image`, `Map` , and `HtmlDocument` elements. Possible values: `MainFont`: stored main font Font code from the font palette, e.g. Font04
`fontSize`	Sets the font size. This attribute overrides the default Web App font size for this layout. This attribute does not work for the `Image`, `Map` , and `HtmlDocument` elements. Possible values: Any integer or decimal number with a period as decimal separator, e.g. `20`, `20.8`, `.9` Font size in pixels, such as `20px` Font size in points, e.g. `18pt` Font size compared to the font size of the parent element, e.g.`.8em` or `120%` Keywords: `xx-small`, `x-small`, `small`, `medium` , `large` , `x-large`, `xx-large`, `smaller`, `larger`
`fontStretch`	Defines the width of each character. This attribute overrides the default character width for this layout. Possible values: `Condensed` (default) `Expanded` `ExtraCondensed` `ExtraExpanded` `Medium` `Normal` `SemiCondensed` `SemiExpanded` `UltraCondensed` `UltraExpanded` This attribute does not work for the `Image`, `Map`, `Chart`, and `HtmlDocument` elements.
`fontStyle`	Defines the tilt of the font. This attribute overrides the default font tilt for this layout. Possible values: `italic`: Italic font `normal`: Normal font (default) `oblique`: Slanted font style (calculated) This attribute does not work for the `Image`, `Map` , and `HtmlDocument` elements.
`fontWeight`	Defines the font weight. This attribute overrides the default font weight for this layout. Possible values: `Black` `Bold` `DemiBold` `ExtraBlack` `ExtraBold` `ExtraLight` `Heavy` `Light` `Medium` `Normal` (default) `Regular` `SemiBold` `Thin` `UltraBlack` `UltraBold` `UltraLight` This attribute does not work for the `Image`, `Map` , and `HtmlDocument` elements.
`foreground`	Defines a color for the foreground (text, etc.) of the control. This setting overrides the default color of the color scheme. This attribute does not work for the `Map` and `HtmlDocument` controls! Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash before the color value! Do not use a shortened notation of the color value! Color code from the color palette of the Web App (cf. Theming), e.g. `A200`
`horizontalAlign`	The direction in which the elements flow. The order of the elements corresponds to their declaration. Possible values: `left` (default) `center` `right`
`subtitle`	Subtitle of the Accordion element Possible values: Expression for data binding (`String`, `Date` , `DateTime`)
`subtitleForeground`	Defines a color for the foreground of the subtitle. This setting overrides the default color of the color scheme. This attribute does not work for the `Map` and `HtmlDocument` controls! Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash before the color value! Do not use a shortened notation of the color value! Color code from the color palette of the Web App (cf. Theming), e.g. `A200`
`textOverflow`	Specifies what should happen when the control is full. Possible values: `ellipsis` : Use `...` to show that the text is not finished (default) `hidden` : Break off text, watch for whole words `wordBreak` : Break off text within word `allow`: break off text between words
`title`	Title of the Accordion element Possible values: Expression for data binding (`String`, `Date`, `DateTime`, `Integer`, `Decimal`, `URL`)
`visible`	Defines if the control is visible. Data binding (Boolean) is possible Possible values: `true`/`false` or expression for data binding

`<SelectAction>` within an Accordion control

The"Select" Action is generateed using the <SelectAction/> element within <Accordion> and is triggered when the user selects the corresponding element in the accordion.

`<DoubleClickAction >` within an Accordion control

The"DoubleClick" Action is generateed using the <DoubleClickAction/> element within <Accordion> and is triggered when the user double-clicks the corresponding element in the accordion.

Note:

The <SelectAction> and <DoubleClickAction/> elements must be inserted before the desired layout type (BoxLayout, FlowLayout, GridLayout, ResponsiveLayout, TabLayout).

Example

<?xml version="1.0" encoding="UTF-8"?>
<DetailComponent
	xmlns="http://softproject.de/webapp/1.0">
		<FlowLayout>
		<Header value="FlowLayout" />
		<Accordion title="FlowLayout inside" subtitle="My first accordion panel"
			expanded="false">
			<FlowLayout>
				<Label value="Welcome to my first accordion panel!" />
			</FlowLayout>
		</Accordion>	
		<Accordion title="ResponsiveLayout inside" 
			subtitle="My second accordion panel">
			<ResponsiveLayout>
				<Cell>
					<Label value="Welcome to my second accordion panel" />
				</Cell>
			</ResponsiveLayout>
		</Accordion>
		<Accordion title="TabLayout inside" subtitle="My third accordion panel">
			<TabLayout>
				<Tab displayName="Test">
					<FlowLayout>
						<Label value="This is a demo accordion panel."></Label>
					</FlowLayout>
				</Tab>
				<Tab displayName="Test">
					<FlowLayout>
						<Checkbox checked="true" displayName="I am a test checkbox" />
					</FlowLayout>
				</Tab>
			</TabLayout>
		</Accordion>
		<Accordion title="Disabled" subtitle="This accordion panel is disabled by default"
			disabled="true">
			<GridLayout>
				<Label value="Label" />
			</GridLayout>
		</Accordion>
		<Accordion title="Expanded by default" subtitle="Click the arrow to collapse me"
			expanded="true">
			<FlowLayout>
				<Label value="Insert the desired content here" />
			</FlowLayout>
		</Accordion>
		<Accordion title="Foreground color" subtitle="Choose your preferred foreground color"
			expanded="false" foreground="500">
			<FlowLayout>
				<Label value="Label"></Label>
				<Checkbox checked="true" displayName="I am a test checkbox" />
			</FlowLayout>
		</Accordion>
		<Accordion title="Background color" 
			subtitle="Adapt the look-and-feel of your accordion panel" background="A200" foreground="900">
			<ResponsiveLayout>
				<Cell>
					<Label value="Select your favorite background color" />
				</Cell>
			</ResponsiveLayout>
		</Accordion>
	</FlowLayout>
</DetailComponent>

The code shown above generates the following output in the Web App:

<SelectAction> within an Accordion control

<DoubleClickAction > within an Accordion control

Example

`<SelectAction>` within an Accordion control

`<DoubleClickAction >` within an Accordion control