Version: 25.04

Views

The views property defines a group of table configurations to display on the List screen. Views are pre-configured groups of properties that specify which criteria are included in the Txn query (sort and filters). Each view defaults to list view but can be configured to support grid view using the grid property.

View Types

List View: The default display mode, presenting data in a tabular format with rows and columns.
Grid View: An optional display mode that presents data in a card-based grid layout, configurable via the grid property.

Configuration Details

List View

List view is the default display mode for all views unless the grid property is configured. It organizes data in a table with customizable columns, sorting, and filtering options.

Properties:
- label: A concise name for the view (recommended 20-25 characters to avoid truncation).
- properties: An array of field names to display as columns (e.g., ["$assigned", "$appId"]).
- sortBy: The field to sort by (e.g., $appAge).
- sortOrder: The sort direction (asc or desc).
- filters: An array of filter criteria applied to the Txn query (e.g., [{ field: "$status", value: "active" }]).
- expandedInfo: Optional field for additional details (e.g., $applicantInfo).

Recommendations

Filter Compatibility: When filtering on multiple submission properties, ensure the parent mapping attribute's filter is defined as multiselect to support multiple selections.
Label Length: Limit view labels to 20-25 characters to avoid formatting issues. Longer labels may be truncated in the UI.
Avoid Duplication: Do not duplicate properties across views, as this may lead to unexpected query results or UI rendering issues.
Grid View Usage: Use grid view for visual summaries (e.g., key metrics like $progress or $primaryName). Ensure properties in grid are a subset of or compatible with the view’s properties.
Responsive Design: Test the itemsLength setting in grid view to ensure it adapts to different screen sizes. Values between 3 and 5 are typically optimal.
Default Behavior: If the grid property is omitted, the view defaults to list view.

Properties

Property	Description
`grid`	`object` (CurrentSpaceViewGrid) Enables grid view to display data as a collection of cards. Includes `type` (set to `"card"`), `properties` (array of fields to display on each card), and `itemsLength` (number of cards per row, defaults to 3). To learn more, see grid.
`expandedInfo`	`string` (CurrentSpaceViewExpandedInfo) Display a custom card inside an expandable table row on the List screen. To learn more, see expandedInfo.
`readOnly`	`boolean` (CurrentSpaceReadOnly) Determines whether nested table rows on the List screen are clickable. To learn more, see readOnly.

For a full list of supported properties, see API Reference.

grid

The grid property is used to display data as a collection of cards, suitable for visual or summarized data representations. Enable grid view by including the grid property with type: "card".

Grid Property Configuration:
- type: Set to "card" to enable grid view.
- properties: An array of fields to display on each card (e.g., ["$progress", "$primaryName"]).
- itemsLength: Number of cards to display per row (e.g., 5). Defaults to 3 if not specified.
- avatar: Optional configuration to display user avatars on cards.
  - dataIndex: Specifies the field containing the identifier for avatar generation.
  - The avatar displays initials based on the dataIndex value:
    - Email addresses: Shows the first two letters of the email (e.g., "[email protected]" → "jo")
    - Multiple words with spaces: Shows the first letter of the first two words (e.g., "John Doe" → "JD")
    - Single word or other formats: Shows the first initials available
  - The avatar appears in the top right corner of each card, providing a visual identifier for the associated user or assignee.

The following example demonstrates how to use grid with avatar functionality.

{
  views: [
    {
      label: "All Outstanding",
      properties: [
        "$assigned",
        "$appId",
        "$primaryName",
        "$SSN",
        "$product",
        "$appAge",
        "$taskId",
        "$currentQueue",
        "$currentTask",
        "$formLastModified"
      ],
      sortBy: "$appAge",
      sortOrder: "desc",
      grid: {
        type: "card",
        avatar: {
          dataIndex: "userLoginName"
        },
        properties: ["$progress", "$assigned", "$primaryName", "$product", "$taskSla"],
        itemsLength: 5
      }
    }
  ]
}

expandedInfo

The expandedInfo property is used to display nested information in a custom card inside expandable table rows on the List screen. The property value is a single mapping specified in the global config. The mapping must have type: 'table' or type: 'list'.

The following example demonstrates how to use expandedInfo, where $applicantValidation is an apporpriate mapping defined in the global config.

views: [
    {
        label: 'All Outstanding',
        properties: ['$appId', '$appStatus', '$appCreated', '$primaryName', '$assigned', '$product'],
        sortOrder: 'asc',
        sortBy: '$assigned',
        expandedInfo: '$applicantValidation'
    },
],

readOnly

readOnly is a boolean property that controls whether nested table rows on the List screen are clickable. When a clickable row is clicked, Workspaces navigates to the Details screen showing the first txn from the nested table. If readOnly is false, nested table rows will be clickable. Set readOnly to true to make nested table rows non-clickable.

Add readOnly to a mapping that is used in the views configuration as the value of the expandedInfo property. The mapping must have type: 'table'.

