Important

You are browsing the documentation for version 4.1 of OroCommerce, OroCRM and OroPlatform, which is no longer maintained. Read version 5.1 (the latest LTS version) of the Oro documentation to get up-to-date information.

See our Release Process documentation for more information on the currently supported and upcoming releases.

Input Widgets

An input widget is a widget used for form elements, such as datepicker, uniform, select2, or others.

An input widget is used to provide a common API for all input widgets. By using this API, you provide the ability to change the input widget to any other or remove it without changing the code that interacts with the widget.

InputWidgetManager is used to register input widgets and create a widget for applicable inputs.

$.fn.inputWidget - is a jQuery API for InputWidgetManager or InputWidget.

Example of usage:

 1 //Create new input widget
 2
 3 var AbstractInputWidget = require('oroui/js/app/views/input-widget/abstract');
 4 var UniformSelectInputWidget = AbstractInputWidget.extend({
 5     widgetFunctionName: 'uniform',
 6     refreshOptions: 'update',
 7     containerClassSuffix: 'select',
 8
 9     dispose: function() {
10         if (this.disposed) {
11             return;
12         }
13         this.$el.uniform.restore();
14         UniformSelectInputWidget.__super__.dispose.apply(this, arguments);
15     },
16
17     findContainer: function() {
18         return this.$el.parent('.selector');
19     }
20 });
21
22 //Register widget in InputWidgetManager
23
24 var InputWidgetManager = require('oroui/js/input-widget-manager');
25 InputWidgetManager.addWidget('uniform-select', {
26     selector: 'select:not(.no-uniform)',
27     Widget: UniformSelectInputWidget
28 });
29
30 //Create widgets for all apllicable inputs
31
32 $(':input').inputWidget('create');
33
34 /**
35 * Call function from InputWidget or jQuery.
36 * See available functions in AbstractInputWidget.overrideJqueryMethods
37 * Example: will be executed InputWidget.val function, if widget and function exists, or $.val function.
38 */
39 $(':input').inputWidget('val', newValue);

Your can see more examples in code: