Smart Viewer Layouts
The Smart Viewer is configured using JSON-defined viewer layouts. Here is an example, the Customer Viewer layout:
{
"group1": {
"type": "group",
"fields": {
"GroupBox3": {
"type": "fieldset",
"title": "Customer",
"fields": {
"CustNum": {
"type": "field",
"inputSettings": {
"inputType": "number",
"format": "n0",
"style": {
"width": "80px"
}
},
"label": "Cust Num",
"enabledState": "add"
},
"Name": {
"type": "field",
"label": "Name",
"required": true
},
"SalesRep": {
"type": "field",
"label": "Sales rep",
"inputSettings": {
"inputType": "lookup",
"lookupOptions": {
"objectName": "SalesrepLookup",
"dialogTitle": "Lookup SalesRep",
"entityName": "Consultingwerk.SmartComponentsDemo.OERA.Sports2000.SalesRepBusinessEntity",
"entityTable": "eSalesrep",
"gridLayout": "Consultingwerk.SmartComponentsDemo.OERA.Sports2000.SalesRepBusinessEntity/salesrep",
"beforePerformLookup": "BeforePerformLookupHandler",
"dialogOptions": {
"width": "700px",
"height": "500px"
},
"keyField": "SalesRep",
"fields": "RepName",
"fieldBinding": {
"RepName": "eSalesrep[0].RepName"
}
}
}
},
"eSalesrep[0].RepName": {
"type": "field",
"label": "Rep Name"
}
}
},
"GroupBox4": {
"type": "fieldset",
"title": "Contact Information",
"fields": {
"Contact": {
"type": "field",
"label": "Contact"
},
"Phone": {
"type": "field",
"inputSettings": {
"style": {
"width": "110px"
}
},
"label": "Phone"
},
"EmailAddress": {
"type": "field",
"label": "Email"
}
}
}
}
},
"GroupBox": {
"type": "fieldset",
"title": "Commercial",
"fields": {
"group1": {
"type": "group",
"fields": {
"Terms": {
"type": "field",
"inputSettings": {
"style": {
"width": "110px"
}
},
"label": "Terms"
},
"Balance": {
"type": "field",
"inputSettings": {
"inputType": "number",
"format": "n2",
"style": {
"width": "101px"
}
},
"label": "Balance"
}
}
},
"group2": {
"type": "group",
"fields": {
"Discount": {
"type": "field",
"inputSettings": {
"inputType": "number",
"format": "n0",
"style": {
"width": "38px"
}
},
"label": "Discount"
},
"CreditLimit": {
"type": "field",
"inputSettings": {
"inputType": "number",
"format": "n2",
"style": {
"width": "78px"
}
},
"label": "Credit Limit"
}
}
},
"Comments": {
"type": "field",
"label": "Comments",
"inputSettings": {
"inputType": "editor",
"style": {
"height": "200px",
"background-color": "lightcyan"
}
}
},
"SmartComments": {
"type": "field",
"label": "Smart comments",
"inputSettings": {
"inputType": "logical",
"format": "Enabled/Disabled",
"mandatory": true
}
}
}
},
"GroupBox2": {
"type": "fieldset",
"title": "Address",
"fields": {
"Address": {
"type": "field",
"label": "Address"
},
"Address2": {
"type": "field",
"label": "Address2"
},
"group3": {
"type": "group",
"fields": {
"PostalCode": {
"type": "field",
"inputSettings": {
"style": {
"width": "78px"
}
},
"label": "Postal Code"
},
"City": {
"type": "field",
"inputSettings": {
"style": {
"width": "135px"
}
},
"label": "City"
}
}
},
"group4": {
"type": "group",
"fields": {
"Country": {
"type": "field",
"inputSettings": {
"style": {
"width": "110px"
}
},
"label": "Country"
},
"State": {
"type": "field",
"inputSettings": {
"style": {
"width": "110px"
}
},
"label": "State"
}
}
}
}
},
"settings": {
"style": {
"margin-top": "0.5em",
"background-color": "white",
"position": "relative"
}
}
}
At the root level, the Smart Viewer layout contains (similar to the way Smart Form items are defined), instance names. In the case of the Smart Viewer, the instance names also represent the field binding (if they are describing a field). If the instance name is describing a fieldset or a group, then it only represents the instance name.
The "settings" key is reserved and is used for defining settings (style and classList).
There are three item types available at the root level:
- groups
- fieldsets
- fields
A group may contain fields. Fields within a group will be rendered on the same row.
A fieldset may contain groups, fields, or both.
Each viewer item may contain the following properties:
- type - group, fieldset, field
- fields - applies to types "group" and "fieldset". Contains nested instance names of applicable child items.
- title - applies to type "fieldset".
- inputSettings - applies to type "field"
- label - applies to type "field". Represents the input field's label. If left unset, the label provided by the JSDO schema will be used, if available.
- required - applies to type "field". May be true or false. If left unset, the value provided by the JSDO schema is used, if available.
Available inputSettings:
| Property | Type | Explanation |
|---|---|---|
| inputType | string | Represents the input field type. May be "text", "number", "editor", "date", "checkbox", "combo", "logical", "image" or "lookup". |
| format | string | Applies to inputType number. For additional information regarding possible values, please see the Kendo UI Documentation. |
| style | object | An object containing any CSS properties and their values. These will be applied as the inline style HTML attribute of the input. |
| lookupOptions | object | Applies to inputType lookup (see below). |
| comboOptions | object | Applies to inputType combo (see below). |
| mandatory | boolean | Applies to an input field of type logical and it specifies whether empty value is allowed to be set on that field. |
| unbound | boolean | Marks the field as unbound (it is not a field of the datasource's selected record). It can be accessed in the client smart-form through the inputValueChanged event of the SmartViewer instance. |
| noLabel | boolean | Applies to type "fieldset" and "field" (when inputSettings.inputType is one of: "text", "editor", "lookup", "combo", "checkbox", "button"). Its value decides whether the field is displayed without label (or the fieldset without title). By default it is set on false. |
| imageFileName | string | Applies for unbound fields with inputType "image" and it accepts the following formats: relative and absolute URLs, base64 encoded images. |
| showWeekNumbers | boolean | Applies for fields with inputType "date" and it enables the displaying of week numbers in the calendar. This setting will be overwritten by globalValues.componentDefaults.viewer.showDatePickerWeekNumbers if it is set. |
Available lookup options:
| Property | Type | Explanation | Equivalent HTML Attribute |
|---|---|---|---|
| businessEntityName | string | The name of the business entity to be served by the lookup's internal data source. This business entity is used to return the records referenced by the foreign field values. | smart-business-entity-name |
| entityTable | string | The business entity table to return records from. | smart-entity-table |
| gridLayout | string | The layout to be used by the grid displayed in the lookup's dialog, see Smart Grid | smart-grid-layout |
| dialogOptions | object | Used to specify settings such as width and height for the lookup's dialog | smart-lookup-dialog-options |
| dialogTitle | string | The title to display in the lookup's dialog | smart-lookup-header |
| fieldBinding | object | An object that defines the field mapping for additional field bindings between the lookup's selected record and the containing viewer's data source. This setting should not be used for setting meaningful fields, such as a GUID. Please see keyValueField below for this. | smart-lookup-fields-binding |
| keyField | string | The field used to search in the lookup's internal data source when the user types into the lookup. The value of this field is returned to the [(smartModel)] field in the viewer. This field is what the user sees. | smart-lookup-key-field |
| keyValueField | string | The meaningful field (such as a GUID) that should be retrieved from the lookup's internal data source. This field is not visible to the user. | smart-lookup-key-value-field |
| keyValueFieldBinding | string | This setting is used for binding the keyValue from the lookup's internal data source to a field with a different name. example:
| smart-lookup-key-value-field-binding |
| serverSideFiltering | boolean | This option is used for setting the serverSideFiltering property on the smart data sources connected to the lookup. | smart-server-side-filtering |
| foreignFields | string | This setting can be used together with the queryString option, in order to filter the Smart Lookup's data source. There can be multiple foreignFields, divided by commas (Example: "Name,SalesRep"). | smart-foreign-fields |
| queryString | string | This option is used to filter the SmartLookup data source. It can be used as a simple query, or together with the foreignFields option, like in the example below:
where @Name@ will be replaced by the foreign field value in the Smart Viewer. | smart-query-string |
| provideForeignFieldValue | string | Function | The name of a callback method implemented in the form, that can be used to modify the value of a given foreignField. It takes as an input parameter a ProvideForeignFieldValue instance. The value property should be altered directly on the input parameter. | provide-foreign-field-value |
| beforePerformLookup | string | SmartFilterDescriptor | Optional attribute representing an event handler that is called when a SmartLookupComponent is about to perform a lookup. The event arguments implement the IBeforePerformLookupEventArgs interface. It's properties are the following:
| [beforePerformLookup] |
Available combo editor options:
| Property | Type | Explanation | Equivalent HTML Attribute |
|---|---|---|---|
| valueList | string[] | An array of elements to display. When using this settings, the values will match the displayed text. Example: ["A","B"] will produce a combo editor with two items. When A is selected, the value that will be set is A. | value-list |
| smartValueList | string | The name of the Smart Value List to get values from. | smart-value-list |
| valueListPair | Array<string | number> | An array containing pairs of elements to display and their values. Example: ["A", "1", "B", "2"] will produce a combo editor with two items, A and B. When A is selected, the value that will be set is 1. | smart-value-list-pair |
| entityName | string | The business entity that the Smart Combo Editor's Smart Data Source will use. | smart-business-entity-name |
| tableRef | string | The business entity table to be used as a table-ref by the Smart Combo Editor's internal data source. | smart-entity-table |
| displayColumn | string | The name of the column that the Smart Combo Editor will use to display records. | display-column-name |
| keyColumn | string | The the name of the field that the Smart Combo Editor will use to update the smartModel value when the user selects an item. | key-column-name |
| fieldBinding | string | An object that defines the field mapping for additional field bindings between the combo editor's selected record and the containing viewer's data source. | smart-field-binding |
| flagValue | string | The flag is an additional item which will be prepended before the items in the valueList / valueListPair / smartValueList array. The flagValue can be anything, for instance it can be "All" or "Please select a SalesRep". | smart-flag-value |
| flagLabel | string | The text which will be displayed for the flag item. This is requested in case of using valueListPair. | smart-flag-label |
| flagImage | string | The path for the image of the flag item. This is requested in case of using smartValueList. | smart-flag-image |
| foreignFields | string | This setting can be used together with the queryString option, in order to filter the data source for a data-driven Smart Combo Editor. There can be multiple foreignFields, divided by commas (Example: "Name,SalesRep"). | smart-foreign-fields |
| queryString | string | This option is used to filter the data-driven Smart Combo Editor's data source. It can be used as a simple query, or together with the foreignFields option, like in the example below:
where @Name@ will be replaced by the foreign field value in the Smart Viewer. | smart-query-string |
| provideForeignFieldValue | string | Function | The name of a callback method implemented in the form, that can be used to modify the value of a given foreignField. It takes as an input parameter a ProvideForeignFieldValue instance. The value property should be altered directly on the input parameter. | provide-foreign-field-value |
| allowFiltering | boolean | Enables/disables filtering in the Smart Combo Editor input. The default value is true. | smart-combo-allow-filter |
Input type map:
| Input Type | Renders As |
|---|---|
| text | <input type="text" /> |
| number | Kendo Numeric Textbox |
| date | Kendo Date Picker |
| editor | textarea |
| lookup | Smart Lookup |
| checkbox | <input type="checkbox" /> |
| combo | Smart Combo Editor |
| logical | Smart Logical Combo |
| image | img |