Kendo UI Designer Overview : Data providers and data sources : Editor and semantic types
  

Editor and semantic types

A key feature of a data source is that it allows you to specify meta-data to represent each individual field, which defines its UI-independent function and visualization for update or read-only display. This meta-data includes an editor type, which identifies the visualization. The options for specifying an editor type depend on a field's semantic type, which also appears in the data source meta-data and is provided by the field's resource definition in the Data Service Catalog. The specified editor type for a field is then used by the Kendo UI Generator to identify the Kendo UI implementation to generate as the field's Kendo UI visualization in view forms (see Modules and views).
A semantic type specifies the functional usage for a field, such as to store currency or date and time values. In the Add Data Source or Edit Data Source dialog boxes (see Adding and editing a data source), the semantic type appears in parentheses next to its field name in the data source field list, such as Integer in CustNum(Integer) or Text in Name(Text), as shown in the example.
For an OpenEdge Data Object resource (Business Entity), a semantic type is specified for each temp-table field as part of defining the service interface for the Data Object. This includes a default semantic type that is associated with each supported ABL field data type, if none other is specified. For more information, see the documentation on defining Data Object service interfaces in the Progress Developer Studio for OpenEdge Online Help.
The following table lists each supported editor type and its UI behavior, including the Kendo UI visualization created for it in forms by the Kendo UI Generator:
Table 1. Supported editor types and Kendo UI implementations
Editor type
Behavior
Kendo UI visualization
bool-radio-set
Describes the visualization and behavior of a boolean field using a choice between two selectable elements.
Boolean Radio Button List
calendar
Describes the visualization and behavior of a date field as a calendar control used to select its ISO-8601 value.
Calendar
check-box
Describes the visualization and behavior of a boolean field using a single element to reflect two different choices.
Check Box
combo-box
Describes the visualization and behavior of a control that is bound to a data source from which it displays a list of corresponding display fields that the user can both select and edit to specify the value of the control.
Combo Box
currency-input
Describes the visualization and behavior of a numeric field that represents currency data.
Currency Text Box
date-input
Describes the visualization and behavior of a date field with an ISO-8601 value.
Date Picker
date-time-input
Describes the visualization and behavior of a date and time field with an ISO-8601 value.
Date Time Picker
drop-down-list
Describes the visualization and behavior of a control that is bound to a data source from which it displays a list of corresponding display fields that the user can select to specify the value of the control.
Drop Down List
editor
Describes the visualization and behavior of a multi-line text field.
Editor
email-input
Describes the visualization of a text field that accepts well-formed email addresses.
Email Text Box
integer-input
Describes the visualization and behavior of an integer field.
Numeric Text Box
numeric-input
Describes the visualization and behavior of a numeric field for all supported numeric domains and formats.
Numeric Text Box
numeric-slider
Describes the visualization and behavior of a numeric field for all supported numeric domains and formats entered using a graphic control.
Slider
password-input
Describes the visualization and behavior of a text field that accepts a password with masking support.
Password Text Box
percent-input
Describes the visualization and behavior of a numeric field that represents a percentage value, where the percentage value is the field's value times 100 (e.g., 0.25 * 100).
Percent Text Box
percent-value-input
Describes the visualization and behavior of a numeric field that represents a percentage value, where the percentage value is the field's actual value (e.g., 25.0).
Percent Value Text Box
phone-number-input
Describes the visualization and behavior of a text field that represents a phone number.
Phone Text Box
plain-text
Provides the ability to display any semantic type as a read-only value.
Disabled Text Box (HTML5 text element (read-only))
text-input
Describes the visualization and behavior of a single-line text field.
Text Box
url-input
Describes the visualization and behavior of a text field that accepts well-formed URL values.
Url Text Box
The following table lists each semantic type, its designed behavior, and the available editor types that can represent it, including both the default editor type and compatible alternative editor types that you can select, if any:
Table 2. Default and compatible editor types available for each semantic type
Semantic type
Function
Default editor type
Compatible editor types
Boolean
Two (2) values
check-box
bool-radio-set
Currency
Decimal with currency symbol
With localization override
currency-input
plain-text
text-input
numeric-slider
Date
Date with no time
With localization override
date-input (date only)
plain-text
text-input
calendar
Datetime
Date and time with timezone support
With localization override
date-time-input (with time)
plain-text
text-input
calendar
Email
Text with single @ character delimiter
email-input
plain-text
text-input
Integer
Integer value
With localization override
integer-input
plain-text
text-input
numeric-slider
Internal
Fields marked as internal are not displayed to the user
—
—
Lookup
A value retrieved from a separate data source using a foreign key.
combo-box
drop-down-list
plain-text
Number
Decimal with formatting options (separator, decimal points, etc.)
With localization override
numeric-input
plain-text
text-input
numeric-slider
Password
Text displayed as hidden characters
password-input
plain-text
text-input
Percent
Decimal x 100 (with % sign)
Example: value in database = 0.255, represented as 25.5%
percent-input
plain-text
text-input
numeric-slider
PercentValue
Decimal (with % sign)
Example: value in database = 25.5, represented as 25.5%
percent-value-input
plain-text
text-input
numeric-slider
PhoneNumber
Numbers, alpha characters, parentheses, and dashes
With localization override
phone-number-input
plain-text
text-input
RichText
Multi-line, formatted text
editor
plain-text
text-input
Text
Single line of text
Note: Data Object Services use UTF-8 as the content type.
text-input
plain-text
URL
Click through hyperlink with alternate text
url-input
plain-text
text-input
For OpenEdge Data Object resources, the following table shows the semantic and editor type defaults for each supported OpenEdge ABL field data type:
Table 3. Default semantic and editor types for each ABL field data type
ABL field data type
Semantic type default
Editor type default
CHARACTER
Text
text-input
CLOB
RichText
editor
COM-HANDLE
Number
numeric-input
DATE
Date
date-input
DATETIME or DATETIME-TZ
DateTime
date-time-input
DECIMAL
Number
numeric-input
HANDLE
Number
numeric-input
INT64 or INTEGER
Integer
integer-input
LOGICAL
Boolean
check-box
ROWID
Text
text-input
Note: For more information the support for ABL field data types in Data Object resources, see the information on data type mapping in the Progress Data Objects: Guide and Reference.
Note that OpenEdge allows a table field to be defined as a one-dimensional array values with the specified ABL data type, which can be any primitive field data type, exception CLOB. The data source created for an OpenEdge resource table with an array field contains a separate individual data source field for each item in the original ABL array, where each data source field has the same semantic type as defined for the ABL array. This means that in the Edit Data Source dialog box, you can set a different compatible editor type for each data source array field, based on its semantic type.
The field name that displays in the data source definition for each data source array field conforms to the following convention:
Syntax:
ABLFieldName_idx
Where:
ABLFieldName
Specifies the name of the ABL array field from which each data source array field is derived.
idx
Specifies an integer that is the 1-based index of the ABL array item that this data source array field represents.
Note: This corresponds to OpenEdge ABL array indexes, which are always 1-based.
As with any data source field, you can specify a more useful label for each data source array field than the original ABL field name and idx value represent. For example, for a field named Prize_1, you might specify the label, First Prize.
When the Kendo UI Designer generates the UI for data source array fields, it then displays each field derived from the ABL array as a separate field in any view. This means that it creates a separate column in any grid for each array field, and creates a separate UI component for each array field in any editable form according to the individual array field's editor type. This means, for example, that an array of semantic Text fields can have all odd-numbered fields display as editable (text-input editor type) and all even-numbered fields display as read-only (plain-text editor type).