Version: 22.10
Mappings
Mapping is the process of defining how a Txn and the properties it contains are read, sorted, filtered and rendered. Mappings are used to define various configurations including:
- a property label
- the value of the
dataIndexproperty - which properties should be treated as
text,date, ornumber - the format of values
- custom rules to control filtering and sorting
Job Properties
Job properties are used the same way as Txn properties. They are supported across the app by views, key info cards, and custom cards.
To specify a Job property in the config, use the format:
job.properties[PROPERTY_NAME]
For example:
$risk: {
label: 'Risk',
icon: 'InfoTwoTone',
type: 'list',
hideEmpty: false,
properties: [
{
label: 'Risk Rating',
dataIndex: [
"job.properties['ThreatMetrixRiskRating.PrimaryApplicant']",
"properties['ThreatMetrixRiskRating.PrimaryApplicant']",
],
type: 'text',
link: {
dataIndex: [
"job.properties['TINCheckSOAPReponse.Primary.result']",
"properties['TINCheckSOAPReponse.Primary.result']",
],
type: 'xml',
},
},
],
},
Initial Transaction Properties
The initial transaction's properties can be used to configure the Details screen. Initial properties are supported by key info cards and custom cards.
To get a value from a property in the initial transaction, use the format:
initial.properties[PROPERTY_NAME]
For example:
$completedMessages: {
label: 'Completed Actions',
icon: 'priority',
type: 'table',
hideEmpty: true,
dataSource: ["initial.properties['CompletedMessages']"],
properties: [
{
label: 'Date',
dataIndex: 'date',
type: 'date',
},
{
label: 'Message',
dataIndex: 'message',
type: 'text',
},
],
},
Hide Empty
The hideEmpty property can be added to any custom card or custom card tab configuration to hide values that are not available or null. If the entire custom card or all the custom cards in a custom card tab are empty, then the whole card or tab will be hidden as well.
info
If hideEmpty is added to the configuration of a custom card tab as well as the custom cards within the tab, then the custom card tab definition takes precedence.
The following example demonstrates how to configure hideEmpty for a custom card tab.
customCards: [
{
label: 'Applicants',
properties: ['$applicants'],
},
{
label: 'Review Checklist',
properties: ['$reviewChecklist'],
hideEmpty: true,
rules: [
{
dataIndex: 'userLoginName',
value: currentUser,
},
],
},
{
label: 'Communications',
properties: ['$sentEmails'],
hideEmpty: true,
},
{
label: 'Validations',
properties: ['$applicantValidations'],
},
{
label: 'Documents Checklist',
properties: ['$docsList'],
},
],
The following example demonstrates how to configure hideEmpty for a custom card.
$completedMessages: {
label: 'Completed Actions',
icon: 'priority',
type: 'table',
hideEmpty: true,
dataSource: ["initial.properties['CompletedMessages']"],
properties: [
{
label: 'Date',
dataIndex: 'date',
type: 'date',
},
{
label: 'Message',
dataIndex: 'message',
type: 'text',
},
],
},
Tooltip
Adding the tooltip property to a mapping will show an info icon next to the value, and will display the data of the dataIndex specified. This applies to the table on the Listing Screen and the key info card sections only.
$product: {
label: 'Product',
icon: 'WorkOutlineOutlined',
tooltip: {
dataIndex: "properties['AllProducts']",
},
type: 'text',
sorter: false,
filter: {
type: 'input',
},
},
Hide From Table
Sometimes, you might want to make a field available for filtering but not display it on the List screen table. You can achieve this by adding the hideFromTable property, with the appropriate filter configurations, to a field mapping.
$receiptStatus: {
label: 'Receipt Status',
dataIndex: 'receiptStatus',
type: 'text',
sorter: false,
hideFromTable: true,
filter: {
type: 'select',
options: ['Ready', 'In Progress', 'Completed', 'Error', 'Error - No Data' ]
}
},
Type
The type property on a mapping determines how the data will be displayed and formatted. Some of the options apply to single value, whilst others determine a type of custom card.
These values would determine how a single piece of information from the data is displayed and formatted: text, date, number, alert, time.
info
The alert type is used to configure a service-level agreement (SLA). To learn more, see Service-level agreement.
These values determine the mapping is a custom card and what type of custom card that will be displayed: list, listExtended, listStacked, table, tableExtended
Filter
The filter property adds a filter for this mapping into the table filters on the main listing table. The value determines what kind of filter it will be. Check the filter reference for options.
Complete Mappings Example
src/configs/custom/global.ts
import { ConfigGlobal } from '@transact-open-ux/workspaces/dist/types';
export const globalConfig = ({ date }: any): ConfigGlobal => ({
...
mappings: {
$primaryName: {
label: 'Primary applicant',
icon: 'PersonOutlineOutlined',
dataIndex: ["properties['PrimaryName']", "formDataMap['PrimaryName']"],
type: 'text',
sorter: false,
filter: {
type: 'input',
},
},
$appId: {
label: 'App ID',
icon: 'FontDownloadOutlined',
dataIndex: ['job.jobRefNumber', 'trackingCode'],
type: 'text',
sorter: false,
filter: {
type: 'input',
},
},
$taskId: {
label: 'Task ID',
icon: 'FontDownloadOutlined',
dataIndex: 'trackingCode',
type: 'text',
sorter: false,
},
$product: {
label: 'Product',
icon: 'WorkOutlineOutlined',
dataIndex: ['job.name', 'formName'],
type: 'text',
tooltip: {
dataIndex: "properties['AllProducts']",
},
sorter: false,
filter: {
type: 'input',
},
},
$backgroundCheckStatus: {
label: 'Background Checks Status',
icon: 'CheckRounded',
dataIndex: ["properties['IntegrationsReview']"],
type: 'text',
sorter: false,
filter: {
type: 'input',
},
},
$taskSla: {
label: 'SLA',
dataIndex: "properties['taskSla']",
type: 'alert',
warning: '1 week',
},
$slaDate: {
label: 'SLA Expiry',
icon: 'EventOutlined',
dataIndex: "properties['taskSla']",
type: 'date',
format: 'relative',
sorter: false,
},
$currentQueue: {
label: 'Current queue',
icon: 'FlagOutlined',
dataIndex: 'groupName',
type: 'text',
sorter: true,
filter: {
type: 'multiselect',
options: ['Error Review', 'Fraud Review', 'Manual Review'],
},
},
$appAge: {
label: 'App age',
icon: 'EventOutlined',
dataIndex: 'job.timeCreated',
type: 'date',
format: 'relative',
sorter: true,
filter: {
type: 'daterangepicker',
options: {
minDate: date('1 month ago'),
maxDate: date('now'),
},
},
},
$assigned: {
label: 'Assigned to',
icon: 'AccountCircleOutlined',
dataIndex: 'userLoginName',
type: 'text',
sorter: true,
filter: {
type: 'input',
},
},
$currentStep: {
label: 'Current Step',
icon: 'TaskID',
dataIndex: 'job.currentStep',
type: 'text',
sorter: false,
},
$currentTask: {
label: 'Current task',
icon: 'TaskID',
dataIndex: 'formName',
type: 'text',
sorter: false,
},
$taskCreated: {
label: 'Task Created',
icon: 'TaskCreated',
dataIndex: 'timeCreated',
type: 'date',
format: 'relative',
sorter: true,
filter: {
type: 'daterangepicker',
options: {
minDate: date('1 month ago'),
maxDate: date('now'),
},
},
},
$appLastModified: {
label: 'Last modified',
icon: 'LastModified',
dataIndex: 'job.timeLastModified',
type: 'date',
sorter: false,
filter: {
type: 'daterangepicker',
options: {
minDate: date('1 month ago'),
maxDate: date('now'),
},
},
},
$formLastModified: {
label: 'Last modified',
icon: 'LastModified',
dataIndex: ['timeUserLastModified'],
type: 'date',
sorter: true,
filter: {
type: 'daterangepicker',
options: {
minDate: date('1 month ago'),
maxDate: date('now'),
},
},
},
$appStatus: {
label: 'App status',
icon: 'AppStatus',
dataIndex: ['job.status', 'formStatus'],
type: 'text',
sorter: false,
},
$taskStatus: {
label: 'Task Status',
icon: 'TaskStatus',
dataIndex: 'formStatus',
type: 'text',
sorter: true,
filter: {
type: 'multiselect',
options: ['Assigned', 'Opened', 'Saved', 'Completed', 'Abandoned'],
},
},
$dateOfBirth: {
label: 'Date of birth',
dataIndex: ["properties['PrimaryDOB']", "formDataMap['PrimaryDOB']"],
type: 'text',
sorter: false,
filter: {
type: 'input',
},
},
$SSN: {
label: 'SSN',
dataIndex: ["properties['PrimarySSN']", "formDataMap['PrimarySSN']"],
type: 'text',
sorter: false,
filter: {
type: 'input',
},
},
$email: {
label: 'Email',
dataIndex: ["properties['PrimaryEmail']", "formDataMap['PrimaryEmail']"],
type: 'text',
sorter: false,
filter: {
type: 'input',
},
},
$phone: {
label: 'Phone #',
dataIndex: ["properties['PrimaryPhone']", "formDataMap['PrimaryPhone']"],
type: 'text',
sorter: false,
filter: {
type: 'input',
},
},
$appSubmitted: {
label: 'App submitted',
dataIndex: 'job.timeCreated',
type: 'date',
sorter: true,
filter: {
type: 'daterangepicker',
options: {
minDate: date('1 month ago'),
maxDate: date('now'),
},
},
},
$appCreated: {
label: 'App created',
dataIndex: 'timeCreated',
type: 'date',
sorter: true,
filter: {
type: 'daterangepicker',
options: {
minDate: date('1 month ago'),
maxDate: date('now'),
},
},
},
$formStatus: {
label: 'Form status',
icon: 'TaskStatus',
dataIndex: 'formStatus',
type: 'text',
sorter: true,
filter: {
type: 'multiselect',
options: ['Assigned', 'Opened', 'Saved', 'Completed', 'Abandoned'],
},
},
$applicants: {
label: 'Applicants',
icon: 'PermIdentityTwoTone',
type: 'tableExtended',
hideEmpty: true,
dataSource: ["job.properties['ApplicationDetails']", "properties['ApplicationDetails']"],
properties: [
{
label: 'Status',
dataIndex: 'checkStatus',
type: 'alert',
},
{
label: 'Name',
dataIndex: 'profile.name',
type: 'text',
},
{
label: 'Email',
dataIndex: 'profile.email',
type: 'text',
},
{
label: 'Trust',
dataIndex: "products['Trust']",
type: 'text',
},
{
label: 'Super Saver',
dataIndex: "products['Super Saver']",
type: 'text',
},
{
label: 'Standard Checking',
dataIndex: "products['Standard Checking']",
type: 'text',
},
],
sections: [
{
label: 'Personal Info',
type: 'list',
properties: [
{
label: 'Full Name',
dataIndex: 'profile.name',
type: 'text',
fullWidth: true,
},
{
label: 'Address',
dataIndex: 'profile.address',
type: 'text',
fullWidth: true,
},
{
label: 'SSN',
dataIndex: 'profile.ssn',
type: 'text',
},
{
label: 'Email',
dataIndex: 'profile.email',
type: 'text',
},
{
label: 'Phone #',
dataIndex: 'profile.phone',
type: 'text',
},
{
label: 'Date of Birth',
dataIndex: 'profile.dob',
type: 'text',
},
],
},
{
label: 'Background Checks',
type: 'listExtended',
statusColors: {
Black: ['HARDFAIL'],
LightGreen: ['LOW'],
Green: ['VERIFIED', 'PASSED', 'ACCEPT', 'APPROVE', 'TRUSTED', 'PASS'],
Red: ['FAILED', 'DECLINE', 'HIGH', 'FAIL'],
Blue: ['REVIEW', 'NEUTRAL', 'UNVERIFIED'],
Orange: ['INSUFFICIENT', 'MEDIUM'],
},
properties: [
{
label: 'FIS Chexsystems',
properties: [
{
label: 'IDA',
dataIndex: 'integrations.[0].items[0].value',
type: 'text',
},
{
label: 'IDV',
dataIndex: 'integrations.[0].items[1].value',
type: 'text',
link: {
dataIndex: 'integrations.[0].items[1].link',
type: 'html',
},
},
{
label: 'OFAC',
dataIndex: 'integrations.[0].items[2].value',
type: 'text',
},
{
label: 'Qualfile',
dataIndex: 'integrations.[0].items[3].value',
type: 'text',
link: {
dataIndex: 'integrations.[0].items[3].link',
type: 'html',
},
},
],
},
{
label: 'Threat Metrix',
properties: [
{
label: 'Decision',
dataIndex: 'integrations.[1].items[0].value',
type: 'text',
link: {
dataIndex: 'integrations.[1].items[0].link',
type: 'json',
},
},
{
label: 'Risk Rating',
dataIndex: 'integrations.[1].items[1].value',
type: 'text',
},
{
label: 'Score',
dataIndex: 'integrations.[1].items[2].value',
type: 'number',
},
],
},
{
label: 'TIN Check',
properties: [
{
label: 'TIN Verification',
dataIndex: 'integrations.[2].items[0].value',
type: 'text',
link: {
dataIndex: 'integrations.[2].items[0].link',
type: 'xml',
},
},
],
},
],
},
],
},
$sentEmails: {
label: 'Sent emails',
icon: 'InfoTwoTone',
type: 'table',
dataSource: ["job.properties['EmailList']", "properties['EmailList']"],
properties: [
{
label: 'Date sent',
dataIndex: 'dateAttempted',
type: 'date',
},
{
label: 'Info',
dataIndex: 'name',
type: 'text',
},
{
label: 'Delivery status',
dataIndex: 'emailSent',
type: 'text',
},
{
label: 'Follow up',
dataIndex: 'followUp',
type: 'text',
},
{
label: 'Sent mail',
type: 'text',
link: {
dataIndex: 'emailContent',
type: 'html',
encoding: 'base64',
},
},
{
label: 'Resend',
link: {
dataIndex: 'name',
type: 'invoke',
serviceName: 'DAO - Resend Email',
versionNumber: '0.1.0',
},
},
],
},
$applicantValidations: {
label: 'Applicant validations',
icon: 'InfoTwoTone',
type: 'table',
dataSource: "properties['GenericContent']",
properties: [
{
label: 'Type',
dataIndex: 'type',
type: 'text',
},
{
label: 'View JSON',
type: 'text',
link: {
dataIndex: 'jsonContent',
type: 'json',
encoding: 'base64',
},
},
{
label: 'View XML',
type: 'text',
link: {
dataIndex: 'xmlContent',
type: 'xml',
encoding: 'base64',
},
},
{
label: 'View HTML',
type: 'text',
link: {
dataIndex: 'htmlContent',
type: 'html',
encoding: 'base64',
},
},
{
label: 'View PDF',
link: {
dataIndex: 'pdfContent',
type: 'pdf',
},
},
],
},
$reviewChecklist: {
label: 'Review Checklist',
type: 'listExtended',
icon: 'BallotOutlined',
statusColors: {
Green: ['Reviewed'],
Blue: ['Pending'],
Red: ['To do'],
},
properties: [
{
label: 'Personal Details',
dataIndex: ["properties['PersonalDetails']"],
type: 'text',
},
{
label: 'Background Checks',
dataIndex: ["properties['BackgroundChecks']"],
type: 'text',
filter: {
type: 'input',
},
},
{
label: 'Attachments',
dataIndex: ["properties['Attachments']"],
type: 'text',
},
{
label: 'Remarks',
dataIndex: ["properties['Remarks']"],
type: 'text',
fullWidth: true,
},
],
},
$docsList: {
label: 'Selected Products',
icon: 'InfoTwoTone',
type: 'tableExtended',
dataSource: 'invoke.products',
hideEmpty: true,
properties: [
{
label: 'Application Type',
dataIndex: 'applicationType',
type: 'text',
},
{
label: 'Status',
dataIndex: 'status',
type: 'alert',
},
{
label: 'Trust',
dataIndex: 'turst',
type: 'text',
},
{
label: 'Super Saver',
dataIndex: 'superSaver',
type: 'text',
},
{
label: 'Standard Checking',
dataIndex: 'standardChecking',
type: 'text',
},
],
sections: [
{
label: 'Required Documents',
type: 'table',
dataSource: 'documents',
properties: [
{
label: 'Name',
dataIndex: 'name',
type: 'text',
},
{
label: 'Required',
dataIndex: 'required',
type: 'text',
},
{
label: 'Available',
dataIndex: 'available',
type: 'text',
},
],
},
],
},
$customerMessage: {
label: 'Information Requested',
icon: 'priority',
type: 'table',
hideEmpty: true,
dataSource: ["initial.properties['CustomerMessage']"],
properties: [
{
label: 'New',
dataIndex: 'status',
type: 'alert',
},
{
label: 'Date',
dataIndex: 'date',
type: 'date',
},
{
label: 'Message',
dataIndex: 'message',
type: 'text',
},
{
label: 'Complete',
type: 'text',
link: {
dataIndex: 'id',
type: 'invoke',
serviceName: 'DAO - Mark as Read',
versionNumber: '0.1.0',
},
},
],
},
$completedMessages: {
label: 'Completed Actions',
icon: 'priority',
type: 'table',
hideEmpty: true,
dataSource: ["initial.properties['CompletedMessages']"],
properties: [
{
label: 'Date',
dataIndex: 'date',
type: 'date',
},
{
label: 'Message',
dataIndex: 'message',
type: 'text',
},
],
},
$processCustomerMessage: {
label: 'Information Requested',
icon: 'priority',
type: 'table',
hideEmpty: true,
dataSource: ["initial.properties['CustomerMessage']"],
properties: [
{
label: 'New',
dataIndex: 'status',
type: 'alert',
},
{
label: 'Date',
dataIndex: 'date',
type: 'date',
},
{
label: 'Message',
dataIndex: 'message',
type: 'text',
},
],
},
$risk: {
label: 'Risk',
icon: 'InfoTwoTone',
type: 'list',
hideEmpty: false,
properties: [
{
label: 'Risk Rating',
dataIndex: [
"job.properties['ThreatMetrixRiskRating.PrimaryApplicant']",
"properties['ThreatMetrixRiskRating.PrimaryApplicant']",
],
type: 'text',
link: {
dataIndex: [
"job.properties['TINCheckSOAPReponse.Primary.result']",
"properties['TINCheckSOAPReponse.Primary.result']",
],
type: 'xml',
},
},
],
},
},
});
export default globalConfig;
Attributes
To review the list of supported attributes, see API Reference.