Version: 20.05

Key Info

The keyInfo property defines the properties that Workspaces will display on the Details Screen under the Key Info Card.

Note

Icon names can be looked-up on the Icons section.

Example

The following example showcases two different ways to configure the keyInfo property. It can be done either by using a mapping string or placing the definition object straight into the array of properties.

  • The keyInfo properties will appear in order, up to a maximum of six
  • More than six can be added in the configuration but they will not show
  • On smaller screens, it will only show the first four (based on screen width)
  • At least one is required. Removing the keyInfo attribute completely will hide the entire Key Info Card

Txn properties

{
"formName": "DAO - Fraud Review",
"formUrl": "http://localhost:3000",
"formStatus": "Saved",
"trackingCode": "SWAACDA",
"groupName": " Fraud Review",
"formDataMap": {
"PrimaryName": "Josh Wells"
},
"comments": [],
"fileAttachments": [],
"receiptUrl": null,
"submitKey": "0812dxcb35to7611a3a0ab75f8257de4",
"timeCreated": "2019-03-29T13:12:22+11:00",
"availableActions": ["assign"],
"timeUserLastModified": "2019-04-29T15:21:31+11:00",
"userLoginName": "test@temenos.com"
}

src/configs/custom/global.ts

import { ConfigGlobal } from '@transact-open-ux/workspaces/dist/types';
export const globalConfig = ({ date }: any): ConfigGlobal => ({
...
mappings: {
$taskStatus: {
label: 'Task status',
icon: 'TaskStatus',
dataIndex: ['job.currentStep', 'formStatus'],
type: 'text',
sorter: true,
filter: {
type: 'multiselect',
options: ['Assigned', 'Opened', 'Saved', 'Completed'].
},
},
$taskCreated: {
label: 'Task created',
icon: 'TaskCreated',
dataIndex: 'timeCreated',
type: 'date',
format: 'relative',
sorter: true,
},
$assigned: {
label: 'Assigned to',
icon: 'Assignee',
dataIndex: 'userLoginName',
type: 'text',
sorter: true,
filter: {
type: 'multiselect',
options: ['kparameswaran@temenos.com', 'jpower@temenos.com'],
},
},
$assigned: {
label: 'Assigned to',
icon: 'Assignee',
dataIndex: 'userLoginName',
type: 'text',
sorter: true,
filter: {
type: 'multiselect',
options: ['kparameswaran@temenos.com', 'jpower@temenos.com'],
},
},
$taskModified: {
label: 'Task modified',
icon: 'LastModified',
dataIndex: ['job.timeLastModified', 'timeUserLastModified'],
type: 'date',
sorter: true,
filter: {
type: 'picker',
options: {
minDate: date('1 month ago'),
maxDate: date('now'),
},
},
},
},
...
});
export default globalConfig;

src/configs/custom/process.ts

import { ConfigCurrentSpace } from '@transact-open-ux/workspaces/dist/types';
export const processConfig = ({ date }: any): ConfigCurrentSpace => ({
...
keyInfo: [
{
label: 'Tracking Code',
icon: 'TaskID',
dataIndex: 'trackingCode',
type: "text",
filter: {
type: 'input',
},
},
'$taskStatus',
'$taskCreated',
'$assigned',
'$taskModified',
],
...
});
export default processConfig;

Attributes

To review the possible attributes please check the API Reference.