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:

PropertyTypeExplanationEquivalent HTML Attribute
pagesObject []An array of tab folder page layouts.The smart-tabfolder-tab elements.
label (applies to pages)stringThe 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
selectedbooleanIndicates whether this tab should be selected on load. Please note that an initially selected tab is mandatory.selected
columns/rowsObject []An array of column or row layouts. To be used exactly like with the Smart Form JSON layout.N/A