Custom Cards

The customCards config defines the list of Custom cards that Workspaces displays on the Details screen in the Custom cards section.

Currently, Workspaces supports five custom card types:

• list
• listExtended
• listStacked
• table
• tableExtended

info

• A Custom card doesn't appear if there isn't any data available to display.
• A horizontal scrollbar appears if the content exceeds the width of the card.
• Custom cards support links in key-value pairs.

All custom cards have optional properties that allow fields/cards to be shown or hidden based on permissions and/or empty values.

• Use the hideEmptyFields boolean property to show/hide empty fields in custom cards.
• The permissions property configures whether custom cards are visible based on the current user's role or group.

Custom card types

List

The list Custom Card 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 Custom Card is used to display key/value pairs in a scrollable horizonal container.

Example - List Stacked custom card (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 Custom Card, used in conjunction with the statusColors config, allows the display of color coded key/value pairs in a grid container.

info

The statusColors config is used to map integration values to predefined colors.

Example - List Extended custom card (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 Custom Card 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. By using the dataSource, the table component will iterate (foreach) over the array and display the data in multiple rows.

Table Extended

The tableExtended Custom Card 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 structure similar to that of a table Custom Card. The difference is that the Table Extended Custom Card allows selection on the table; when a row is clicked, all data is passed to the sections config.

info

The Table Extended Custom Card was introduced to support multiple applicants but can be used with any data source as long as the structure is correct.

Example

The example below can be used as a reference data structure for a multi-applicant / multi-product scenario.

The Table Extended Custom Card in this example uses a Txn property called ApplicationDetails with the following structure.

JM Txn property - ApplicationDetails

[ 
   { 
      "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
   }
]

Now, we can configure our Table Extended Custom Card, using the Txn property called ApplicationDetails, as shown below.

Example - Table Extended custom card (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;

Attributes

The list of supported configuration attributes are available in Reference > CurrentSpaceCustomCards.

Example

The following example shows two ways to configure the customCards property.

• Using a global mapping string.
• Inserting the whole definition object without using any mappings.

Example - 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\"}]"
  }
}

Example - Global mappings config (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;

Example - CustomCards config (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;