Smart SplitView
Here is an example of a Smart Split View JSON configuration:
{
"verticalSplit": {
"componentType": "splitview",
"componentOptions": {
"orientation": "vertical",
"settings": {
"style": {
"height": "900px"
}
},
"left": {
"columns": [
{
"customerToolbar": {
"componentType": "toolbar",
"componentOptions": {
"objectName": "customerToolbar",
"buttons": [
"add",
"copy",
"save",
"cancel",
"delete"
]
}
}
},
{
"customerViewer": {
"componentType": "viewer",
"componentOptions": {
"viewerLayout": "http://localhost:4200/assets/customer-viewer.structure.json",
"objectName": "customerViewer",
"dataSource": "customerDataSource",
"tableIo": "customerToolbar"
}
}
}
]
},
"right": {
"columns": [
{
"customerOrdersGridPlaceholder": {
"componentType": "custom",
"componentOptions": {
"placeholderId": "custOrdersGrid"
}
}
}
]
}
}
}
The "left" and "right" nodes represent the two panes that the component will render. These are mandatory properties. Each of them, like the Smart Form, must contain either a "rows" or a "columns" array of objects that hold instance names and their respective component configurations. If the "orientation" property (default: "horizontal") is set to vertical, then the two columns will be rendered on top of each other. Split Views may contain nested Split Views within the "left" and "right" columns.
JSON Properties list and explanations:
| Property | Type | Explanation | Equivalent HTML Attribute |
|---|---|---|---|
| left | Array<any> | Contains an array of form item JSON configurations. This column will be rendered on the left hand side (or on top, depending on the orientation setting). | The "left-pane" child element of the Smart Split View. |
| right | Array<any> | Contains an array of form item JSON configurations. This column will be rendered on the right hand side (or on the bottom, depending on the orientation setting). | The "right-pane" child element of the Smart Split View. |
| orientation | string | Determines the orientation of the Split View. Possible values: "vertical", "horizontal". Default: "horizontal". If set to "vertical", a fixed height must be set using the "style" setting. | orientation |