Create custom appearances in HTML5 forms create-custom-appearances-in-html-forms
You can plug in custom widgets to a Mobile Forms. You can extend existing jQuery Widgets or develop your own custom widgets using appearances framework. XFA engine uses various widgets, see Appearance framework for adaptive and HTML5 forms for detailed information.
An example of default and custom widget
Integrating custom widgets with HTML5 forms integrating-custom-widgets-with-html-forms
Create a profile create-a-profile-nbsp
You can create a profile or choose an existing profile to add a custom widget. For more information on creating profiles, see Creating custom Profile.
Create a widget create-a-widget
HTML5 forms provide an implementation of the widget framework that can be extended to create new widgets. The implementation is a jQuery widget abstractWidget that can be extended to write a new widget. The new widget can be made functional only by extending/overriding the below mentioned functions.
To create your own widget, in the profile created above, include references of the JavaScript file which contains overridden functions and newly added functions. For example, the sliderNumericFieldWidget is a widget for numeric Fields. To use the widget in your profile in the header section, include the following line:
window.formBridge.registerConfig("widgetConfig" , widgetConfigObject);
Register custom widget with XFA Scripting Engine register-custom-widget-with-xfa-scripting-engine-nbsp
When the custom widget code is ready, register the widget with the scripting engine by using registerConfig
API for Form Bridge. It takes widgetConfigObject as input.
window.formBridge.registerConfig("widgetConfig",
{
".<field-identifier>":"<name-of-the-widget>"
}
);
widgetConfigObject widgetconfigobject
The widget configuration is provided as a JSON object (a collection of key value pairs) where the key identifies the fields and value represents the widget to use with those fields. A sample configuration looks like:
*{*
*"identifier1" : "customwidgetname",
"identifier2" : "customwidgetname2",
..
}*
where “identifier” is a jQuery CSS selector that represents a particular field, a set of fields of a particular type, or all fields. The following lists the value of the identifier in different cases: