Links

card

Version compatibility
card was introduced in version 4.21.0 of the JourneyApps Container.
To link cards to queries and objects, use object-repeat.

Syntax

<card>
<accent label="Open" color="positive" />
<header> New Job Available </header>
<content> Click here to see details </content>
<footer> Submitted @ {time} by {sender} </footer>
<action on-press="showMoreDetails" icon="ion-more" />
</card>

Details

Option
Required
Details
<accent label="{formatString}" color="string" />
Optional
label: Format String (optional) color: String (optional) Valid values for color:
  • Any of your app's named colors (primary, secondary, positive, negative, etc)
  • A hex value, e.g. #FFF * A view variable my_var
  • A function resolving to any of the above values, e.g. $:getMyColor()
Defaults to: info
<header> {formatString} </header>
Optional
<content> {formatString} </content>
Optional
<footer> {formatString} </footer>
Optional
Cards support the <action> tag, making it clickable.
The <action> tag has the following configuration:
Option
Required
Details
on-press
required
The JavaScript/TypeScript function call to be performed when the user clicks on the card. If used in an object-repeat, the function takes the variable declared in the 'as' parameter.
icon
optional
The icon to display on the right-hand side. The icon can be a Font Awesome icon or an Ionicons icon.
validate
optional
Whether to run field validation before calling the associated on-press (see above). Can be either true, false, or the result of a function, e.g. ($:shouldBeValidated()).