Mappings

Mapping is the process of defining how a Txn and the properties it contains are read, sorted, filtered and rendered. Mappings are used to define various configurations including:

• a property label
• the value of the dataIndex property
• which properties should be treated as text, date, or number
• the format of values
• custom rules to control filtering and sorting

Initial transaction properties

The initial transaction's properties can be used to configure the Details screen. Initial properties are supported by key info cards and custom cards.

To get a value from a property in the initial transaction, use the format:

initial.properties[PROPERTY_NAME]

For example:

$completedMessages: {
  label: 'Completed Actions',
  icon: 'priority',
  type: 'table',
  hideEmpty: true,
  dataSource: ["initial.properties['CompletedMessages']"],
  properties: [
    {
      label: 'Date',
      dataIndex: 'date',
      type: 'date',
    },
    {
      label: 'Message',
      dataIndex: 'message',
      type: 'text',
    },
  ],
},

Hide Empty

The hideEmpty property can be added to any custom card or custom card tab configuration to hide values that are not available or null. If the entire custom card or all the custom cards in a custom card tab are empty, then the whole card or tab will be hidden as well.

info

If hideEmpty is added to the configuration of a custom card tab as well as the custom cards within the tab, then the custom card tab definition takes precedence.

The following example demonstrates how to configure hideEmpty for a custom card tab.

  customCards: [
    {
      label: 'Applicants',
      properties: ['$applicants'],
    },
    {
      label: 'Review Checklist',
      properties: ['$reviewChecklist'],
      hideEmpty: true,
      rules: [
        {
          dataIndex: 'userLoginName',
          value: currentUser,
        },
      ],
    },
    {
      label: 'Communications',
      properties: ['$sentEmails'],
      hideEmpty: true,
    },
    {
      label: 'Validations',
      properties: ['$applicantValidations'],
    },
    {
      label: 'Documents Checklist',
      properties: ['$docsList'],
    },
  ],

The following example demonstrates how to configure hideEmpty for a custom card.

  $completedMessages: {
    label: 'Completed Actions',
    icon: 'priority',
    type: 'table',
    hideEmpty: true,
    dataSource: ["initial.properties['CompletedMessages']"],
    properties: [
      {
        label: 'Date',
        dataIndex: 'date',
        type: 'date',
      },
      {
        label: 'Message',
        dataIndex: 'message',
        type: 'text',
      },
    ],
  },

Type

The type property on a mapping determines how data is displayed, including formatting. Some type values relate to a single-value data item, while others specify a type of custom card.

Single-value data types

The following type values relate to single-value data items.

• text: A plain text value.
• number: A numeric value, sometimes displayed with a graphic element.
• date: A date value using the date format from the current locale by default. You can change how a date appears, showing both date and time, by adding the format: 'datetime' attribute. For example:

  $formLastModified: {
    label: 'Last modified 3',
    icon: 'LastModified',
    dataIndex: ['timeUserLastModified'],
    type: 'date',
    format: 'datetime',
    ...
  },  
• alert: Used to configure a service-level agreement (SLA). To learn more, see Service-level agreement. You can display color-coded values using the statusColors attribute. For example:

  type: 'alert',
  statusColors: {
    Black: ['HARDFAIL'],
    LightGreen: ['LOW'],
    Green: ['VERIFIED', 'PASSED', 'ACCEPT', 'APPROVE', 'TRUSTED', 'PASS'],
    Red: ['FAILED', 'DECLINE', 'HIGH', 'FAIL'],
    Blue: ['REVIEW', 'NEUTRAL', 'UNVERIFIED'],
    Orange: ['INSUFFICIENT', 'MEDIUM'],
  },

Custom card types

The following type values specify that the mapping is a custom card and determine what type of custom card is displayed.

• 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.
• iframe: Display an iframe in a custom card embedded in the Details screen.

Highlight

Adding the highlight property on a mapping makes visual changes to the data to help it stand out.

Property	Description
'bold'	Sets the data to be displayed as bold. Only accepts the string 'bold' as a value.
{}	Accepts the same object as statusColors where you can map a number of colors to single or multiple values.

