Skip to main content

Version: 19.11 (EOL)

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.

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

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

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
{
      "label": "Applicants",
      "icon": "PermIdentityTwoTone",
      "type": "tableExtended",
      "dataSource": "properties['ApplicationDetails']",
      "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"
                  }
               }
            ]
         }
      ]
   }
]

Attributes​

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

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
{
  "mappings": {
    "$applicants": {
      "label": "Applicants",
      "icon": "PermIdentityTwoTone",
      "type": "tableExtended",
      "dataSource": "properties['ApplicantsData']",
      "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"
            }
          ]
        }
      ]
    }
  }
}
Example - CustomCards config
{
  "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",
  ]
}