Rule Editor not work for custom component



Hi Guys,

I've copied and created a new component based on the numeric stepper, the new component is already registered with $.widget, however, most of the features are there except the rule editor not work, and the value is not submitted when submit the form.

I've attached the source code of the new component and appreciate anyone could help give advices.

/** * range slider Widget */ (function ($) { var xfaUtil = xfalib.ut.XfaUtil.prototype; /* * Extending from the numericInput widget to prevent alphabetic characters on key press */ $.widget("xfaWidget.rangeSlider", $.xfaWidget.numericInput, { /* * Name of the widget. This is used as the css class for the wrapper div */ _widgetName : "rangeSlider", /** * Renders the jquery ui spinner and returns that as the user control * @returns {*} */ render : function () { var $userControl = $.xfaWidget.numericInput.prototype.render.apply(this, arguments); /** * If the plugin is compatible with jQuery 2.1.4 (loaded by AF Runtime) and is loaded along with * this file in the same clientlib, then $.<plugin_name> will point to the correct plugin * If the plugin is not compatible with jQuery 2.1.4 and is loaded in the <head> section along with a * different version of jQuery, then you should use window.$.<plugin_name> or if you have namespaced jQuery * use that. * * Returning the jquery element provided by the widget factory. The returned value will be available as * this.$userControl in other functions * */ return  $.ui.spinner(this.options, $userControl).element; }, getOptionsMap : function () { var parentOptionsMap = $.xfaWidget.numericInput.prototype.getOptionsMap.apply(this, arguments); return $.extend({}, parentOptionsMap, { "access" : function (val) { switch (val) { case "open": this.$userControl.spinner("enable"); break; case "readOnly": this.$userControl.spinner("disable"); break; } }, "value" : function (val) { this.$userControl.spinner("value", val); }, "displayValue" : function (val) { // do nothing. We are not controlling display value in this widget } }); }, getCommitValue : function () { return this.$userControl.spinner("value"); }, /** * This function is called when the user focuses on the field. Since we do not change the value of the field * on focus and display, we keep these two functions empty */ showValue : function () { }, showDisplayValue : function () { }, /** * Returns a mapping of events that are triggered by spinner to XFA Events */ getEventMap : function () { var eventMap = $.xfaWidget.numericInput.prototype.getEventMap.apply(this, arguments); return $.extend({}, eventMap, { "spinstop" : xfaUtil.XFA_EXIT_EVENT, "change" : xfaUtil.XFA_CHANGE_EVENT, "onKeyInput.numericInput" : null }); } }); }($));


/* widget.html */ <sly data-sly-include="/libs/fd/af/components/guidesglobal.jsp"/> <sly data-sly-use.guideConstants=""/> <sly data-sly-use.logic="logic.js"> <div class="range-slider center-sm" data-af-widgetname="rangeSlider" data-af-widgetoptions='{"step":${logic.sliderOptions.step},"max":${logic.sliderOptions.max},"min":${logic.sliderOptions.min}}'> <input type="range" id="${}${'_widget'}" value="${logic.value}" value="${logic.defaultValue}" name="${}" min="${logic.minValue}" max="${logic.maxValue}" step="${logic.step}" store="${logic.storeCookie}" class="ui-spinner-input" autocomplete="off" role="spinbutton" tabindex="0" aria-label="Range Slider" /> <ul class="markings"> <li data-sly-repeat.item="${logic.list}" style="width:${item.width @ context='unsafe'}px;">${item.text}</li> </ul> </div> </sly>

Thanks in advance.

Accepted Solutions (1)

Accepted Solutions (1)

Answers (4)

Answers (4)



Hi Sakshi

My intention is not only to change the appearance of existing AEM Form component, moreover, it should be a new component with different usage.

May I know is there any reference document for how to register custom component with $.widget?





Hello James,

You have removed your widget.html, right?

and followed all the steps mentioned in


Create a client library

The sample project generated by the Maven archetype automatically creates required client libraries, and wraps them into a client library with a category af.customwidgets. The JavaScript and CSS files available in theaf.customwidgets are automatically included at runtime.


In the Styling tab, update the CSS class property to add the appearance name in the widget_<widgetName> format. For example: widget_numericstepper