Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Rule Editor not work for custom component

Avatar

Level 2

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="com.adobe.aemds.guide.utils.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="${logic.id}${'_widget'}" value="${logic.value}" value="${logic.defaultValue}" name="${logic.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.

1 Accepted Solution

Avatar

Correct answer by
Level 1

I think you need to extend AEM guide field component by adding a property

sling:resourceSuperType=fd/af/components/guidefield

View solution in original post

5 Replies

Avatar

Level 2

I've followed this instruction, however, the rendering of widget seems doesn't work, and the $userControl also couldn't be applied.

Avatar

Level 3

Hello James,

You have removed your widget.html, right?

and followed all the steps mentioned in https://helpx.adobe.com/aem-forms/6-2/custom-appearance-widget-adaptive-form.html

including

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.

and

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

 

Avatar

Level 2

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?

 

Cheers

Avatar

Correct answer by
Level 1

I think you need to extend AEM guide field component by adding a property

sling:resourceSuperType=fd/af/components/guidefield