Card

With the <Card> control, cards can be integrated into X4 Web Apps, for example to integrate teasers or dashboards into applications. A card can contain a title and subtitle, various actions and a layout with any controls.

Creating a `<Card>` Control

A <Card> control is created with the <Card> element. The element can only be used in the layout of one (7.4.0-en) Detail Component.

In addition to the default attributes listed under Controls, the following attributes can be defined for the <Card> element:

Attribute	Description
`border`	Defines whether a border is displayed around the control. Possible values: `true` / `false`
`borderLeft`	Defines whether a left border is displayed. Possible values: `true`/`false`
`borderRight`	Defines whether a right border is displayed. Possible values: `true`/`false`
`borderTop`	Defines whether a top border is displayed. Possible values: `true`/`false`
`borderBottom`	Defines whether a bottom border is displayed. Possible values: `true`/`false`
`icon`	Icon for the control Data binding with Base64 values possible Possible values: Base64-encoded graphic file Path to a graphic file as a character string (URI), e.g. `clock.png` Specification of a material icon, e.g. `icon:extension` Press Ctrl+Space to get an overview of the available icons. The selection may differ from the actual Material Icons available. The graphic file must be contained in the `Resources` folder directly within the web app project. Path specification relative to the `Resources` folder. The material icon must be specified with the prefix `icon`, e.g. `icon:<MaterialIconName>`. This attribute cannot be used at the same time as `iconUrl`.
`iconColor`	Defines the color of the icon. Possible values: Hexadecimal color value, e.g.`ff5a00` Do not use a hash (#) before the color value or a shortened notation of the color value. Color code from the color palette of the web app (cf. Theming), e.g. `A200`
`subtitle`	Subtitle of the card. Data binding possible
`title`	Title of the card. Data binding possible

Actions

Actions can be defined within the <Card> element.

If a Select action (<SelectAction/>) and/or a DoubleClick action (<DoubleClickAction/>) has been defined in the <Card> element, then no further actions can be defined. The user can select and/or double-click the entire <Card> element. If none of the two actions is specified, the <Card> element may contain any number of other actions.

XML

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

Example

In this example, the attributes as well as the contents of the <Card> control are defined.

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>

The above example leads to the following result:

Creating a <Card> Control

Actions

Example

Creating a `<Card>` Control