Search…
Custom columns for a case definition
Each case comes with a default case overview with four standard columns. Reference number, Created by, Created on, and Last modified. We can also adjust these columns. We can use any key we have defined in our document as a column in our case overview.

environment.ts

In the environment.ts we find the following default inline code for the case overview columns:
1
const defaultDefinitionColumns = [
2
{
3
propertyName: 'sequence',
4
translationKey: 'referenceNumber',
5
sortable: true
6
},
7
{
8
propertyName: 'createdBy',
9
translationKey: 'createdBy',
10
sortable: true
11
},
12
{
13
propertyName: 'createdOn',
14
translationKey: 'createdOn',
15
sortable: true,
16
viewType: 'date',
17
default: true
18
},
19
{
20
propertyName: 'modifiedOn',
21
translationKey: 'lastModified',
22
sortable: true,
23
viewType: 'date'
24
}
25
];
Copied!
We can use this code as the basis for our custom columns.
First add the line customDefinitionTables: {} below the line defaultDefinitionTable: defaultDefinitionColumns like this:
1
defaultDefinitionTable: defaultDefinitionColumns,
2
customDefinitionTables: {
3
4
}
Copied!
Inside the brackets we can define our custom columns like this:
1
'document-definition-name' : [
2
{
3
propertyName: '$.keyFromDocumentDefinition',
4
translationKey: 'document-definition-name.keyFromDocumentDefinition',
5
sortable: false,
6
viewType: boolean
7
},
8
{
9
propertyName: 'modifiedOn',
10
translationKey: 'lastModified',
11
sortable: true,
12
viewType: 'date'
13
}
14
]
Copied!
For each case where we want to define custom columns, we add an array with the desired columns. We use the name of the case’s document definition for the array: 'document-definition-name' : []
In this array we can add our columns with the following properties:
propertyName: This is the key from our document definition that we want to use as our column data.
translationKey: This is the path to our translation in our translation file. We will use a combination of the document definition name and the key from our document definition that we used for this column.
sortable: If the column can be sorted by the user.
viewType: This value is optional, and 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'.
By default our cases are being sorted by ‘modifiedOn’, so we will always add this column to our case overview.
In case you want to extend on the default columns, we can also include the default columns like this:
1
'document-definition-name' : [
2
...defaultDefinitionColumns,
3
{
4
propertyName: '$.keyFromDocumentDefinition',
5
translationKey: 'keyFromDocumentDefinition',
6
sortable: false,
7
viewType: boolean
8
}
9
]
Copied!

Translations

In the folder src > assets > i18n we can find our translation files. By default you will find a en.json and a nl.json. We will define the translations for our custom columns in both of those files.
If we scroll down we will find the fieldLabels section, this section is where we define our column labels
1
"fieldLabels": {
2
"referenceNumber": "Reference number",
3
"createdBy": "Created by",
4
"createdOn": "Created on",
5
"lastModified": "Last modified",
6
"files": "Files",
7
"firstName": "First name",
8
},
Copied!
We will always leave the default translations in here, even if we don’t use them. To add the translations for our custom columns, we add a new items under the default items:
1
"fieldLabels": {
2
"referenceNumber": "Reference number",
3
"createdBy": "Created by",
4
"createdOn": "Created on",
5
"lastModified": "Last modified",
6
"files": "Files",
7
"firstName": "First name",
8
"keyFromDocumentDefinition": "Key from document definition"
9
},
Copied!
We should now see our custom columns on the case overview page, with our defined translations as the column labels.
Last modified 4mo ago
Copy link
Contents