Job Key Info
The jobKeyInfo
property defines the data fields displayed in the job Key Info card on the left-hand side of the Details screen. This is designed to be focused on job data, like the rest of the information contained within that section.
The data fields defined in the jobKeyInfo
property appear in the job Key Info card in the order specified in the configuration, up to a maximum of three fields. At least one data field must be defined. If more than three data fields are defined in the jobKeyInfo
property, only the first three are displayed in the job Key Info card. If the jobKeyInfo
property is not defined, the job Key Info card is not displayed.
note
The Key Info card design is responsive to different screen widths, adapting in different scenarios to improve legibility.
tip
Some key info
properties define an icon to display. For a list of supported icon names, see Icons.
Example
The following example shows two different ways to configure the jobKeyInfo
property. It can be done either by using a mapping string or by placing the definition object into the properties array.
{
"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": "[email protected]"
}
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: ['[email protected]', '[email protected]'],
},
},
$assigned: {
label: 'Assigned to',
icon: 'Assignee',
dataIndex: 'userLoginName',
type: 'text',
sorter: true,
filter: {
type: 'multiselect',
options: ['[email protected]', '[email protected]'],
},
},
$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;
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 list of supported attributes, see API Reference.