Collection table with row detailed view¶
Prerequisites¶
Modules
git checkout origin/osp-web-configuration .
git checkout origin/osp-collections-configuration .
Description¶
This tutorial shows how to enable the row detail view functionality for a Collection table.
This is configured for each view of the schema associated with the table. The detail view can contain two component, either a detail view of every property or a view with a sub table containing the journal of the collection (if exist).
In this example, we will create a eventlogs collection with a journal and show this journal in the detail view of the row.
You can directly use the following command to add this example into your configuration:
git checkout origin/example-dashboard-collections-row-detail-view .
If you have never interacted with collections before, you should start by following this example.
Steps¶
1. Create the event collection¶
We need a property in our schema for the journal. This property must be an array of objects with the following properties:
id: unique identifieruser: user adding this entrytext: content of the entrytimestamp: timestamp of the entrymeta: metadata around the entry
Your schema.ospp should look like this:
{
"filters": [
{
"id": "all",
"name": "All"
},
{
"id": "filters_open",
"name": "Open"
},
{
"id": "filters_close",
"name": "Close"
}
],
"schema": {
"type": "object",
"properties": {
"fiche_no": {
"type": "integer",
"title": "Number"
},
"summary": {
"type": "string",
"title": "Summary"
},
"reference": {
"type": "string",
"title": "Reference"
},
"site": {
"type": "string",
"title": "Site"
},
"category": {
"type": "string",
"title": "Category"
},
"status": {
"title": "State",
"type": "string",
"enum": [
"Open",
"Close"
]
},
"date": {
"type": "number",
"title": "Date",
"$comment": "date"
},
"journal": {
"type": "array",
"title": "Event log",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"user": {
"type": "string"
},
"text": {
"type": "string"
},
"timestamp": {
"type": "number"
},
"meta": {
"type": "array",
"items": {
"type": "object",
"properties": {
"user": {
"type": "string"
},
"timestamp": {
"type": "number"
},
"operation": {
"type": "string"
}
}
}
}
}
}
}
},
"required": [
"date"
]
}
}
2. Define the schema view¶
In the view, we need to set tableRowDetail as journal.
5 {
6 "id": "1",
7 "name": "Default",
8 "reorderable": true,
9 "isDefault": true,
10 "tableRowDetail": "journal",
11 "sort": [
12 {
13 "field": "date",
14 "direction": "desc"
15 }
16 ],
17 "columns": [
3. Define a dashboard with a collection table¶
Create a basic dashboard with a Collection table linked to this schema. There is no specific parameters here.
3 {
4 "type": "CollectionTable",
5 "id": "D2H2STZ3",
6 "title": "",
7 "menuReferences": [],
8 "collectionTableWidgetSettings": {
9 "defaultSchemas": ["root.collections.events"],
10 "defaultFilter": "all",
11 "defaultDisplayType": "table",
12 "pageSize": 100,
13 "pageSizes": [
14 50,
15 100,
16 200
17 ],
18 "resizeMode": "widget",
19 "disableToolbarTableRefresh": false,
20 "disableSchemaUpdate": false,
21 "disableViewUpdate": false,
22 "disableFilterUpdate": false,
23 "disableToolbar": false,
24 "disableToolbarMenu": false,
25 "disableSidePanel": false,
26 "disableToolbarExport": false,
27 "disableToolbarColumnShowHide": false,
28 "disableToolbarFilterShowHide": false,
29 "disableToolbarSummaryShowHide": false,
30 "disableToolbarSearch": true,
31 "disableToolbarColumnChooser": false,
32 "disableToolbarClearFilter": false
33 }
34 }
On the front-end, go to the dashboard and add a first entry to the collection. Then, back on the list view of the table, you can expand the row and you should see something like this:
