Version: 22.04
Custom Cards
The customCards property defines the set of cards that Journey Engage displays on the Details screen in the Custom Cards section. Journey Engage supports five custom card types:
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.
All custom cards have have optional properties that allow architects to hide fields or cards based on empty values or permissions.
hideEmptyis a property that shows or hides empty fields in a card (based on the boolean value).permissionscan be configured to show or hide cards based on the current userroleorgroup.
The appearance of custom cards changes depending upon the content contained within. If the content exceeds the width of the card, a horizontal scrollbar appears allowing all content to be accessed. And if there is no data to display, a custom card won't appear at all.
If there are multiple custom cards specified in the array, the custom cards will be shown as tabs. Each tab can have one or more custom cards within it.
info
The custom card config can be added as a mapping from the global config, or inline as an object into the properties array. Check the example below for more information.
Example space config
import { ConfigCurrentSpace } from '@transact-open-ux/workspaces/dist/types';
export const applicantsConfig = ({ date }: any): ConfigCurrentSpace => ({
...
customCards: {
{
label: 'Applicants',
properties: ['$customCard', '$txnProperties'],
},
{
label: 'Properties',
properties: ['$txnProperties'],
},
},
...
});
export default applicantsConfig;
Types
List
The list type is used to display key/value pairs in a grid container. It can be configured to pull data from different Txn properties or use a dataSource config to pull data from a single Txn JSON property.
List Stacked
The listStacked type is used to display key/value pairs in a scrollable horizonal container.
$customCard: {
label: 'Review Checklist',
type: 'listStacked',
icon: 'BallotOutlined',
hideEmpty: true,
permissions: {
type: 'role',
value: ['Processing Staff'],
},
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',
},
],
},
List Extended
The listExtended type, in conjunction with the statusColors config, displays color-coded key/value pairs in a grid container.
info
statusColors is used to map the integrations values to predefined colors.
$customCard: {
label: 'Background Checks',
type: 'listExtended',
hideEmpty: false,
permissions: {
type: 'role',
value: ['Heldesk Staff'],
},
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',
},
},
],
},
],
},
Table
The table type is used to display a JSON array Txn property in a table. It is designed to display tabular data stored in a Txn JSON property. Using the dataSource, the table component will iterate (foreach) over the array and display the data in multiple rows.
Table Extended
The tableExtended type is used to display a JSON array Txn property in a selectable table container with sub-sections that can be of types list or listExtended. It expects a similar structure as a type table. tableExtended differs from table in that it allows selection on the table. When a row is clicked, all data is passed to the sections config.
info
This custom card type was introduced to support multi-applicants but can be used with any data source as long as the structure is correct.
You can use the example below as a reference data structure for a multi-applicant/multi-product scenario.
JM Txn property
[
{
"profile": {
"name": "Tom Riddle",
"email": "[email protected]",
"ssn": "###-##-2033",
"phone": "(123) 303-4044",
"dob": "1918-01-11",
"address": "2/1a Rialto Ln, Manly NSW 2095"
},
"integrations": [
{
"name": "Fis Check Systems",
"items": [
{
"name": "IDA",
"value": "FAILED"
},
{
"name": "IDV",
"value": "VERIFIED",
"link": "<html> Sample HTML </html>"
},
{
"name": "OFAC",
"value": "PASSED"
},
{
"name": "QUALFILE",
"value": "ACCEPT",
"link": "<html> Sample HTML </html>"
}
]
},
{
"name": "Threat metrix",
"items": [
{
"name": "Decision",
"value": "APPROVE",
"link": "{\"jsonStructure\":\"value\"}"
},
{
"name": "Risk Rating",
"value": "TRUSTED"
},
{
"name": "Score",
"value": "-10"
}
]
},
{
"name": "TIN Check",
"items": [
{
"name": "Tin Verification",
"value": "PASS",
"link": "<?xml version=\"1.0\"?>\r\n<soap:Envelope xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\">\r\n <soap:Body></soap:Body>\r\n</soap:Envelope>"
}
]
}
],
"products": {
"Trust": "Primary",
"Standard Checking": "Primary"
},
"checkStatus": true
}
]
if we have a Txn property called ApplicationDetails with the above structure, we can configure our custom card in the following way.
$customCard: {
label: 'Applicants',
icon: 'PermIdentityTwoTone',
type: 'tableExtended',
dataSource: 'properties["ApplicationDetails"]',
permissions: {
type: 'group',
value: ['Fraud Review'],
},
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',
},
},
],
},
],
},
],
},
Example
The following example showcases two different ways the customCards property can be configured. It can be done by using a global mapping string or by including the whole definition object without using any mappings.
Txn properties
{
"properties": {
"FundingAmount": "$25,000",
"FundingType": "ACH",
"SecondaryName": "[email protected]",
"SecondaryEmail": "MIchael Green",
"SecondarySSN": "311-333-1222",
"ThirdName": "[email protected]",
"ThirdEmail": "Daniel Green",
"ThirdSSN": "122-122-1222",
"Integrations": "[{ \"IsSuccess\": true, \"Data\": { \"ApplicationResult\": \"PROCEED\"}]",
"ThreatMetrixScore.PrimaryApplicant": "-55",
"ThreatMetrixScore.SecondaryApplicant": "69",
"ThreatMetrixDecision.PrimaryApplicant": "APPROVE",
"ThreatMetrixDecision.SecondaryApplicant": "HARDFAIL",
"ThreatMetrixRiskRating.PrimaryApplicant": "HIGH",
"ThreatMetrixRiskRating.SecondaryApplicant": "HIGH",
"FisIda.PrimaryApplicant.verifyStatus": "VERIFIED",
"FisIda.SecondaryApplicant.verifyStatus": "FAILED",
"FisIdv.PrimaryApplicant.idvVerifyStatus": "FAILED",
"FisIdv.SecondaryApplicant.idvVerifyStatus": "FAILED",
"FisIdv.PrimaryApplicant.ofacStatus": "PASSED",
"FisIdv.SecondaryApplicant.ofacStatus": "FAILED",
"FisQualiFile.PrimaryApplicant.accountAcceptanceTxt": "REVIEW",
"FisQualiFile.SecondaryApplicant.accountAcceptanceTxt": "APPROVE"
"Applicants": "[{\"type\":\"Primary\",\"extracts\":{\"PrimaryEmail\":\"[email protected]\",\"PrimaryName\":\"Matt Green\",\"PrimarySSN\":\"111-233-1234\"}}]",
"GenericContent": "[{\"type\": \"Identity verification\",\"pdfContent\": \"https://tm.workspaces.avoka-transact.com/workspaces/servlet/FormReceipt.pdf?submitKey=54cb2ad573303fedd0044cba2208223f\"},{\"type\": \"Driver licence\",\"pdfContent\": \"https://tm.workspaces.avoka-transact.com/workspaces/servlet/FormReceipt.pdf?submitKey=54cb2ad573303fedd0044cba2208223f\"}]",
"EmailList": "[{\"name\": \"AO402.1.AVOKA\",\"dateAttempted\": \"05/30/2018 14:55:01\",\"emailSent\": \"true\"}]"
}
}
src/configs/custom/global.ts
import { ConfigGlobal } from '@transact-open-ux/workspaces/dist/types';
export const globalConfig = ({ date }: any): ConfigGlobal => ({
...
mappings: {
$applicants: {
label: 'Applicants',
icon: 'PermIdentityTwoTone',
type: 'tableExtended',
dataSource: "properties['Applicants']",
properties: [
{
label: 'Name',
// dataIndex: 'profile.name',
dataIndex: 'extracts.PrimaryName',
type: 'text',
},
{
label: 'Email',
// dataIndex: 'profile.email',
dataIndex: 'extracts.PrimaryEmail',
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: 'extracts.PrimaryName',
type: 'text',
fullWidth: true,
},
{
label: 'Address',
dataIndex: 'profile.address',
type: 'text',
fullWidth: true,
},
{
label: 'SSN',
dataIndex: 'extracts.PrimarySSN',
type: 'text',
},
{
label: 'Email',
dataIndex: 'extracts.PrimaryEmail',
type: 'text',
},
{
label: 'Phone #',
dataIndex: 'profile.phone',
type: 'text',
},
{
label: 'Date of Birth',
dataIndex: 'extracts.dob',
type: 'date',
format: 'relative',
},
],
},
{
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',
},
},
],
},
],
},
],
},
$txnProperties: {
label: 'Properties',
icon: 'InfoTwoTone',
type: 'table',
dataSource: "txnProperties",
properties: [
{
label: 'Name',
dataIndex: 'name',
type: 'text',
},
{
label: 'Info',
dataIndex: 'short',
type: 'text',
},
{
label: 'View content',
type: 'text',
link: {
dataIndex: 'value',
type: 'html',
},
},
],
},
$txnFormDataMap: {
label: 'Form Data Extracts',
icon: 'InfoTwoTone',
type: 'table',
dataSource: 'txnFormDataMap',
properties: [
{
label: 'Name',
dataIndex: 'name',
type: 'text',
},
{
label: 'Info',
dataIndex: 'short',
type: 'text',
},
{
label: 'View content',
type: 'text',
link: {
dataIndex: 'value',
type: 'html',
},
},
],
},
$applicantValidations: {
label: 'Applicant validations',
icon: 'InfoTwoTone',
type: 'table',
dataSource: "properties['GenericContent']",
properties: [
{
label: 'Type',
dataIndex: 'type',
type: 'text',
},
{
label: 'View report',
type: 'text',
link: {
dataIndex: 'htmlContent',
type: 'html',
encoding: 'base64',
},
},
{
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 PDF',
link: {
dataIndex: 'pdfContent',
type: 'pdf',
},
},
],
},
$reviewChecklist: {
label: 'Review Checklist',
type: 'listStacked',
icon: 'BallotOutlined',
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',
},
],
},
},
...
});
export default globalConfig;
src/configs/custom/applicant.ts:
{
...
customCards: [
{
label: 'Applicants',
properties: ['$applicants', '$txnProperties'],
},
{
label: 'Properties',
properties: ['$txnProperties'],
},
{
label: 'Form Data Extracts',
properties: ['$txnFormDataMap'],
},
{
label: 'Application Validation',
properties: [
{
label: 'Review Checklist',
type: 'listStacked',
icon: 'BallotOutlined',
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',
},
],
}
],
},
];
...
}
Attributes
To review the list of supported attributes, see API Reference.