Example

    // Custom Card Mapping
    $applicants: {
      label: 'Applicants',
      icon: 'PermIdentityTwoTone',
      type: 'tableExtended',
      dataSource: ["job.properties['ApplicationDetails']", "properties['ApplicationDetails']"],
      properties: [
        {
          label: 'Status',
          dataIndex: "profile['checkStatus']",
          type: 'alert',
        },
        {
          label: 'Name',
          dataIndex: "profile['name']",
          type: 'text',
          highlight: 'bold',
        },
        {
          label: 'Email',
          dataIndex: "profile['email']",
          type: 'text',
          highlight: {
            LightGreen: ['[email protected]'],
            Blue: ['[email protected]'],
          },
        },
      ],
      sections: [
        ...
      ],
    },

Example

src/configs/custom/global.ts

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

export const globalConfig = ({ date }: any): ConfigGlobal => ({
  ...
  mappings: {
    $primaryName: {
      label: 'Primary applicant',
      icon: 'PersonOutlineOutlined',
      dataIndex: ["properties['PrimaryName']", "formDataMap['PrimaryName']"],
      type: 'text',
      sorter: false,
      filter: {
        type: 'input',
      },
    },
    $appId: {
      label: 'App ID',
      icon: 'FontDownloadOutlined',
      dataIndex: ['job.jobRefNumber', 'trackingCode'],
      type: 'text',
      sorter: false,
      filter: {
        type: 'input',
      },
    },
    $taskId: {
      label: 'Task ID',
      icon: 'FontDownloadOutlined',
      dataIndex: 'trackingCode',
      type: 'text',
      sorter: false,
    },
    $product: {
      label: 'Product',
      icon: 'WorkOutlineOutlined',
      dataIndex: ['job.name', 'formName'],
      type: 'text',
      tooltip: {
        dataIndex: "properties['AllProducts']",
      },
      sorter: false,
      filter: {
        type: 'input',
      },
    },
    $backgroundCheckStatus: {
      label: 'Background Checks Status',
      icon: 'CheckRounded',
      dataIndex: ["properties['IntegrationsReview']"],
      type: 'text',
      sorter: false,
      filter: {
        type: 'input',
      },
    },
    $taskSla: {
      label: 'SLA',
      dataIndex: "properties['taskSla']",
      type: 'alert',
      warning: '1 week',
    },
    $slaDate: {
      label: 'SLA Expiry',
      icon: 'EventOutlined',
      dataIndex: "properties['taskSla']",
      type: 'date',
      format: 'relative',
      sorter: false,
    },
    $currentQueue: {
      label: 'Current queue',
      icon: 'FlagOutlined',
      dataIndex: 'groupName',
      type: 'text',
      sorter: true,
      filter: {
        type: 'multiselect',
        options: ['Error Review', 'Fraud Review', 'Manual Review'],
      },
    },

    $appAge: {
      label: 'App age',
      icon: 'EventOutlined',
      dataIndex: 'job.timeCreated',
      type: 'date',
      format: 'relative',
      sorter: true,
      filter: {
        type: 'daterangepicker',
        options: {
          minDate: date('1 month ago'),
          maxDate: date('now'),
        },
      },
    },
    $assigned: {
      label: 'Assigned to',
      icon: 'AccountCircleOutlined',
      dataIndex: 'userLoginName',
      type: 'text',
      sorter: true,
      filter: {
        type: 'input',
      },
    },
    $currentStep: {
      label: 'Current Step',
      icon: 'TaskID',
      dataIndex: 'job.currentStep',
      type: 'text',
      sorter: false,
    },
    $currentTask: {
      label: 'Current task',
      icon: 'TaskID',
      dataIndex: 'formName',
      type: 'text',
      sorter: false,
    },
    $taskCreated: {
      label: 'Task Created',
      icon: 'TaskCreated',
      dataIndex: 'timeCreated',
      type: 'date',
      format: 'relative',
      sorter: true,
      filter: {
        type: 'daterangepicker',
        options: {
          minDate: date('1 month ago'),
          maxDate: date('now'),
        },
      },
    },
    $appLastModified: {
      label: 'Last modified',
      icon: 'LastModified',
      dataIndex: 'job.timeLastModified',
      type: 'date',
      sorter: false,
      filter: {
        type: 'daterangepicker',
        options: {
          minDate: date('1 month ago'),
          maxDate: date('now'),
        },
      },
    },
    $formLastModified: {
      label: 'Last modified',
      icon: 'LastModified',
      dataIndex: ['timeUserLastModified'],
      type: 'date',
      sorter: true,
      filter: {
        type: 'daterangepicker',
        options: {
          minDate: date('1 month ago'),
          maxDate: date('now'),
        },
      },
    },
    $appStatus: {
      label: 'App status',
      icon: 'AppStatus',
      dataIndex: ['job.status', 'formStatus'],
      type: 'text',
      sorter: false,
    },
    $taskStatus: {
      label: 'Task Status',
      icon: 'TaskStatus',
      dataIndex: 'formStatus',
      type: 'text',
      sorter: true,
      filter: {
        type: 'multiselect',
        options: ['Assigned', 'Opened', 'Saved', 'Completed', 'Abandoned'],
      },
    },
    $dateOfBirth: {
      label: 'Date of birth',
      dataIndex: ["properties['PrimaryDOB']", "formDataMap['PrimaryDOB']"],
      type: 'text',
      sorter: false,
      filter: {
        type: 'input',
      },
    },
    $SSN: {
      label: 'SSN',
      dataIndex: ["properties['PrimarySSN']", "formDataMap['PrimarySSN']"],
      type: 'text',
      sorter: false,
      filter: {
        type: 'input',
      },
    },
    $email: {
      label: 'Email',
      dataIndex: ["properties['PrimaryEmail']", "formDataMap['PrimaryEmail']"],
      type: 'text',
      sorter: false,
      filter: {
        type: 'input',
      },
    },
    $phone: {
      label: 'Phone #',
      dataIndex: ["properties['PrimaryPhone']", "formDataMap['PrimaryPhone']"],
      type: 'text',
      sorter: false,
      filter: {
        type: 'input',
      },
    },
    $appSubmitted: {
      label: 'App submitted',
      dataIndex: 'job.timeCreated',
      type: 'date',
      sorter: true,
      filter: {
        type: 'daterangepicker',
        options: {
          minDate: date('1 month ago'),
          maxDate: date('now'),
        },
      },
    },
    $appCreated: {
      label: 'App created',
      dataIndex: 'timeCreated',
      type: 'date',
      sorter: true,
      filter: {
        type: 'daterangepicker',
        options: {
          minDate: date('1 month ago'),
          maxDate: date('now'),
        },
      },
    },
    $formStatus: {
      label: 'Form status',
      icon: 'TaskStatus',
      dataIndex: 'formStatus',
      type: 'text',
      sorter: true,
      filter: {
        type: 'multiselect',
        options: ['Assigned', 'Opened', 'Saved', 'Completed', 'Abandoned'],
      },
    },

    $applicants: {
      label: 'Applicants',
      icon: 'PermIdentityTwoTone',
      type: 'tableExtended',
      hideEmpty: true,
      dataSource: ["job.properties['ApplicationDetails']", "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',
                  },
                },
              ],
            },
          ],
        },
      ],
    },
    $sentEmails: {
      label: 'Sent emails',
      icon: 'InfoTwoTone',
      type: 'table',
      dataSource: ["job.properties['EmailList']", "properties['EmailList']"],
      properties: [
        {
          label: 'Date sent',
          dataIndex: 'dateAttempted',
          type: 'date',
        },
        {
          label: 'Info',
          dataIndex: 'name',
          type: 'text',
        },
        {
          label: 'Delivery status',
          dataIndex: 'emailSent',
          type: 'text',
        },
        {
          label: 'Follow up',
          dataIndex: 'followUp',
          type: 'text',
        },
        {
          label: 'Sent mail',
          type: 'text',
          link: {
            dataIndex: 'emailContent',
            type: 'html',
            encoding: 'base64',
          },
        },
        {
          label: 'Resend',
          link: {
            dataIndex: 'name',
            type: 'invoke',
            serviceName: 'DAO - Resend Email',
            versionNumber: '0.1.0',
          },
        },
      ],
    },
    $applicantValidations: {
      label: 'Applicant validations',
      icon: 'InfoTwoTone',
      type: 'table',
      dataSource: "properties['GenericContent']",
      properties: [
        {
          label: 'Type',
          dataIndex: 'type',
          type: 'text',
        },
        {
          label: 'View JSON',
          type: 'text',
          link: {
            dataIndex: 'jsonContent',
            type: 'json',
            encoding: 'base64',
          },
        },
        {
          label: 'View XML',
          type: 'text',
          link: {
            dataIndex: 'xmlContent',
            type: 'xml',
            encoding: 'base64',
          },
        },
        {
          label: 'View HTML',
          type: 'text',
          link: {
            dataIndex: 'htmlContent',
            type: 'html',
            encoding: 'base64',
          },
        },
        {
          label: 'View PDF',
          link: {
            dataIndex: 'pdfContent',
            type: 'pdf',
          },
        },
      ],
    },
    $reviewChecklist: {
      label: 'Review Checklist',
      type: 'listExtended',
      icon: 'BallotOutlined',
      statusColors: {
        Green: ['Reviewed'],
        Blue: ['Pending'],
        Red: ['To do'],
      },
      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',
          fullWidth: true,
        },
      ],
    },
    $docsList: {
      label: 'Selected Products',
      icon: 'InfoTwoTone',
      type: 'tableExtended',
      dataSource: 'invoke.products',
      hideEmpty: true,
      properties: [
        {
          label: 'Application Type',
          dataIndex: 'applicationType',
          type: 'text',
        },
        {
          label: 'Status',
          dataIndex: 'status',
          type: 'alert',
        },
        {
          label: 'Trust',
          dataIndex: 'turst',
          type: 'text',
        },
        {
          label: 'Super Saver',
          dataIndex: 'superSaver',
          type: 'text',
        },
        {
          label: 'Standard Checking',
          dataIndex: 'standardChecking',
          type: 'text',
        },
      ],
      sections: [
        {
          label: 'Required Documents',
          type: 'table',
          dataSource: 'documents',
          properties: [
            {
              label: 'Name',
              dataIndex: 'name',
              type: 'text',
            },
            {
              label: 'Required',
              dataIndex: 'required',
              type: 'text',
            },
            {
              label: 'Available',
              dataIndex: 'available',
              type: 'text',
            },
          ],
        },
      ],
    },
    $customerMessage: {
      label: 'Information Requested',
      icon: 'priority',
      type: 'table',
      hideEmpty: true,
      dataSource: ["initial.properties['CustomerMessage']"],
      properties: [
        {
          label: 'New',
          dataIndex: 'status',
          type: 'alert',
        },

        {
          label: 'Date',
          dataIndex: 'date',
          type: 'date',
        },
        {
          label: 'Message',
          dataIndex: 'message',
          type: 'text',
        },

        {
          label: 'Complete',
          type: 'text',
          link: {
            dataIndex: 'id',
            type: 'invoke',
            serviceName: 'DAO - Mark as Read',
            versionNumber: '0.1.0',
          },
        },
      ],
    },
    $completedMessages: {
      label: 'Completed Actions',
      icon: 'priority',
      type: 'table',
      hideEmpty: true,
      dataSource: ["initial.properties['CompletedMessages']"],
      properties: [
        {
          label: 'Date',
          dataIndex: 'date',
          type: 'date',
        },
        {
          label: 'Message',
          dataIndex: 'message',
          type: 'text',
        },
      ],
    },
    $processCustomerMessage: {
      label: 'Information Requested',
      icon: 'priority',
      type: 'table',
      hideEmpty: true,
      dataSource: ["initial.properties['CustomerMessage']"],
      properties: [
        {
          label: 'New',
          dataIndex: 'status',
          type: 'alert',
        },

        {
          label: 'Date',
          dataIndex: 'date',
          type: 'date',
        },
        {
          label: 'Message',
          dataIndex: 'message',
          type: 'text',
        },
      ],
    },
    $risk: {
      label: 'Risk',
      icon: 'InfoTwoTone',
      type: 'list',
      hideEmpty: false,
      properties: [
        {
          label: 'Risk Rating',
          dataIndex: [
            "job.properties['ThreatMetrixRiskRating.PrimaryApplicant']",
            "properties['ThreatMetrixRiskRating.PrimaryApplicant']",
          ],
          type: 'text',
          link: {
            dataIndex: [
              "job.properties['TINCheckSOAPReponse.Primary.result']",
              "properties['TINCheckSOAPReponse.Primary.result']",
            ],
            type: 'xml',
          },
        },
      ],
    },
  },
});

export default globalConfig;

Attributes

To review the list of supported attributes, see API Reference.