Version: 20.05

Custom Cards

The customCards property defined the list of Custom Cards that Workspaces will display on the Details Screen in the Custom Cards section. Currently Workspaces support five custom card types: list, listExtended, listStacked, table and tableExtended.

All custom cards have have optional properties that allows Architects to hide fields/cards based on empty values or permissions. hideEmptyFields is a property that based on the boolean value will show/hide empty fields in a card, while permissions can be configured to show/hide cards based on the current user role or group.

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 also 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.

src/configs/custom/process.ts

import { ConfigCurrentSpace } from '@transact-open-ux/workspaces/dist/types';
export const processConfig = ({ date }: any): ConfigCurrentSpace => ({
...
customCards: [
...
{
label: 'Review Checklist',
type: 'listStacked',
icon: 'BallotOutlined',
hideEmptyFields: 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',
},
],
},
...
],
...
});
export default processConfig;

List Extended

The listExtended type in conjunction with the statusColors config, allows to display color coded key/value pairs in a grid container.

Note

Please notice the statusColors is used to map the integrations values to predefined colors.

src/configs/custom/process.ts

import { ConfigCurrentSpace } from '@transact-open-ux/workspaces/dist/types';
export const processConfig = ({ date }: any): ConfigCurrentSpace => ({
...
customCards: [
...
{
label: 'Background Checks',
type: 'listExtended',
hideEmptyFields: 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',
},
},
],
},
],
},
...
],
...
});
export default processConfig;

Table

The table type is used to display a json array Txn property in a table. It was designed to display tabular data stored in a txn json property. By using the dataSource, the table component will foreach through 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. The difference is that this custom card allows selection on the table, when a row is clicked, all data is passed to the sections config.

Note

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.

Please use the example below as a reference data structure for a multi-applicant & multi-product scenario.

JM Txn property

[
{
"profile":{
"name":"Tom Riddle",
"email":"tom.riddle@abc.com",
"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 strcuture, We can configure our custom card on the following way.

src/configs/custom/process.ts

import { ConfigCurrentSpace } from '@transact-open-ux/workspaces/dist/types';
export const processConfig = ({ date }: any): ConfigCurrentSpace => ({
...
customCards: [
...
{
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',
},
},
],
},
],
},
],
},
...
],
...
});
export default processConfig;

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 placing the whole definition object without using any mappings.

Note

The custom card will only appear if there is data to display. A horizontal scrollbar will appear if the content exceeds the width of the card.

Txn properties

{
"properties": {
"FundingAmount": "$25,000",
"FundingType": "ACH",
"SecondaryName": "michael@temenos.com",
"SecondaryEmail": "MIchael Green",
"SecondarySSN": "311-333-1222",
"ThirdName": "daniel@temenos.com",
"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\":\"kparameswaran@temenos.com\",\"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["ApplicantsData"]',
hideEmptyFields: true,
properties: [
{
label: 'Status',
dataIndex: 'checkStatus',
type: 'alert',
},
{
label: 'Name',
dataIndex: 'name',
type: 'text',
},
{
label: 'Email',
dataIndex: 'email',
type: 'text',
},
],
sections: [
{
label: 'Personal Info',
type: 'list',
properties: [
{
label: 'Name',
dataIndex: 'name',
type: 'text',
fullWidth: true,
},
{
label: 'SSN',
dataIndex: 'ssn',
type: 'text',
},
{
label: 'Email',
dataIndex: 'email',
type: 'text',
},
],
},
],
},
$fundingType: {
label: 'Type',
dataIndex: 'properties["FundingType"]',
type: 'text',
},
$fundingAmount: {
label: 'Amount',
dataIndex: 'properties["FundingAmount"]',
type: 'text',
},
$backgroundChecks: {
label: 'Background Checks',
type: 'listExtended',
icon: 'VerifiedUserTwoTone',
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: 'properties["FisIda.PrimaryApplicant.verifyStatus"]',
type: 'text',
},
{
label: 'IDV',
dataIndex: 'properties["FisIdv.PrimaryApplicant.idvVerifyStatus"]',
type: 'text',
link: {
dataIndex: 'properties["FisIdv.PrimaryApplicant.htmlReport"]',
type: 'html',
},
},
{
label: 'OFAC',
dataIndex: 'properties["FisIdv.PrimaryApplicant.ofacStatus"]',
type: 'text',
},
{
label: 'Qualfile',
dataIndex: 'properties["FisQualiFile.PrimaryApplicant.accountAcceptanceTxt"]',
type: 'text',
link: {
dataIndex: 'properties["FisQualiFile.PrimaryApplicant.htmlReport"]',
type: 'html',
},
},
],
},
{
label: 'Threat Metrix',
properties: [
{
label: 'Score',
dataIndex: [
'properties["ThreatMetrixScore.PrimaryApplicant"]',
'formDataMap["ThreatMetrixScore.PrimaryApplicant"]',
],
type: 'number',
},
{
label: 'Decision',
dataIndex: [
'properties["ThreatMetrixDecision.PrimaryApplicant"]',
'formDataMap["ThreatMetrixDecision.PrimaryApplicant"]',
],
type: 'text',
link: {
dataIndex: [
'properties["ThreatMetrixQueryResponse.PrimaryApplicant"]',
'formDataMap["ThreatMetrixQueryResponse.PrimaryApplicant"]',
],
type: 'json',
},
},
{
label: 'Risk rating',
dataIndex: [
'properties["ThreatMetrixRiskRating.PrimaryApplicant"]',
'formDataMap["ThreatMetrixRiskRating.PrimaryApplicant"]',
],
type: 'text',
},
],
},
],
},
},
...
});
export default globalConfig;

src/configs/custom/process.ts

import { ConfigCurrentSpace } from '@transact-open-ux/workspaces/dist/types';
export const processConfig = ({ date }: any): ConfigCurrentSpace => ({
...
customCards: [
'$applicants',
{
label: 'Funding Status',
type: 'listStacked',
properties: [
'$fundingType',
'$fundingAmount',
],
},
{
label: 'Applicant validations',
icon: 'Validation',
type: 'table',
dataSource: 'properties["GenericContent"]',
properties: [
{
label: 'Type',
dataIndex: 'type',
type: 'text',
},
{
label: 'View PDF',
link: {
dataIndex: 'pdfContent',
type: 'pdf',
},
},
],
},
'$backgroundChecks',
],
...
});
export default processConfig;

Attributes

To review the possible attributes please check the API Reference.