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.

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": "[email protected]"
}

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: ['[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;

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 list of supported attributes, see API Reference.