SmartGrid
Here is a sample Smart Grid JSON configuration:
{
"dataSources": {
"customerDatasource": {
"objectName": "customerDataSource",
"entityName": "Consultingwerk.SmartComponentsDemo.OERA.Sports2000.CustomerBusinessEntity",
"tableRef": "eCustomer",
"entityView": "eSalesrep"
}
},
"settings": {
"classList": [
"customer-form"
],
"style": {
"font-size": "15"
}
},
"columns": [
{
"customerGrid": {
"componentType": "grid",
"componentOptions": {
"gridLayout": {
"height": 500,
"width": 600,
"scrollable": "scrollable",
"sortable": true,
"selectable": "row",
"pageable": {
"pageSizes": [
10,
25,
100
],
"buttonCount": 5
},
"resizable": true,
"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"
}
}
}
]
}
},
"disableTextSelection": true,
"dataSource": "customerDataSource",
"objectName": "customerGrid"
}
}
}
]
}
The "gridLayout" property may be a string or an object. If a string is passed, then the Smart Grid will treat it as a URL and attempt to fetch the grid layout. If an object is passed, it will be used as the grid layout.
A note on the Smart Grid detail template:
The detail template accepts the same JSON layout that a Smart Form does, with the addition that it also supports template variables which will be matched to values from the current data item. For example, "[dataItem.CustNum]" will be resolved to the CustNum of the currently selected customer.
JSON Properties list and explanations:
| Property | Type | Explanation | Equivalent HTML Attribute |
|---|---|---|---|
| gridLayout | string | object | The reference to the grid layout to be retrieved from the backend service, or the actual grid layout object. | smart-grid-layout |
| objectName | string | A unique identifier used for obtaining references to the grid component | smart-object-name |
| dataSource | string | The smart-object-name of the Smart Data Source that the grid should bind to | smart-data-source |
| filterable | logical | Use this to disable filtering support. By default, filtering is enabled. Filtering can also be disabled using the grid layout. | filterable |
| gridLayout.resizable | logical | Allows resizing of the SmartGrid's columns. | |
| disableTextSelection | logical | Disables the text selection in the grid's rows. | disable-text-selection |