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 fields. At least one data field must be defined. If more than data fields are defined in the keyInfo property, only the first are displayed in the task Key Info card. If the keyInfo property is not defined, the task Key Info card is not displayed.

Rules and permissions can be configured on Key Info components.

info

The Key Info card design is responsive to different screen widths, adapting in different scenarios to improve legibility.

tip

Some keyInfo 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.