Skip to main content

Version: 21.11

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: Display key/value pairs in a grid container.
  • listStacked: Display key/value pairs in a scrollable container.
  • listExtended: A list custom card with color-coded values.
  • table: Display a Txn JSON array in a table layout.
  • tableExtended: A table custom 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.

  • hideEmptyFields 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.

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.

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, displays color-coded key/value pairs in a grid container.

info

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

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