Version: 20.05

Views

The views property defines a group of table configurations that will be displayed on the List Screen. Views are pre-configured groups of properties, they specifies which criterias are included on the Txn query (sort and filters).

Note

  • It's not possible to filter on multiple submission properties. So it's advisable to have only one submission property in the filterBy option.
  • It's advisable to limit the view label to 20 - 25 characters to avoid formatting issues. Anything more will be truncated.
  • Avoid duplicating properties in the views as this will cause unexpected results.

Example

The following example showcase how to configure views with default sort and filter criterias.

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": "test@temenos.com"
}

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: ['kparameswaran@temenos.com', 'jpower@temenos.com']
},
},
$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;

Please notice that filterBy value attributes should not be an array unless the filter type supports multiple values like multiselect or daterangepicker.

Attributes

To review the possible attributes please check the API Reference.