Key Info

The keyInfo property defines the data fields displayed in the Key Info card on the Details screen.

The data fields defined in the keyInfo property appear in the Key Info card in the order specified in the configuration, up to a maximum of six fields. At least one data field must be defined. If more than six data fields are defined in the keyInfo config, only the first six are displayed in the Key Info card. On smaller screens, only the first four data fields are displayed (based on screen width). If the keyInfo property is not defined, the Key Info card is not displayed.

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.