info

On mobile layout, readonly has no effect. Selecting a row in the item list opens a sidesheet that shows the parent row details for the item list along with a sub-table that contains the sub-tasks within the application. Tapping the Go To Detail Screen button navigates to the application's first transaction. Alternatively, tapping any individual transaction displayed under the Transactions table navigates to the selected transaction on the Details screen.

The following example demonstrates how to use readOnly to configure non-clickable rows on a mapping that's used to enable nested information on the List screen.

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

Example

The following example shows how to configure views with default sort and filter criteria.

Txn properties
{
  "formName": "DAO - Manual Review",
  "formUrl": "http://localhost:3000",
  "formStatus": "Assigned",
  "trackingCode": "AWQAVZA",
  "groupName": " Manual Review",
  "formDataMap": {
    "PrimaryName": "Dali Mohamed"
  },
  "job": {
    "currentAction": "Handle Submission",
    "currentStep": "Fraud Review",
    "jobRefNumber": "4629QWP",
    "jobKey": "17c25feaa1a48565aabc6f0ab0be3839",
    "name": "Deposit Account Opening",
    "status": "In Progress",
    "timeCreated": "2019-03-15T08:55:14+11:00",
    "timeLastModified": "2019-03-15T15:57:36+11:00"
  },
  "comments": [],
  "fileAttachments": [],
  "receiptUrl": null,
  "submitKey": "toxcb11a30812257de476a0abd3575f8",
  "timeCreated": "2019-03-29T13:41:20+11:00",
  "availableActions": ["assign"],
  "timeUserLastModified": "2019-03-29T15:40:35+11:00",
  "userLoginName": "[email protected]"
}

src/configs/custom/global.ts
import { ConfigGlobal } from '@transact-open-ux/workspaces/dist/types';

export const globalConfig = ({ date }: any): ConfigGlobal => ({
  ...
  mappings: {
    $primaryName: {
      label: 'Name',
      dataIndex: ['properties["PrimaryName"]', 'formDataMap["PrimaryName"]'],
      type: 'text',
      filter: {
        type: 'input',
      },
    },
    $assigned: {
      label: 'Assigned to',
      icon: 'Assignee',
      dataIndex: 'userLoginName',
      type: 'text',
      sorter: true,
      filter: {
        type: 'multiselect',
        options: ['[email protected]', '[email protected]']
      },
    },
    $product: {
      label: 'Product',
      dataIndex: ['job.name', 'formName'],
      type: 'text',
      filter: {
        type: 'select',
        options: [
          'DAO - Manual Review',
          'Review of deposit account opening',
          'Review of loan application',
        ],
      },
    },
    $appId: {
      label: 'App ID',
      icon: 'AppId',
      dataIndex: ['job.jobRefNumber', 'trackingCode'],
      type: 'text',
      filter: {
        type: 'input',
      },
    },
    $appStatus: {
      label: 'App status',
      icon: 'AppStatus',
      dataIndex: 'job.status',
      type: 'text',
      sorter: true,
      filter: {
        type: 'multiselect',
        options: ['Saved', 'Opened', 'Abandoned'],
      },
    },
    $appCreated: {
      label: 'App created',
      icon: 'AppCreated',
      dataIndex: 'job.timeCreated',
      type: 'date',
      format: 'relative',
      sorter: true,
    },
  },
  ...
});

export default globalConfig;

src/configs/custom/process.ts
import { ConfigCurrentSpace } from '@transact-open-ux/workspaces/dist/types';

export const processConfig = ({ date }: any): ConfigCurrentSpace => ({
  ...
  views: [
    ...
    {
      label: 'All Outstanding',
      properties: [
        '$appId',
        '$appStatus',
        '$appCreated',
        '$primaryName',
        '$assigned',
        '$product',
      ],
      sortOrder: 'asc',
      sortBy: '$assigned',
    },
    {
      label: 'Opened last week',
      groupNames: ['Manual Review'],
      properties: [
        '$appId',
        '$appStatus',
        '$appCreated',
        '$primaryName',
        '$assigned',
        '$product',
      ],
      filterBy: {
        $product: 'All',
        $appStatus: ['Opened', 'None'],
        $appCreated: [date('1 week ago'), date('today')]
      },
      sortBy: '$appCreated',
      permissions: {
        type: 'group',
        value: ['Fraud Review'],
      },
    },
    ...
  ],
  ...
});

export default processConfig;

note

Don't specify an array for filterBy value attributes unless the filter type supports multiple values like multiselect or daterangepicker.

Views

View Types

Configuration Details

List View

Recommendations

Properties

grid

expandedInfo

readOnly

info

Example

note

In this topic

Need More Help?

View Types​

Configuration Details​

List View​

Recommendations​

Properties​

grid​

expandedInfo​

readOnly​

info

Example​

note

In this topic

Need More Help?

View Types

Configuration Details

List View

Recommendations

Properties

grid

expandedInfo

readOnly

Example