Views

The views property defines a group of table configurations to display on the List screen. Views are pre-configured groups of properties that specify which criteria are included on the Txn query (sort and filters).

Here are some recommendations to consider when configuring a view.

• When filtering on multiple submission properties, the parent mapping attribute's filter must be defined as multiselect.
• Limit the view label to 20-25 characters to avoid formatting issues. Longer labels may be truncated.
• Avoid duplicating properties in views as this will cause unexpected results.

Properties

Property	Description
expandInfo	Display a custom card inside an expandable table row on the List screen. The property value is a single mapping specified in the global config. Only accepts type: table or type: list.

expandInfo Example

  views: [
    {
      label: 'All Outstanding',
      properties: ['$appId', '$appStatus', '$appCreated', '$primaryName', '$assigned', '$product'],
      sortOrder: 'asc',
      sortBy: '$assigned',
      expandInfo: '$applicantValidation',
    },
  ],

Example

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

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

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;

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;

note

Don't specify an array for filterBy value attributes unless the filter type supports multiple values like multiselect or daterangepicker.

Attributes

To review the list of supported attributes, see API Reference.