Version: 24.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 data is displayed, including formatting. Some type values relate to a single-value data item, while others specify a type of custom card.
Single-value data types
The following type values relate to single-value data items.
text: A plain text value.number: A numeric value, sometimes displayed with a graphic element.date: A date value using the date format from the current locale by default. You can change how a date appears, showing both date and time, by adding theformat: 'datetime'attribute. For example:$formLastModified: {
label: 'Last modified 3',
icon: 'LastModified',
dataIndex: ['timeUserLastModified'],
type: 'date',
format: 'datetime',
...
},alert: Used to configure a service-level agreement (SLA). To learn more, see Service-level agreement. You can display color-coded values using thestatusColorsattribute. For example:type: 'alert',
statusColors: {
Black: ['HARDFAIL'],
LightGreen: ['LOW'],
Green: ['VERIFIED', 'PASSED', 'ACCEPT', 'APPROVE', 'TRUSTED', 'PASS'],
Red: ['FAILED', 'DECLINE', 'HIGH', 'FAIL'],
Blue: ['REVIEW', 'NEUTRAL', 'UNVERIFIED'],
Orange: ['INSUFFICIENT', 'MEDIUM'],
},
Custom card types
The following type values specify that the mapping is a custom card and determine what type of custom card is displayed.
list: Display key/value pairs in a grid container.listStacked: Display key/value pairs in a scrollable container.listExtended: Alistcustom card with color-coded values.table: Display aTxnJSON array in a table layout.tableExtended: Atablecustom card with additional features.iframe: Display an iframe in a custom card embedded in the Details screen.
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.
Permissions
The permissions property adds a role- or group-based restriction to a mapping that controls who is allowed to see the data or UI elements related to that mapping; for example, who can see a particular column in a table. To learn more, see Configuration > Current space configuration > Permissions.
Highlight
Adding the highlight property on a mapping makes visual changes to the data to help it stand out.
| Property | Description |
|---|---|
'bold' | Sets the data to be displayed as bold. Only accepts the string 'bold' as a value. |
{} | Accepts the same object as statusColors where you can map a number of colors to single or multiple values. |
Example
// Custom Card Mapping
$applicants: {
label: 'Applicants',
icon: 'PermIdentityTwoTone',
type: 'tableExtended',
dataSource: ["job.properties['ApplicationDetails']", "properties['ApplicationDetails']"],
properties: [
{
label: 'Status',
dataIndex: "profile['checkStatus']",
type: 'alert',
},
{
label: 'Name',
dataIndex: "profile['name']",
type: 'text',
highlight: 'bold',
},
{
label: 'Email',
dataIndex: "profile['email']",
type: 'text',
highlight: {
LightGreen: ['[email protected]'],
Blue: ['[email protected]'],
},
},
],
sections: [
...
],
},
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.