Card | X4Documentation

Mit <Card>-Controls binden Sie Karten in X4 Web Apps ein, um beispielsweise Teaser oder Dashboards in Anwendungen zu integrieren.

Hinweise zur Verwendung

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

<Card>
...
</Card>

<Card>-Controls können in allen verfügbaren Layouttypen verwendet werden. Innerhalb des <Card>-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 <Card>-Controls definieren.

Attribut	Beschreibung
`border`	Legt fest, ob um das Control ein Rahmen angezeigt wird. Mögliche Werte: `true`/`false`
`borderLeft`	Legt fest, ob ein linker Rand angezeigt wird. Mögliche Werte: `true`/`false`
`borderRight`	Legt fest, ob ein rechter Rand angezeigt wird. Mögliche Werte: `true`/`false`
`borderTop`	Legt fest, ob ein oberer Rand angezeigt wird. Mögliche Werte: `true`/`false`
`borderBottom`	Legt fest, ob ein unterer Rand angezeigt wird. Mögliche Werte: `true`/`false`
`icon`	Legt das Icon für das Control fest. Hinweis: Dieses Attribut kann nicht gleichzeitig mit `iconUrl` verwendet werden. Weitere Informationen zum Attribut `iconUrl` finden Sie unter Components in der Web App-Definition referenzieren. Data Binding mit Base64-Werten möglich Mögliche Werte: Base64-kodierte Grafikdatei Pfad zu einer Grafikdatei als Zeichenkette (URI), z. B. `clock.png` Hinweis zu Grafikdateien: Die Grafikdatei muss im Ordner `Resources` direkt unterhalb des Web-App-Projekts enthalten sein. Die Pfadangabe ist relativ zum Ordner `Resources`. Angabe eines Material Icons, z. B. `icon:extension` Hinweise zu Material Icons: Das Material Icon muss mit dem Präfix `icon`, z. B. `icon:<MaterialIconName>` angegeben werden. Mit Strg+Leertaste erhalten Sie eine Übersicht der verfügbaren Icons. Die Auswahl kann von den tatsächlich verfügbaren Material Icons abweichen. Weitere Informationen zu den tatsächlich verfügbaren Material Icons finden Sie unter https://fonts.google.com/icons (Google Fonts > Material Symbols and Icons).
`iconColor`	Definiert die Farbe des Icons. 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, z. B. `A200` Weitere Informationen finden Sie unter Theming.
`subtitle`	Legt den Untertitel der Karte fest. Data Binding möglich Mögliche Werte: Beliebige Zeichenkette Ausdruck für Data Binding (`String`, `Date`, `DateTime`)
`title`	Legt den Titel der Karte fest. Data Binding möglich Mögliche Werte: Beliebige Zeichenkette Ausdruck für Data Binding (`String`, `Date`, `DateTime`)

Actions

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

Wenn die Action Select (<SelectAction/>) und/oder die Action DoubleClick (<DoubleClickAction>) im <Card>-Element definiert wurde, dann können keine weiteren Aktionen mehr definiert werden. Der Benutzer kann das ganze <Card>-Element auswählen und/oder darauf doppelklicken. Wenn keine der beiden Actions angegeben ist, darf das <Card>-Element beliebig viele andere Aktionen enthalten.

Beispiel

Card-Control in der Detail Component

XML

<Card background="#Card1Background" title="This is a Card control" subtitle="with an icon and a border" border="true" icon="icon:ballot">
    <FlowLayout>
        <Image value="logos/logo_x4_2025_RGB_orange.png"/>
    </FlowLayout>
    <Actions>
        <SaveAction displayName="Save image"/>
        <DeleteAction displayName="Delete image"/>
    </Actions>
</Card>