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 |