Modifying default presentation of individual fields on forms

To modify the default presentation of an individual field on an object form you need to go to the presentation properties of the corresponding attribute and click on the “Advanced” property. There is only one script available for you here.

As explained in the “Architecture of the client-side code” the controller of the form prepares the HTML markup of the form as well as the list of Kendo UI widgets that the form includes. Apart from other things the markup of the form contains markups of individual fields present on the form. And the collection of widgets for the form includes widgets used by individual fields (note that not all fields use widgets, some use markup only). Each type of field on the form is represented by its own Aware IM Javascript object (see the table below).

The form controller asks every individual field on the form to prepare its markup and the collection of widgets. Then it assembles the result into the final markup and widget collection of the form. The script for each indivisual field is executed just before it is given to the form controller, so that the script has a chance to modify the markup or widget configuration.

There are three objects exposed to the script:

  • “field” – this is Aware IM object representing the field (see the table below)
  • “markup” – this is the HTML markup of the field (jQuery object)
  • “config” – this is the object that represents a widget configuration of the field or null if the field does not use a widget. The object has the following properties:
    • “type” – type of the widget
    • “id” – the id of the element in the markup used by the widget
    • “config” – the Kendo UI configuration of the widget

You can modify modify any of these object. For example, if you want to hide the field you can write the following script:

markup.css ("display, "none");

Or if you want to change which tools are available for an HTML editor field (see http://docs.telerik.com/kendo-ui/api/javascript/ui/editor#configuration-tools ), you could write the following script:

config.config.tools = ["bold", "italic", "underline"]

There are some useful methods of the “field” object that you can use in your script (the code of all all the objects representing different fields is in AwareIM/Tomcat/webapps/AwareIM/aware_kendo/field/fields.js file.

  • field.getAttributeName () – retrieve the name of the object attribute
  • field.getObjectName () - retrieve the name of the object
  • field.getObjectId () – retrieve the id of the object

and so on.

Note that if you want to access the field after it has already been drawn you need to find the field on the form and so you need to modify the “render” script of the form, like so, for example:

var field = parser.getField ("Account", "Main");
var value = field.getValue ();

The following table lists all different field types and the corresponding Kendo UI widgets.

Aware IM attribute typeKendo UI widget Aware IM field object
Plain Text (no choices, 1 line)NoneAwareApp_TextField
Plain Text (no choices, several lines)NoneAwareApp_TextAreaField
Plain Text, Number, Date with radio or checkbox choices NumericText Box
(http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox )
AwareApp_NumberField
Plain Text, Number, Date with text choices, choices not editableDropDownList
(http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist )
AwareApp_ComboField
Plain Text, Number, Date with text choices, choices editableComboBox
(http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox)
AwareApp_ComboField
Date without choicesDatePicker
(http://docs.telerik.com/kendo-ui/api/javascript/ui/datepicker )
AwareApp_DateField
Timestamp DateTimePicker
http://docs.telerik.com/kendo-ui/api/javascript/ui/datetimepicker
AwareApp_DateTimeField
Yes/No (displayed as checkbox)NoneAwareApp_CheckboxField
Yes/No (displayed as a switch)Switch
http://docs.telerik.com/kendo-ui/api/javascript/mobile/ui/switch
AwareApp_SwitchField
Plain Text with choices represented as checkboxesNoneAwareApp_CheckboxGroupField
Plain Text with choices represented as radio buttonsNoneAwareApp_RadioButtonGroupField
PlainText with multi-selectorMultiSelect
http://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect
AwareApp_TagField
PlainText with HTML formatEditor
http://docs.telerik.com/kendo-ui/api/javascript/ui/editor
AwareApp_HtmlEditorField
DocumentUpload
http://docs.telerik.com/kendo-ui/api/javascript/ui/upload
AwareApp_DocumentField
Picture (not represented as signature)Upload
http://docs.telerik.com/kendo-ui/api/javascript/ui/upload
AwareApp_PictureField
Picture (represented as signature)NoneAwareApp_SignatureField
ShortcutNoneAwareApp_ShortcutField
Reference represented by a drop downDropDownList
http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist
AwareApp_SelectReferenceField
Reference represented by a multi-selectorMultiSelect
http://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect
AwareApp_TagReferenceField
Reference represented by a “swap select”NoneAwareApp_SwapSelectField
HTML cellNoneAwareApp_HtmlFiield
Gauge cell (linear)LinearGauge
http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/lineargauge
AwareApp_GaugeField
Gauge cell (radial)RadialGauge
http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/radialgauge
AwareApp_GaugeField
Google Map cellNoneAwareApp_GoogleMapField
Number displayed as sliderSlider
http://docs.telerik.com/kendo-ui/api/javascript/ui/slider
AwareApp_SliderField
  • Last modified: 2023/04/05 07:05