Valtimo documentation
  • Welcome to Valtimo
  • Fundamentals
    • â„šī¸What is Valtimo
    • đŸ™ī¸Architectural overview
      • Choosing the right setup
      • âš™ī¸Available modules
    • Process Exchange
      • Process blueprints
      • Building blocks
    • 📖How to use this documentation
    • đŸ–ąī¸Getting started
      • Configuring the database
      • Modules
        • Core modules
          • Audit
          • Authorization
          • Camunda
          • Case
          • Connector
          • Contract
          • Core
          • Dashboard
          • Document
          • Document generation
          • Exporter
          • Form
          • Form flow
          • Form flow Valtimo
          • Importer
          • Localization
          • Local document generation
          • Local mail
          • Mail
          • Mandrill
          • Milestones
          • Plugins
          • Outbox
            • Outbox RabbitMQ
          • Process document
          • Resource
          • Temporary resource storage
          • Test utils common
          • Value resolvers
          • Valtimo dependencies
          • Valtimo dependency versions
          • Web
            • CORS
        • GZAC modules
          • Besluit
          • Besluiten API
          • Catalogi API
          • Contactmoment
          • Documenten API
          • Haalcentraal BRP
          • Klant
          • Notificaties API
          • Notificaties API Authentication
          • Objecten API
          • Objecten API Authentication
          • Object management
          • Objects API
          • Objecttypen API
          • OpenZaak
          • OpenZaak Plugin Authentication
          • OpenZaak resource
          • Portaaltaak
          • SmartDocuments
          • Valtimo GZAC dependencies
          • Verzoek
          • Wordpress mail
          • Zaken API
      • Compatibility matrix
  • Features
    • 🔏Access control
      • Configurable elements
      • Configuring roles
      • Configuring permissions
      • Configuring conditions
      • Configuring context conditions
      • For developers
        • Front-end access control
        • Creating a resource
        • Creating a relation to another resource
        • Running custom code without access control
    • đŸ—ƒī¸Case
      • Configuration
      • Document definition
      • List
      • Notes
      • Processes
      • Search fields
      • Statuses
      • Tabs
      • Tags
      • Widgets
        • Fields widget
        • Custom component widget
        • Form.io widget
        • Table widget
        • Collection widget
      • For developers
        • Search fields API
        • Case list tab order
        • Custom case list columns
        • Custom case tabs
        • Case migration
        • Custom case headers
        • Register Angular component
    • 📊Dashboard
      • Widget data sources
      • Widget display types
      • For developers
        • Custom dashboards
        • Custom data sources
        • Custom display types
        • Widget translations
    • 📋Forms
      • Creating FormIO forms in Valtimo
      • Interpolating data in Form.io
      • Configuring an Objecten API object form
      • For developers
        • Form field data resolver
    • 🔀Form flow
      • Creating a form flow definition
      • For developers
        • Custom form flow component
        • Whitelisting Spring beans for Form flow
    • 🌍Localization
      • For developers
    • Logging
      • For developers
    • âœ‰ī¸Outbox
      • For developers
    • 🔌Plugins
      • Configuring plugins
      • SmartDocuments plugin
      • Exact Plugin
      • For developers
        • Custom plugin definitions
    • ⭕Process
      • System processes
      • Correlating messages
      • Job service
      • For developers
        • Integrating spring beans in a process
        • Whitelisting Spring beans for Camunda
    • 🔗Process links
      • Creating a process link
      • Editing a process link
      • Unlinking a process link
    • ✅Tasks
      • Task list columns
    • đŸ”ĸValue resolvers
      • For developers
    • 📃ZGW
      • Documents
        • Access control
        • Uploading to Documenten API with metadata
      • Creating extra case tabs for Zaakobjects
      • ZGW plugins
        • Besluiten Plugin
        • Catalogi API plugin
        • Documenten API plugin
        • Object Token Auhentication Plugin
        • Objecten API Plugin
        • Objecttypen API Plugin
        • Open Zaak plugin
        • Portaaltaak Plugin
        • Verzoek Plugin
        • Zaken API plugin
  • Release notes
    • Release notes
    • 12.x.x
      • 12.0.0
        • Valtimo backend libraries
        • Valtimo frontend libraries
        • Migration
          • Spring Boot 3
      • 12.1.0
      • 12.2.0
      • 12.3.0
        • 12.3.1
      • 12.4.0
        • 12.4.1
      • 12.5.0
      • 12.6.0
        • 12.6.1
      • 12.7.0
        • 12.7.1
        • 12.7.2
      • 12.8.0
      • 12.9.0
      • 12.10.0
        • 12.10.1
        • 12.10.2
      • 12.11.0
      • 12.12.0
    • 11.x.x
      • 11.3.0
        • Valtimo backend libraries
        • Valtimo frontend libraries
      • 11.2.0 (RC)
        • Valtimo backend libraries
        • Valtimo frontend libraries
      • 11.1.5
        • Valtimo frontend libraries
      • 11.1.4
        • Valtimo backend libraries
        • Valtimo frontend libraries
      • 11.1.1
        • Valtimo backend libraries
        • Valtimo frontend libraries
      • 11.1.0
        • Valtimo backend libraries
        • Valtimo frontend libraries
      • 11.0.0
        • Valtimo backend libraries
        • Valtimo frontend libraries
        • Migration
    • 10.x.x
      • 10.8.3
        • Valtimo backend libraries
      • 10.8.2
        • Valtimo frontend libraries
      • 10.8.0
        • Valtimo backend libraries
        • Valtimo frontend libraries
      • 10.7.0
        • Valtimo backend libraries
        • Valtimo frontend libraries
      • 10.6.0
        • Valtimo backend libraries
        • Valtimo frontend libraries
        • Migration
      • 10.5.3
        • Valtimo backend libraries
      • 10.5.2
        • Valtimo backend libraries
      • 10.5.1
        • Valtimo backend libraries
        • Valtimo frontend libraries
      • 10.5.0
        • Valtimo backend libraries
        • Valtimo frontend libraries
        • Migration
      • 10.4.0
        • Valtimo backend libraries
        • Valtimo frontend libraries
      • 10.3.0
        • Valtimo backend libraries
        • Valtimo frontend libraries
      • 10.2.0
        • Valtimo backend libraries
        • Valtimo frontend libraries
      • 10.1.0
        • Valtimo backend libraries
        • Valtimo frontend libraries
        • Migration
      • 10.0.1
        • Valtimo frontend libraries
      • 10.0.0
        • Valtimo backend libraries
        • Valtimo frontend libraries
        • Migration
    • 9.x.x
      • 9.26.2/5.15.1
        • Valtimo backend libraries (9.26.2)
        • Migration
      • 9.26.1/5.15.1
        • Valtimo backend libraries (9.26.1)
        • Valtimo frontend libraries (5.15.1)
      • 9.26.0/5.15.0
        • Valtimo backend libraries (9.26.0)
        • Valtimo frontend libraries (5.15.0)
        • Migration
      • 9.25.0/5.14.0
        • Valtimo backend libraries (9.25.0)
        • Valtimo frontend libraries (5.14.0)
      • 9.24.0/5.13.0
        • Valtimo backend libraries (9.24.0)
        • Valtimo frontend libraries (5.13.0)
      • 9.23.0/5.12.0
        • Valtimo backend libraries (9.23.0)
        • Valtimo frontend libraries (5.12.0)
      • 9.22.0/5.11.0
        • Valtimo backend libraries (9.22.0)
        • Valtimo frontend libraries (5.11.0)
        • Migration
      • 9.21.0/5.10.0
        • Valtimo backend libraries (9.21.0)
        • Valtimo frontend libraries (5.10.0)
        • Migration
      • 9.20.0/5.9.1
        • Valtimo backend libraries (9.20.0)
        • Valtimo frontend libraries (5.9.1)
        • Migration
      • 9.19.0/5.8.0
        • Valtimo backend libraries (9.19.0)
        • Valtimo frontend libraries (5.8.0)
        • Migration
      • 9.18.0/5.6.0
        • Valtimo backend libraries (9.18.0)
        • Valtimo frontend libraries (5.6.0)
        • Migration
      • 9.17.0/5.5.0
        • Valtimo backend libraries (9.17.0)
        • Valtimo frontend libraries (5.5.0)
      • 9.16.0/5.4.0
        • Valtimo backend libraries (9.16.0)
        • Valtimo frontend libraries (5.4.0)
  • Running Valtimo
    • Application configuration
      • Temporary file-storage
      • Configuring CORS
      • REST API endpoint security test
      • Content Security Policy (CSP)
      • Configuring Keycloak
      • Temporary file storage
      • Feature toggles
  • Customizing Valtimo
    • Front-end customization
      • Customizing Carbon theme
      • Custom logo
      • Custom components
        • Custom case management tab
  • Contributing to Valtimo
    • Contributing to Valtimo
    • Docs style guide for contributing
    • Branching and release strategy
    • Extend the core or build a plugin
