Custom Cards

The customCards property defines the set of cards that Workspaces displays on the Details screen in the Custom Cards section. Workspaces supports five custom card types:

• list
• listStacked
• listExtended
• table
• tableExtended

All custom cards have have optional properties that allow architects to hide fields or cards based on empty values or permissions.

• hideEmpty is a property that shows or hides empty fields in a card (based on the boolean value).
• permissions can be configured to show or hide cards based on the current user role or group.

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.

info

The custom card config can be added as a mapping from the global config, or inline as an object into the customCards array. Check the example below for more information.

Example space config

import { ConfigCurrentSpace } from '@transact-open-ux/workspaces/dist/types';

export const processConfig = ({ date }: any): ConfigCurrentSpace => ({
  ...
  customCards: ['$customCard', '$txnProperties'],
  ...
});

export default processConfig;

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["ApplicantsData"]',
      hideEmpty: 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 list of supported attributes, see API Reference.