Key Info

The keyInfo property defines the data fields displayed in the task Key Info card on the right-hand side of the Details screen. This is designed to be focused on transaction data, like the rest of the information contained within that section.

The data fields defined in the keyInfo property appear in the task Key Info card in the order specified in the configuration, up to a maximum of five fields. At least one data field must be defined. If more than five data fields are defined in the keyInfo property, only the first five are displayed in the task Key Info card. If the keyInfo property is not defined, the task 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 keyInfo 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.