X4 Produktdokumentation
X4 Produktdokumentation
Breadcrumbs

Accordion

Mit <Accordion>-Controls können Sie die Bereiche einer Seite strukturieren und umfangreiche Listen platzsparend abbilden. Dies ist beispielsweise dann hilfreich, wenn Sie mit zahlreichen Eingabefeldern aus verschiedenen Kategorien arbeiten. Zudem bieten <Accordion>-Controls ein hohes Maß an Flexibilität, da Sie jederzeit weitere <Accordion>-Elemente hinzufügen können und Ihre Web App immer übersichtlich bleibt.

Hinweise zur Verwendung

Ein <Accordion>-Control wird mit dem Element <Accordion> erzeugt.

<Accordion>
...
</Accordion>

<Accordion>-Controls können in allen verfügbaren Layouttypen verwendet werden. Innerhalb des <Accordion>-Controls muss ein Layout verwendet werden. Weitere Informationen finden Sie unter Layouts.

Attribute

Hinweis:

Es gibt eine Reihe von Standardattributen, die für alle Controls festgelegt werden können. Weitere Informationen zu den Standardattributen finden Sie unter Standardattribute.

Zusätzlich zu den Standardattributen können Sie die folgenden Attribute für <Accordion>-Controls definieren.

Attribut

Beschreibung

expanded

Legt fest, ob das Accordion-Element beim Öffnen der Web App aufgeklappt oder zugeklappt ist.

  • Data Binding (Boolean) möglich

Mögliche Werte:

  • true (Standardwert)

  • false

  • Ausdruck für Data Binding

subtitle

Untertitel des Accordion-Elements

Mögliche Werte:

  • Beliebige Zeichenkette

  • Ausdruck für Data Binding (String, Date, DateTime)

subtitleForeground

Definiert eine Farbe für den Vordergrund des Untertitels.

Hinweis:

  • Diese Einstellung überschreibt die Standardfarbe des Farbschemas!

Mögliche Werte:

  • hexadezimaler Farbwert, z. B.ff5a00

Hinweis:

  • Verwenden Sie keine Raute vor dem Farbwert.

  • Verwenden Sie keine verkürzte Schreibweise des Farbwerts.

  • Farbcode aus der Farbpalette der Web App (vgl. Theming), z. B. A200

title

Titel des Accordion-Elements

Mögliche Werte:

  • Beliebige Zeichenkette

  • Ausdruck für Data Binding (String, Date, DateTime, Integer, Decimal, URL)

Actions

Für <Accordion>-Controls stehen Ihnen folgende Actions zur Verfügung. Weitere Informationen zu Actions finden Sie unter Actions.

<SelectAction> 

Sie können die Action Select über das Element <SelectAction/> innerhalb von <Accordion> einfügen. Die Action wird ausgelöst, sobald der Benutzer das entsprechende Element im Accordion auswählt.

Hinweis:

Sie müssen das Element <SelectAction> vor dem gewünschten Layouttyp (BoxLayout, FlowLayout, GridLayout, ResponsiveLayout, TabLayout) einfügen.

<DoubleClickAction>

Sie können die Action DoubleClick über das Element <DoubleClickAction/> innerhalb von <Accordion> einfügen. Die Action wird ausgelöst, sobald der Benutzer auf das entsprechende Element im Accordion doppelklickt.

Hinweis:

Sie müssen das Element <DoubleClickAction> vor dem gewünschten Layouttyp (BoxLayout, FlowLayout, GridLayout, ResponsiveLayout, TabLayout) einfügen.

Beispiele

Hier finden Sie verschiedene Beispiele für <Accordion>-Controls.

Beispiel 1: <Accordion> aufgeklappt und zugeklappt

In diesem Beispiel ist ein aufgeklapptes <Accordion> enthalten und ein zugeklapptes.

Accordion-Control in der 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-20251105-091556.png


Beispiel 2: <Accordion> mit <TabLayout>

In diesem Beispiel enthält das <Accordion> ein <TabLayout>. Weitere Informationen zu Tab Layouts finden Sie unter Registerkarten-Layout: Tab Group.

Accordion-Control in der 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-20251105-084616.png

Beispiel 3: <Accordion> mit weiteren Controls

In diesem Beispiel enthält das <Accordion>-Control ein <Card>-Control und ein <Checkbox>-Control.

Accordion-Control in der 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