Smart Form JSON Layouts
The layout that a Smart Form will use can be set in two ways:
HTML Markup
<smart-form smart-form-layout="frontend://assets/my-json.layout.json"></smart-form>
"frontend://" is a shortcut for "http://mydomainname.com/". For example, if your web application is hosted at "https://www.awesome-app.com" and you use a layout URL of "frontend://assets/my-form.layout.json", this will be translated to "https://www.awesome-app.com/assets/my-form.layout.json" automatically.
Angular Route Configuration
{
"path": "customer",
"component": SmartFormOutletComponent,
"data": {
"ViewUri": "frontend://assets/my-json.layout.json",
"BrowserTitleTemplate": "Customer View"
}
}
Here is a sample form layout for the Customer Maintenance screen:
{
"dataSources": {
"customerDataSource": {
"objectName": "customerDataSource",
"entityName": "Consultingwerk.SmartComponentsDemo.OERA.Sports2000.CustomerBusinessEntity",
"tableRef": "eCustomer",
"entityView": "eSalesrep"
},
"orderDataSource": {
"objectName": "orderDataSource",
"entityName": "Consultingwerk.SmartComponentsDemo.OERA.Sports2000.OrderBusinessEntity",
"tableRef": "eOrder",
"entityView": "eCustomer",
"parentDataSource": "customerDataSource",
"foreignFields": "CustNum,CustNum"
}
},
"settings": {
"classList": [
"customer-form"
],
"style": {
"font-size": "15"
}
},
"columns": [
{
"splitView": {
"componentType": "splitview",
"componentOptions": {
"left": {
"columns": [
{
"customerGrid": {
"componentType": "grid",
"componentOptions": {
"gridLayout": {
"height": 500,
"width": 600,
"scrollable": "scrollable",
"sortable": true,
"selectable": "row",
"pageable": {
"refresh": true,
"pageSizes": [
10,
25,
100
],
"buttonCount": 5
},
"columns": [
{
"field": "CustNum",
"title": "Cust Num",
"width": "100"
},
{
"field": "Name",
"title": "Name",
"width": "240"
},
{
"field": "Country",
"title": "Country",
"width": "160",
"windowSizes": [
"lg",
"md"
]
},
{
"field": "City",
"title": "City",
"width": "200",
"windowSizes": [
"lg"
]
},
{
"field": "eSalesrep[0].RepName",
"title": "Rep Name",
"width": "240",
"template": "childRelation:eSalesrep:RepName",
"windowSizes": [
"lg"
]
},
{
"type": "command",
"width": "50",
"form": "\/customer\/:CustNum\/orders",
"text": "View Orders",
"imageUrl": "Consultingwerk\/SmartComponentsDemo\/Web2\/Images\/package.png"
},
{
"type": "command",
"width": "50",
"action": "PutCustomerOnHoldHandler",
"text": "Put customer on credit hold",
"imageUrl": "Consultingwerk\/SmartComponentsDemo\/Web2\/Images\/sign_stop.png"
}
],
"detailTemplate": {
"dataSources": [
{
"objectName": "orderDataSource",
"entityName": "Consultingwerk.SmartComponentsDemo.OERA.Sports2000.OrderBusinessEntity",
"tableRef": "eOrder",
"entityView": "eCustomer",
"initialFilter": {
"operator": "eq",
"field": "CustNum",
"value": "[dataItem.CustNum]"
}
}
],
"rows": [
{
"orderGrid": {
"componentType": "grid",
"componentOptions": {
"gridLayout": "Consultingwerk.SmartComponentsDemo.OERA.Sports2000.OrderBusinessEntity/order",
"dataSource": "orderDataSource",
"objectName": "orderGrid"
}
},
"customCmp": {
"componentType": "custom",
"componentOptions": {
"placeholderId": "customerDetailCmp"
}
}
}
]
}
},
"dataSource": "customerDataSource",
"objectName": "customerGrid"
}
}
}
]
},
"right": {
"columns": [
{
"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",
"tableIoSource": "customerToolbar"
}
}
}
]
},
"right": {
"columns": [
{
"customerOrdersGridPlaceholder": {
"componentType": "custom",
"componentOptions": {
"placeholderId": "custOrdersGrid"
}
}
}
]
}
}
}
}
]
}
}
}
}
]
}
Result:
Each form layout, at the root level, may contain the following:
- a "dataSources" object
- a "rows" array
- a "columns" array
- a "settings" object
Note: The layout may contain either a "rows" array or a "columns" array. It may not contain both.
The "settings" object allows some properties of the Smart Form to be set:
- style - an object containing any CSS properties and their values. They will all be applied as the inline style of the Smart Form. Example:
{
"settings": {
"style": {
"background-color": "lightgray",
"font-size": "20"
}
}
- classList - an array containing CSS class names that should be applied to the Smart Form. Example:
{
"settings": {
"classList": [ "customer-form", "dark" ]
}
}
The keys of the "dataSources" object, as well as those of each item in the "rows" or "columns" array, are instance names of data sources and form items. The values stored at these keys are objects that describe each data source/form item.