Powered by GitBook
On this page
  • Introduction
  • Default columns
  • Custom columns
  • Translations

Was this helpful?

  1. Features
  2. Case
  3. For developers

Custom case list columns

PreviousCase list tab orderNextCustom case tabs

Last updated 11 months ago

Was this helpful?

This page explains how the columns that are shown in the list of cases can be customized.

Introduction

Each case list comes with a set of four default columns: 'Reference number', 'Created by', 'Created on', and 'Last modified'. The columns in the list can be changed, added and removed. Any property stored in a document can be used as a column in a case list.

By default, the case list columns look like this:

Default columns

In the environment file, the following default inline code is found for the case list columns. This defines the columns that will be used in the case list, unless a custom column set has been configured for that case type.

environment.ts

...

const defaultDefinitionColumns: Array<DefinitionColumn> = [
  {
      propertyName: 'sequence',
      translationKey: 'referenceNumber',
      sortable: true,
  },
  {
      propertyName: 'createdBy',
      translationKey: 'createdBy',
      sortable: true,
  },
  {
      propertyName: 'createdOn',
      translationKey: 'createdOn',
      sortable: true,
      viewType: 'date',
      default: true,
  },
  {
      propertyName: 'modifiedOn',
      translationKey: 'lastModified',
      sortable: true,
      viewType: 'date',
  },
];

