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

Job Properties

Job properties are used the same way as Txn properties. They are supported across the app by views, key info cards, and custom cards.

To specify a Job property in the config, use the format:

job.properties[PROPERTY_NAME]

For example:

$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',
      },
    },
  ],
},

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 custom card tabs, custom cards, or fields within cards to control their visibility based on whether they contain data. When a tab, card, or field is empty (i.e., has no content or its value is null), the hideEmpty property determines whether it is hidden or displayed.

Behavior and Defaults

• Custom Card Tabs and Cards: By default, hideEmpty is true for tabs and cards when not explicitly defined. This means that if a tab or card is empty (i.e., all its cards or properties are empty), it will be hidden unless hideEmpty is explicitly set to false.
• Fields within Cards: By default, hideEmpty is false for fields within cards. Empty fields will be displayed unless hideEmpty: true is explicitly set at the card level or on specific fields.
• Precedence Rules:
  • If hideEmpty is set on a custom card tab and its cards, the tab-level configuration takes precedence. For example, if a tab has hideEmpty: true but a card within it has hideEmpty: false, the tab will remain visible as long as at least one card has hideEmpty: false.
  • To override default behavior, explicitly set hideEmpty: true or hideEmpty: false at each level (tab, card, or field) to ensure the intended visibility behavior.

info

Be intentional when configuring hideEmpty. If you want a tab or card to always be visible, even when empty, set hideEmpty: false explicitly. For fields within cards, you must set hideEmpty: true at the card level or on specific fields to hide them when empty.

Example: Configuring hideEmpty for a Custom Card Tab

The following example shows how to configure hideEmpty for a custom card tab. Note that the Applicants tab will be hidden if empty (default behavior), while the Review Checklist and Communications tabs are explicitly configured to hide when empty.

customCards: [
  {
    label: 'Applicants',
    properties: ['$applicants'],
    // No hideEmpty specified, defaults to true (hidden if empty)
  },
  {
    label: 'Review Checklist',
    properties: ['$reviewChecklist'],
    hideEmpty: true,
    rules: [
      {
        dataIndex: 'userLoginName',
        value: currentUser,
      },
    ],
  },
  {
    label: 'Communications',
    properties: ['$sentEmails'],
    hideEmpty: true,
  },
  {
    label: 'Validations',
    properties: ['$applicantValidations'],
    hideEmpty: false, // Always show this tab, even if empty
  },
  {
    label: 'Documents Checklist',
    properties: ['$docsList'],
    // No hideEmpty specified, defaults to true (hidden if empty)
  },
]

Tooltip

Adding the tooltip property to a mapping will show an info icon next to the value, and will display the data of the dataIndex specified. This applies to the table on the Listing Screen and the key info card sections only.

$product: {
  label: 'Product',
  icon: 'WorkOutlineOutlined',
  tooltip: {
    dataIndex: "properties['AllProducts']",
  },
  type: 'text',
  sorter: false,
  filter: {
    type: 'input',
  },
},

Hide From Table

Sometimes, you might want to make a field available for filtering but not display it on the List screen table. You can achieve this by adding the hideFromTable property, with the appropriate filter configurations, to a field mapping.

$receiptStatus: {
  label: 'Receipt Status',
  dataIndex: 'receiptStatus',
  type: 'text',
  sorter: false,
  hideFromTable: true,      
  filter: {
    type: 'select',
    options: ['Ready', 'In Progress', 'Completed', 'Error', 'Error - No Data' ]
  }
}, 

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'],
  },
• progress: Displays a progress bar based on the transaction's currentStep property and the steps configuration from CurrentSpace by default. The progress is calculated as the position of currentStep within the steps array. If a dataIndex is provided, it should reference a numeric value from 0 to 100, representing the progress percentage directly. For example:

  $progress: {
    label: 'Progress',
    icon: 'ProgressBar',
    type: 'progress',
    // Optional: use dataIndex for direct percentage
    dataIndex: ['progressPercentage'], // Expects a number from 0 to 100
    ...
  },

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.
• tree: Display an tree structure with hierarchically arranged boxes (like an org chart).

Filter

The filter property adds a filter for this mapping into the table filters on the main listing table. The value determines what kind of filter it will be. Check the filter reference for options.

Permissions

The permissions property adds a role- or group-based restriction to a mapping that controls who is allowed to see the data or UI elements related to that mapping; for example, who can see a particular column in a table. To learn more, see Configuration > Current space configuration > Permissions.

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: [
        ...
      ],
    },

TranslateKey

You can provide a custom namespace for translations used in the translation file. See here for more information.

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