List View with Advanced Column Configuration

Description

This screen demonstrates a sophisticated list view with multiple column rendering types and advanced features. The Customer List screen showcases how to display entity data in a tabular format with various column types including text, dates, enum tags with colors, calculated fields, and linked navigation. It uses a custom query for data retrieval and supports complex field expressions for dynamic value computation. This pattern is ideal for creating rich, interactive data grids with visual indicators and navigation capabilities.

Use Case

Used in a CRM system to display a comprehensive customer list with visual indicators for loyalty levels, attention flags, and membership status. Staff can quickly scan customer information, see color-coded statuses, and navigate to detailed customer profiles through clickable CRN links.

Key Features

• Custom query for optimized data retrieval
• Clickable links for navigation to detail views
• Calculated/concatenated field values using expressions
• Enum tags with custom color coding
• Date formatting with time control
• Nested property access for related data
• Array mapping for complex data transformations
• Visual status indicators using color-coded tags

JSON Definition

{
  "head": {
    "title": "Customer list",
    "key": "customer_list",
    "route": "customer-list",
    "app": "crm",
    "description": "test"
  },
  "screenType": "listView",
  "listQuery": "getcustomerlist",
  "columnsConfiguration": [
    {
      "field": "crn",
      "label": "CRN",
      "value": "{{crn}}",
      "renderAs": "Text",
      "options": {
        "linkProp": "/crm/customer-profile/{{id}}"
      }
    },
    {
      "label": "Fullname",
      "field": "fullname",
      "renderAs": "Text",
      "value": "{{name +  ' '  + last_name}}"
    },
    {
      "field": "phone",
      "label": "Phone",
      "value": "{{phone}}",
      "renderAs": "Text"
    },
    {
      "field": "dob",
      "label": "DOB",
      "value": "{{dob}}",
      "renderAs": "Date",
      "options": {
        "noTime": true
      }
    },
    {
      "field": "email_address",
      "label": "Email address",
      "value": "{{email_address}}",
      "renderAs": "Text"
    },
    {
      "field": "suburb",
      "label": "Suburb",
      "value": "{{suburb ? suburb + ',' + state : ''}}",
      "renderAs": "Text"
    },
    {
      "label": "Donor loyalty",
      "field": "donor_loyalty",
      "renderAs": "Text",
      "value": "{{donor_loyalty}}"
    },
    {
      "field": "gos_level",
      "label": "GOS level",
      "value": "{{gos_level}}",
      "renderAs": "EnumTags",
      "options": {
        "enumColor": {
          "Bronze": "orange",
          "Silver": "grey",
          "Gold": "gold",
          "Platinum": "grey",
          "Custodian": "cyan",
          "WA Beach Champion": "blue"
        }
      }
    },
    {
      "label": "Lottery loyalty",
      "field": "lottery_loyalty",
      "renderAs": "Text",
      "value": "{{lottery_loyalty}}"
    },
    {
      "field": "is_champion_club_member",
      "label": "Champion club",
      "value": "{{is_champion_club_member}}",
      "renderAs": "EnumTags",
      "options": {
        "enumColor": {
          "true": "gold"
        }
      }
    },
    {
      "label": "Attention flags",
      "field": "attention_flags",
      "renderAs": "EnumTags",
      "value": "{{customer_attention_flags.map(item=>item.attention_flag.flag)}}",
      "options": {
        "enumColor": {
          "Deceased": "red",
          "Bequestor": "blue"
        }
      }
    },
    {
      "field": "last_activity",
      "label": "Last activity",
      "value": "{{last_activity}}",
      "renderAs": "Text"
    },
    {
      "field": "last_activity_dt",
      "label": "Last activity date",
      "value": "{{last_activity_dt}}",
      "renderAs": "Date",
      "options": {
        "noTime": true
      }
    }
  ]
}

Notes

• The linkProp option creates clickable navigation to detail views
• Expression syntax {{}} allows complex field calculations and concatenations
• The map function can transform arrays within the value expression
• EnumTags renderer provides visual distinction with custom colors
• Conditional expressions can handle null/undefined values gracefully
• The noTime option on Date fields displays only the date portion
• Custom queries enable optimized data fetching with joins and aggregations