Card

Mit dem <Card>-Control können Karten in X4 Web Apps eingebunden werden, um beispielsweise Teaser oder Dashboards in Anwendungen zu integrieren. Eine Card kann einen Titel und Untertitel, verschiedene Actions sowie ein beliebiges Layout mit beliebigen Controls enthalten.

`<Card>`-Control erzeugen

Ein <Card>-Control wird mit dem Element <Card> erzeugt. Das Element kann nur im Layout einer (7.4.0-de) Detail Component verwendet werden.

Für das Element <Card> lassen sich zusätzlich zu den unter Controls aufgeführten Standardattributen folgende Attribute 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`	Icon für das Control. Data Binding mit Base64-Werten möglich Mögliche Werte: Base64-kodierte Grafikdatei Pfad zu einer Grafikdatei als Zeichenkette (URI), z. B. `clock.png` Angabe eines Material Icons, z. B. `icon:extension` Mit Strg+Leertaste erhalten Sie eine Übersicht der verfügbaren Icons. Die Auswahl kann von den tatsächlich verfügbaren Material Icons abweichen Die Grafikdatei muss im Ordner `Resources` direkt unterhalb des Web-App-Projekts enthalten sein. Pfadangabe relativ zum Ordner `Resources`. Das Material Icon muss mit dem Präfix `icon`, z. B. `icon:<MaterialIconName>` angegeben werden. Dieses Attribut kann nicht gleichzeitig mit `iconUrl` verwendet werden.
`iconColor`	Definiert die Farbe des Icons. Mögliche Werte: Hexadezimaler Farbwert, z. B.`ff5a00` Verwenden Sie keine Raute vor dem Farbwert oder eine verkürzte Schreibweise des Farbwerts! Farbcode aus der Farbpalette der Web App (vgl. Theming), z. B. `A200`
`subtitle`	Untertitel der Karte. Data Binding möglich
`title`	Titel der Karte. Data Binding möglich

Aktionen

Innerhalb des Elements <Card> können Aktionen definiert werden.

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. Ist keine der beiden Actions angegeben, darf das <Card>-Element beliebig viele andere Aktionen enthalten.

XML

<Card>
    <FlowLayout>
	...
	</FlowLayout>
    <Actions>
        <CustomAction displayName="Card action"/>
    </Actions>
</Card>

Beispiel

In diesem Beispiel werden die Attribute sowie die Inhalte des <Card>-Controls definiert.

XML

<Card border="true" icon="SPHeadquarters.jpg" title="SoftProject" subtitle="Headquarters Ettlingen">
	<FlowLayout>
		<Image resourceUrl="SPHeadquarters.jpg" width="400"/>
		<TextBox border="false" type="text" value="We have been offering products and services related to the digitization and automation of business processes since 2000. The strong demand from various industries is leading to an above-average corporate growth. Today we employ over 90 people in our head office in the technology region of Karlsruhe and our branches located in Spain and Slovakia." multiline="true"/>
		<TextBox type="url" value="https://softproject.de/en/softproject/" displayName="Website"/>
	</FlowLayout>						              
	<Actions>
		<CustomAction icon="Website.png" iconPosition="left" displayName="Website" externalLink="https://softproject.de/de/"/>
		<SaveAction displayName="Save Picture"/>
		<DeleteAction displayName="Delete Picture"/> 
	</Actions>
</Card>

Das obige Beispiel führt zu folgendem Ergebnis:

<Card>-Control erzeugen

Aktionen

Beispiel

`<Card>`-Control erzeugen