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
  • Configure widget
  • Configure table columns
  • Table widget options

Was this helpful?

  1. Features
  2. Case
  3. Widgets

Table widget

PreviousForm.io widgetNextCollection widget

Last updated 6 months ago

Was this helpful?

This page requires:

  • Basic knowledge of JSON file structure.

Configure widget

A table widget can be used when arrays (lists) are stored in the case data structure and need to be presented as such in the case UI. The following fields need to be configured for a table widget.

  • Widget title The widget title is presented in the UI at the top-left corner of the widget and should describe the content for that widget.

  • Rows per page If the content exceeds the number of rows pagination will be added in the UI.

  • Path to table data The exact path in the JSON document that contains the array with data.

  • Table columns Columns need to be based on the available fields within the array data.

Configure table columns

For each column in the table the following configurations needs to be done.

  • Title The title will be displayed as the label of the field in the widget.

  • Value The value itself will not actually be configured, the path targeting the value in the JSON document is configured. The value is passed through by the widget.

  • Display type Select the way the data is presented in the UI. Please find the available display types below.

The is available as for the fields widget. Please find the documentation on the different display types there.

Table widget configuration example

Below example shows the configuration for a table that displays uploaded files by there name and creation date.

The path in the JSON document for the array: doc:/uploadedFiles

The information from the array that is shown:

Since the location of the array itself is known it is no longer need to define a full JSON path for the values of the table columns. Only define the data location within the array like so: data/name

data/createdOn

To gather the data the widget code will combine the "Path to table data" field with the value fields from the column configuration. This results in the following JSON paths where x is filled by iterating over the array data.

doc:/uploadedFiles[x]/data/name

doc:/uploadedFiles[x]/data/createdOn

This configuration is based on below JSON. The uploadedFiles object exists in the root of this JSON document. Below the JSON a screenprint of the configuration in the Widget configuration UI.

"uploadedFiles": [ 
  {
    "data": { 
      "key": "Upload Test-22b44a2f-9790-4730-b2bf-d8f017711046.docx", 
      "name": "Upload Test.docx",
      "createdOn": "2024-10-30T07:15:33.121Z",
      "bucketName": "exampleFiles",
      "resourceId": "85a1b768-41b4-4f62-adbc-40dcbe0e7adf",
      "sizeInBytes": 12668 
    },
    "size": 12668,
    "type": "docx",
    "storage": "url",
    "customUpload": true,
    "originalName": "Upload Test.docx"
  } 
]

Table widget options

Below option there is a toggle available named "First column is the title of the row". Enabling this will display the first column with italics and no underline. See below screenshots for the difference in presentation in the result of above configuration. 6 files where uploaded for this example so 3 pages of each 2 files are shown in the widget.

đŸ—ƒī¸
Uploaded files table widget configuration
Uploaded files with first column set as title column
same list of display types