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:

PropertyTypeExplanation
inputTypestringRepresents the input field type. May be "text", "number", "editor", "date", "checkbox", "combo", "logical", "image" or "lookup".
formatstringApplies to inputType number. For additional information regarding possible values, please see the Kendo UI Documentation.
styleobjectAn object containing any CSS properties and their values. These will be applied as the inline style HTML attribute of the input.
lookupOptionsobjectApplies to inputType lookup (see below).
comboOptionsobjectApplies to inputType combo (see below).
mandatorybooleanApplies to an input field of type logical and it specifies whether empty value is allowed to be set on that field.
unboundbooleanMarks 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.
noLabelboolean

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.

imageFileNamestringApplies for unbound fields with inputType "image" and it accepts the following formats: relative and absolute URLs, base64 encoded images.
showWeekNumbersbooleanApplies 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:

PropertyTypeExplanationEquivalent HTML Attribute
businessEntityNamestringThe 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
entityTablestringThe business entity table to return records from.smart-entity-table
gridLayoutstring

The layout to be used by the grid displayed in the lookup's dialog, see Smart Grid

smart-grid-layout
dialogOptionsobjectUsed to specify settings such as width and height for the lookup's dialogsmart-lookup-dialog-options
dialogTitlestringThe title to display in the lookup's dialogsmart-lookup-header
fieldBindingobject

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
keyFieldstring

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
keyValueFieldstringThe 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
keyValueFieldBindingstring

This setting is used for binding the keyValue from the lookup's internal data source to a field with a different name. 

example:

  • keyValueField: id
  • keyValueFieldBinding: SalesRepGuid
smart-lookup-key-value-field-binding
serverSideFilteringbooleanThis option is used for setting the serverSideFiltering property on the smart data sources connected to the lookup.smart-server-side-filtering
foreignFieldsstringThis 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
queryStringstring

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:

  • foreignField: "Name",
  • queryString: "for each eCustomer where eCustomer.Name = @Name@"

where @Name@ will be replaced by the foreign field value in the Smart Viewer.

smart-query-string
provideForeignFieldValuestring | 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
beforePerformLookupstring | SmartFilterDescriptorOptional 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:
  • filter: 'for each eSalesrep where eSalesrep.Name = BBB' // Or an object of type SmartFilterDescriptor
  • queryString: "for each eSalesrep where eSalesrep.Name = BBB";
  • canceled: true/false
[beforePerformLookup]


Available combo editor options:

PropertyTypeExplanationEquivalent HTML Attribute
valueListstring[]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
smartValueListstringThe name of the Smart Value List to get values from.smart-value-list
valueListPairArray<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
entityNamestringThe business entity that the Smart Combo Editor's Smart Data Source will use.smart-business-entity-name
tableRefstringThe business entity table to be used as a table-ref by the Smart Combo Editor's internal data source.smart-entity-table
displayColumnstringThe name of the column that the Smart Combo Editor will use to display records.display-column-name
keyColumnstringThe 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
fieldBindingstringAn 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
flagValuestring

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
flagLabelstringThe text which will be displayed for the flag item. This is requested in case of using valueListPair.smart-flag-label
flagImagestringThe path for the image of the flag item. This is requested in case of using smartValueList.smart-flag-image
foreignFieldsstringThis 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
queryStringstring

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:

  • foreignField: "Name",
  • queryString: "for each eCustomer where eCustomer.Name = @Name@"

where @Name@ will be replaced by the foreign field value in the Smart Viewer.

smart-query-string
provideForeignFieldValuestring | 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
allowFilteringbooleanEnables/disables filtering in the Smart Combo Editor input. The default value is true.smart-combo-allow-filter

Input type map:

Input TypeRenders As
text<input type="text" />
numberKendo Numeric Textbox
dateKendo Date Picker
editortextarea
lookup

Smart Lookup

checkbox<input type="checkbox" />
comboSmart Combo Editor
logicalSmart Logical Combo
imageimg