Views

The views config defines the table configurations that can be displayed on the List screen. Views are pre-configured groups of properties that specify which sort and filter criteria are included on the Txn query.

info

• It's not possible to filter on multiple submission properties, so it's recommended that you have only one submission property in the filterBy option.
• It's recommended to keep view labels short (20-25 characters) to avoid formatting issues. Longer view labels may be truncated.

Attributes

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

note

The value of the filterBy config attribute should not be in an array unless the field supports multiple values like multiselect or picker.

Example

The following example shows how to configure views with default sort and filter criteria.

Example Txn properties

{
  "formName": "DAO - Manual Review",
  "formUrl": "http://localhost:3000",
  "formStatus": "Assigned",
  "trackingCode": "AWQAVZA",
  "groupName": " Manual Review",
  "formDataMap": {
    "PrimaryName": "Dali Mohamed"
  },
  "job": {
    "currentAction": "Handle Submission",
    "currentStep": "Fraud Review",
    "jobRefNumber": "4629QWP",
    "jobKey": "17c25feaa1a48565aabc6f0ab0be3839",
    "name": "Deposit Account Opening",
    "status": "In Progress",
    "timeCreated": "2019-03-15T08:55:14+11:00",
    "timeLastModified": "2019-03-15T15:57:36+11:00"
  },
  "comments": [],
  "fileAttachments": [],
  "receiptUrl": null,
  "submitKey": "toxcb11a30812257de476a0abd3575f8",
  "timeCreated": "2019-03-29T13:41:20+11:00",
  "availableActions": ["assign"],
  "timeUserLastModified": "2019-03-29T15:40:35+11:00",
  "userLoginName": "[email protected]"
}

Global mappings config (src/configs/custom/global.ts)

import { ConfigGlobal } from '@transact-open-ux/workspaces/dist/types';

export const globalConfig = ({ date }: any): ConfigGlobal => ({
  ...
  mappings: {
    $primaryName: {
      label: 'Name',
      dataIndex: ['properties["PrimaryName"]', 'formDataMap["PrimaryName"]'],
      type: 'text',
      filter: {
        type: 'input',
      },
    },
    $assigned: {
      label: 'Assigned to',
      icon: 'Assignee',
      dataIndex: 'userLoginName',
      type: 'text',
      sorter: true,
      filter: {
        type: 'multiselect',
        options: ['[email protected]', '[email protected]']
      },
    },
    $product: {
      label: 'Product',
      dataIndex: ['job.name', 'formName'],
      type: 'text',
      filter: {
        type: 'select',
        options: [
          'DAO - Manual Review',
          'Review of deposit account opening',
          'Review of loan application',
        ],
      },
    },
    $appId: {
      label: 'App ID',
      icon: 'AppId',
      dataIndex: ['job.jobRefNumber', 'trackingCode'],
      type: 'text',
      filter: {
        type: 'input',
      },
    },
    $appStatus: {
      label: 'App status',
      icon: 'AppStatus',
      dataIndex: 'job.status',
      type: 'text',
      sorter: true,
      filter: {
        type: 'multiselect',
        options: ['Saved', 'Opened', 'Abandoned'],
      },
    },
    $appCreated: {
      label: 'App created',
      icon: 'AppCreated',
      dataIndex: 'job.timeCreated',
      type: 'date',
      format: 'relative',
      sorter: true,
    },
  },
  ...
});

export default globalConfig;

Views config (src/configs/custom/process.ts)

import { ConfigCurrentSpace } from '@transact-open-ux/workspaces/dist/types';

export const processConfig = ({ date }: any): ConfigCurrentSpace => ({
  ...
  views: [
    ...
    {
      label: 'All Outstanding',
      properties: [
        '$appId',
        '$appStatus',
        '$appCreated',
        '$primaryName',
        '$assigned',
        '$product',
      ],
      sortOrder: 'asc',
      sortBy: '$assigned',
    },
    {
      label: 'Opened last week',
      groupNames: ['Manual Review'],
      properties: [
        '$appId',
        '$appStatus',
        '$appCreated',
        '$primaryName',
        '$assigned',
        '$product',
      ],
      filterBy: {
        $product: 'All',
        $appStatus: ['Opened', 'None'],
        $appCreated: [date('1 week ago'), date('today')]
      },
      sortBy: '$appCreated',
      permissions: {
        type: 'group',
        value: ['Fraud Review'],
      },
    },
    ...
  ],
  ...
});

export default processConfig;