Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Rule Editor not work for custom component

Avatar

Avatar
Validate 1
Level 1
james_xu
Level 1

Likes

0 likes

Total Posts

13 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Affirm 1
View profile

Avatar
Validate 1
Level 1
james_xu
Level 1

Likes

0 likes

Total Posts

13 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Affirm 1
View profile
james_xu
Level 1

11-12-2016

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.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Affirm 1
Level 1
nityanandab6270
Level 1

Likes

0 likes

Total Posts

3 posts

Correct Reply

1 solution
Top badges earned
Affirm 1
View profile

Avatar
Affirm 1
Level 1
nityanandab6270
Level 1

Likes

0 likes

Total Posts

3 posts

Correct Reply

1 solution
Top badges earned
Affirm 1
View profile
nityanandab6270
Level 1

30-01-2017

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

sling:resourceSuperType=fd/af/components/guidefield

Answers (4)

Answers (4)

Avatar

Avatar
Validate 1
Level 1
james_xu
Level 1

Likes

0 likes

Total Posts

13 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Affirm 1
View profile

Avatar
Validate 1
Level 1
james_xu
Level 1

Likes

0 likes

Total Posts

13 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Affirm 1
View profile
james_xu
Level 1

12-12-2016

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

Avatar
Boost 1
Level 2
Sakshi1
Level 2

Likes

2 likes

Total Posts

32 posts

Correct Reply

9 solutions
Top badges earned
Boost 1
Affirm 5
Affirm 3
Affirm 1
View profile

Avatar
Boost 1
Level 2
Sakshi1
Level 2

Likes

2 likes

Total Posts

32 posts

Correct Reply

9 solutions
Top badges earned
Boost 1
Affirm 5
Affirm 3
Affirm 1
View profile
Sakshi1
Level 2

12-12-2016

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

Avatar
Validate 1
Level 1
james_xu
Level 1

Likes

0 likes

Total Posts

13 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Affirm 1
View profile

Avatar
Validate 1
Level 1
james_xu
Level 1

Likes

0 likes

Total Posts

13 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Affirm 1
View profile
james_xu
Level 1

12-12-2016

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

Avatar

Avatar
Boost 1
Level 2
Sakshi1
Level 2

Likes

2 likes

Total Posts

32 posts

Correct Reply

9 solutions
Top badges earned
Boost 1
Affirm 5
Affirm 3
Affirm 1
View profile

Avatar
Boost 1
Level 2
Sakshi1
Level 2

Likes

2 likes

Total Posts

32 posts

Correct Reply

9 solutions
Top badges earned
Boost 1
Affirm 5
Affirm 3
Affirm 1
View profile
Sakshi1
Level 2

12-12-2016