This article describes how to work with cards
There are 2 ways to work with cards:
- Use an own design of cards with the components “Card Base Container“ and “Repeater”
- Use EVAM and EVAM templates together with the components “Data Set” or “Data Row”
Own cards with “Card Base Container“ and “Repeater”
Example:
How to create?
- Create a Data Broker which delivers data you need as an array or use a predefined data broker like “Global.Look Up Records”
- Put a Repeater component to your page and assign the data broker output to the data array of the repeater.
- Define styles for repeater component.
Personal experience: It works better with Grid Layout. Specify the number of cards in 1 row by Columns. Set Rows to 1. Rows are repeated by the repeater. - Put a Card Base Container component as child in the repeater
Useful properties of the card base container are the Size, Interaction and Sidebar (Color).- The Sidebar color can be set dynamically by a small script. The script must return a Sidebar object with Color and Variant property.
function evaluateProperty({
api,
helpers
}) {
var sbcolor = "yellow";
var sclass = api.item.value.sclass;
var state = api.item.value.state;
if (sclass == "sn_ind_tmt_orm_order_task") {
if (state == 2) {
sbcolor = "green";
} else if (state == 7) {
sbcolor = "pink";
} else if (state == 4 || state == 5) {
sbcolor = "gray";
} else if (state == 1) {
sbcolor = "yellow";
}
}
var sb = {
color: sbcolor,
variant: 'primary'
};
return sb;
}
Now let’s define the content of the card. The content can be defined completely by an own design.
Card base header
Let’s have a Card base header. The card base header has some prepared properties like Caption, Heading and Tagline. Heading is the bigger title (In the example: Order Task Name). Caption looks like a subtitle (in the example: Task Number). The Tagline is a special small row a top (In the example: the sys_class name).
Example to set “Heading”:
/**
* {params} params
* {api} params.api
* {TransformApiHelpers} params.helpers
*/
function evaluateProperty({api, helpers}) {
var hd = {label: api.item.value.name, size:'md'};
return hd;
}
Label-Value-Stacked component
Let’s have the Label-Value-Stacked component in the middle for additional values.
To set the values use a little script to prepare the items for the Label-Value-Stacked component. You can access the single repeater item by the variable “item”.
Card Base Actions
Let’s add the component “Card Base Actions” at the bottom of the card.
An array of buttons must be specified. This example with 1 button:
[{"label":"View","variant":"secondary-positive"}]
function evaluateProperty({
api,
helpers
}) {
var hd = [{
label: 'Opened',
value: {
type: "string",
value: api.item.value.opened
}
},
{
label: 'State',
value: {
previous: "Opened",
type: "string",
value: api.item.value.state
}
}
];
return hd;
}
Repeater Item
Access the repeater item by @item to process the card-action-click event.
Example for data binding: @item.value.sys_id
Example in a script: event.payload.item.value.sys_id
EVAM and Data Set
To display cards by defined EVAM you can use “Data Set” or “Data Row” component. Both expecting an EVAM definition and working only with EVAM!
Define a EVAM Data Source
Define a EVAM View Config
IMPORTANT: Here you must define all fields which you want to have on the card!
Define a EVAM View Template
other example:
{
"component": "now-card-evam-record",
"staticValues": {
"buttonLabel": {
"translatable": true,
"key":"Open"
},
"detailLabelOne": {
"translatable": true,
"key": "Parent"
},
"detailLabelTwo": {
"translatable": true,
"key": "Updated"
},
"detailLabelThree": {
"translatable": true,
"key": "Status"
},
"cardLabel": {
"translatable": true,
"key": "Card"
}
},
"mappings": {
"highlightedHeaderLabel": "status",
"textHeaderLabel": "",
"titleLabel": "short_description",
"subtitle": "number",
"detailValueOne": "parent",
"detailValueTwo": "sys_updated_on",
"detailValueThree": "state"
},
"actionMappings": {
"mainActions": ["open_order_task", "assign_to_me"],
"clickAction": "navigation"
}
}
IMPORTANT: Here you must define where your fields should be displayed on the card!
The "staticValues" is for constant strings like lables.
The "mapping" is to map your selected fields (right) to the specific display part on the card (left).
In "actionMapping" you define the mapping of your defined actions (see below) to action parts of the card.
Check or define Client Action and/or Server Actions
Define Action Assignments
Define EVAM definition with Config Bundles
last step: define the Evam definition which can be selected as a data source on the page (see next step)
Define a Data Resource on your page by the EVAM Data Resource
Assign the Data Resource to the Data Set (or Data Row) component
Comparation of both methods
Card Base Container + Repeater | EVAM |
|
|
I hope this helps with many implementations to create great card layouts!
Good luck!
