Key Info

The keyInfo config defines the properties that Workspaces displays in the Key Info card on the Details screen.

The fields defined in the keyInfo property appear in the order specified, up to a maximum of six. More than six fields can be defined in the configuration, but only the first six are displayed, while on smaller screens (based on screen width), only the first four are displayed. If the keyInfo property is present in the config, at least one value must be specified, and if the keyInfo property is not present then the Key Info card is not displayed.

Attributes

For a list of supported attributes, see Reference > CurrentSpaceKeyInfo.

For a list of available icons and their names, see Icons.

Example

The following example shows two different ways to configure the keyInfo property. It can be defined either with a mapping string or by placing the definition object directly into the keyInfo array property.

Example 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]"
}

Global config (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;

KeyInfo config (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;