...

export const environment: ValtimoConfig = {
  ...
  defaultDefinitionTable: defaultDefinitionColumns,
  ...
};

Custom columns

The code shown above can be used as a starting point for custom columns. First add the line customDefinitionTables: {} below the line defaultDefinitionTable: defaultDefinitionColumns:

environment.ts

...

export const environment: ValtimoConfig = {
  ...
  defaultDefinitionTable: defaultDefinitionColumns,
  customDefinitionTables: {}
  ...
};

Inside the brackets custom columns can then be defined:

environment.ts

...

export const environment: ValtimoConfig = {
  ...
  defaultDefinitionTable: defaultDefinitionColumns,
  customDefinitionTables: {
      'document-definition-name' : [
          {
              propertyName: '$.firstName',
              translationKey: 'document-definition-name.firstName',
              sortable: false,
              viewType: 'string',
              default: true
          },
          {
              propertyName: 'modifiedOn',
              translationKey: 'lastModified',
              sortable: true,
              viewType: 'date'
          }
      ]
  }
  ...
};

For each case type for which custom columns are to be defined, a property is added to the customDefinitionTables object. The key of this property is the document definition id, and the value an array of DefinitionColumn, i.e.: 'document-definition-name': [].

For each column that needs to be displayed for that case type a DefinitionColumn is added to the array. A DefinitionColumn has the following properties:

  • propertyName The key from the document definition that is to be used to display column data. Default properties like sequence can be written plainly. Document content can be accessed by referring to properties by their JSON path. For example a firstName field in the root of the document can be displayed by using the expression $.firstName.

  • translationKey The path to a translation in the translation files. In the above example, a combination of the document definition name and the key from the document definition is used.

  • sortable (Optional) A boolean value, which states whether the column should be sortable. Only enable this if the back-end supports sorting on this property. Currently, the back-end supports sorting on createdOn, modifiedOn, sequence and all JSON path expressions on the content. If not set, the column is not sortable.

  • viewType (Optional) Refers to the type converter to be used for the property value, otherwise the value will be displayed as a string. Examples of available type converters are 'date', 'boolean', 'relatedFiles and 'string'.

  • default (Optional) Marks the column as the default column to be sorted by when first loading the page. Only one of the columns in the array of columns can have this property. If set to true, the table is sorted on this property descendingly. The sort direction may also be specified specifically by setting this property value to 'ASC' or 'DESC'.

Custom columns can be appended to the default list of columns instead of replacing them by using the spread operator (...):

environment.ts

...

export const environment: ValtimoConfig = {
  ...
  defaultDefinitionTable: defaultDefinitionColumns,
  customDefinitionTables: {
      'document-definition-name' : [
          ...defaultDefinitionColumns,
          {
              propertyName: '$.firstName',
              translationKey: 'document-definition-name.firstName',
              sortable: false,
              viewType: 'string',
          }
      ]
  }
  ...
};

Translations

Translations of the column header can be added in the translation resource files (e.g. en.json and nl.json) by adding the translation keys under the fieldLabels key.

en.json

{
...
"fieldLabels": {
  ...
  "document-definition-name": {
    "firstName": "First name"
  }
},
...
}
đŸ—ƒī¸
Default case detail list