Smart TabFolder
Here is a sample form JSON layout that uses a Smart Tab Folder:
{
"dataSources": {
"CustomerDataSource": {
"objectName": "CustomerDataSource",
"entityName": "Consultingwerk.SmartComponentsDemo.OERA.Sports2000.CustomerBusinessEntity",
"tableRef": "eCustomer",
"entityView": "eSalesRep"
},
"OrderCustomerDataSource": {
"objectName": "OrderCustomerDataSource",
"entityName": "Consultingwerk.SmartComponentsDemo.OERA.Sports2000.OrderBusinessEntity",
"tableRef": "eOrder",
"entityView": "eCustomer",
"foreignFields": "CustNum,CustNum",
"parentDataSource": "CustomerDataSource"
},
"OrderLineItemDataSource": {
"objectName": "OrderLineItemDataSource",
"entityName": "Consultingwerk.SmartComponentsDemo.OERA.Sports2000.OrderBusinessEntity",
"tableRef": "eOrderLine",
"entityView": "eItem",
"partialDataset": true,
"foreignFields": "Ordernum,Ordernum",
"parentDataSource": "OrderCustomerDataSource"
}
},
"columns": [
{
"TabFolder": {
"componentType": "tabfolder",
"componentOptions": {
"pages": [
{
"label": "Customer",
"icon": "Consultingwerk/SmartComponentsDemo/Web2/SalesrepCustomerTree/Images/businesspeople2.png",
"columns": [
{
"CustomerGrid": {
"componentType": "grid",
"componentOptions": {
"objectName": "CustomerGrid",
"gridLayout": "Consultingwerk.SmartComponentsDemo.OERA.Sports2000.CustomerBusinessEntity/customer/OrderGridDetailTemplate",
"dataSource": "CustomerDataSource"
}
}
},
{
"CustomerToolbar": {
"componentType": "toolbar",
"componentOptions": {
"objectName": "DefaultToolbar",
"buttons": [
"add",
"copy",
"save",
"cancel",
"delete"
]
}
},
"CustomerViewer": {
"componentType": "viewer",
"componentOptions": {
"objectName": "CustomerViewer",
"viewerLayout": "Consultingwerk.SmartComponentsDemo.OERA.Sports2000.CustomerBusinessEntity/customer",
"dataSource": "CustomerDataSource",
"tableIoSource": "CustomerToolbar"
}
}
}
]
},
{
"label": "Orders",
"icon": "Consultingwerk/SmartComponentsDemo/Web2/SalesrepCustomerTree/Images/purchase_order.png",
"columns": [
{
"OrderGrid": {
"componentType": "grid",
"componentOptions": {
"objectName": "OrderGrid",
"gridLayout": "Consultingwerk.SmartComponentsDemo.OERA.Sports2000.OrderBusinessEntity/order",
"dataSource": "OrderCustomerDataSource"
}
}
}
]
},
{
"label": "Order Lines",
"icon": "Consultingwerk/SmartComponentsDemo/Web2/SalesrepCustomerTree/Images/purchase_order.png",
"columns": [
{
"OrderLineGrid": {
"componentType": "grid",
"componentOptions": {
"objectName": "OrderLineGrid",
"gridLayout": "Consultingwerk.SmartComponentsDemo.OERA.Sports2000.OrderBusinessEntity/orderline",
"dataSource": "OrderLineItemDataSource"
}
}
}
]
}
]
}
}
}
]
}
The pages node of the Tab Folder's componentOptions is an array of tab folder page layouts. Each tab folder page layout may contain a label, an icon and either a rows or a columns array, much like the Smart Form layout. The columns/rows array may be used with layouts exactly like those used by the Smart Form.
JSON Properties list and explanations:
| Property | Type | Explanation | Equivalent HTML Attribute |
|---|---|---|---|
| pages | Object [] | An array of tab folder page layouts. | The smart-tabfolder-tab elements. |
| label (applies to pages) | string | The label to display for this tab page. | label |
| icon (applies to pages) | string | The icon to display for this tab page. If an absolute URL is provided, then it is used as is. If the provided URL begins with frontend://, then the value provided after the frontend:// prefix is interpreted as being relative to the NG app root. | icon |
| selected | boolean | Indicates whether this tab should be selected on load. Please note that an initially selected tab is mandatory. | selected |
| columns/rows | Object [] | An array of column or row layouts. To be used exactly like with the Smart Form JSON layout. | N/A |