Important

You are browsing documentation for version 6.0 of OroCommerce, supported until 2028. Read the documentation for the latest LTS version 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. It provides a unified API for all input widgets, allowing developers to change or remove widgets without modifying the code that interacts with them.

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

$.fn.inputWidget is a jQuery API that works with both InputWidgetManager and individual input widgets.

Example Usage 

//Create new input widget

var AbstractInputWidget = require('oroui/js/app/views/input-widget/abstract');
var UniformSelectInputWidget = AbstractInputWidget.extend({
    widgetFunctionName: 'uniform',
    refreshOptions: 'update',
    containerClassSuffix: 'select',

    dispose: function() {
        if (this.disposed) {
            return;
        }
        this.$el.uniform.restore();
        UniformSelectInputWidget.__super__.dispose.apply(this, arguments);
    },

    findContainer: function() {
        return this.$el.parent('.selector');
    }
});

//Register widget in InputWidgetManager

var InputWidgetManager = require('oroui/js/input-widget-manager');
InputWidgetManager.addWidget('uniform-select', {
    selector: 'select:not(.no-uniform)',
    Widget: UniformSelectInputWidget
});

//Create widgets for all apllicable inputs

$(':input').inputWidget('create');

/**
* Call function from InputWidget or jQuery.
* See available functions in AbstractInputWidget.overrideJqueryMethods
* Example: will be executed InputWidget.val function, if widget and function exists, or $.val function.
*/
$(':input').inputWidget('val', newValue);

Additional References 

You can find more examples in the codebase: