Customizing Configurator UI widgets

Widgets are used to determine how the option classes and option items are displayed and behave in the Configurator UI. You can modify an existing widget or add a new widget.

IBM® Sterling™ Omni-Configurator supports the following choice of UI widgets. The Multiple Selection and Single Selection generic widgets have some recommended widgets associated with them.

Multiple Selection
- Check box (This is the default UI recommended widget for multiple selection UI widget).
- Multi-select List box
- Multi-select Tabular Display
Single Selection
- List box
- Drop down list
- Radio button (This is the default UI recommended widget for single selection UI widget).
- Single-select Tabular Display
Tabular Display
Dynamic Instantiation
Display All Children
User Entered Values

When Modelers are creating the model for configurations, they determine which widget is used for an option class by selecting it from the UI Control and UI Recommended Control drop-down lists on the Display tab of the option class detail page.

Each widget corresponds to a HTML page and the behavior of the option items. This correspondence is defined in the Configurator_UI\web\app\configurator\configurator.provider.js mapping file.

Following is a sample entry defined in the configurator.provider.js file:

  "v2:single-select": {
                            "default": "v2:radioButton",
                            "artifacts": {
                                "v2:listbox": "app/configurator/widgets/singlelistbox.widget.html",
                                "v2:dropDownList": "app/configurator/widgets/dropdownlist.widget.html",
                                "v2:radioButton": "app/configurator/widgets/radio.widget.html",
                                "v2:singleSelectTabularDisplay": "app/configurator/widgets/singletabdisplay.widget.html"
                            }
                        }

In the sample entry above, for single select UI widget, the default UI recommended widget is radio button and each UI recommended widget has a widget HTML file associated with it, which is used to render the option class in the Configurator UI.

You can use the AngularJS provider, configuratorConfig to extend the widget mapping configurations. The provider offers the following configuration methods:

Configuration method to extend widget mapping configurations by template name for new Omni-Configurator widgets
The extendWidgetsForTemplateV2 (aTemplateName, aWidgets) method can be used to extend the widget mapping configurations for Omni-Configurator templates. This method will extend the default widget mapping configuration. If the widget mapping configuration already exists, the new configuration overrides the default configuration, else a new widget mapping configuration is added to the default configuration.
Configuration method to extend widget mapping configurations by template name for legacy Configurator widgets
The extendWidgetsForTemplate (aTemplateName, aWidgets) method can be used to extend the widget mapping configurations for legacy Configurator templates. This method will extend the default widget mapping configuration. If the widget mapping configuration already exists, the new configuration overrides the default configuration, else a new widget mapping configuration is added to the default configuration.

A sample widget mapping configuration is provided in the following code snippet:

* Sample aTemplateName widget mapping configuration
           {
                <widget-name>: {
                       "default": <artifact-name>,
                       "artifacts": {
                             <artifact-name>: <artifact-file>,
                        }
                },
            }