Create custom appearances for adaptive form fields

Execute the following command to create a local project based on Maven archetype:

mvn archetype:generate -DarchetypeRepository=https://repo1.maven.org/maven2/com/adobe/ -DarchetypeGroupId=com.adobe.aemforms -DarchetypeArtifactId=custom-appearance-archetype -DarchetypeVersion=1.0.4

It prompts you to specify values for the following parameters.
The values used in this sample are highlighted in bold.

Define value for property 'groupId': com.adobe.afwidgets

Define value for property 'artifactId': customWidgets

Define value for property 'version': 1.0.1-SNAPSHOT

Define value for property 'package': com.adobe.afwidgets

Define value for property 'artifactName': customWidgets

Define value for property 'packageGroup': adobe/customWidgets

Define value for property 'widgetName': numericStepper

Navigate to the customWidgets (specified value for the artifactID property) directory and execute the following command to generate an Eclipse project:

mvn eclipse:eclipse

Open the Eclipse tool and do the following to import the Eclipse project:

1. Select File > Import > Existing Projects into Workspace.

2. Browse and select the folder where you executed the archetype:generate command.

3. Click Finish.

   

Select the widget to be used for the custom appearance. This sample uses the following numeric stepper widget:

https://www.jqueryscript.net/form/User-Friendly-Number-Input-Spinner-with-jQuery-Bootstrap.html

In the Eclipse project, review the plug-in code in the plugin.js file to ensure that it matches the requirements for the appearance. In this sample, the appearance fulfills the following requirements:

• The numeric stepper should extend from - $.xfaWidget.numericInput.

• The set value method of the widget sets the value after the focus is on the field. It is a mandatory requirement for an adaptive form widget.

• The render method needs to be overridden to invoke the bootstrapNumber method.

• There is no additional dependency for the plugin other than the main source code of the plugin.

• The sample does not perform any styling on the stepper, so no additional CSS is required.

• The $userControl object should be available to the render method. It is a field of the text type which is cloned with the plugin code.

• The + and - buttons should be disabled when the field is disabled.

Replace the contents of the bootstrap-number-input.js (jQuery plugin) with the content of the numericStepper-plugin.js file.

In the numericStepper-widget.js file, add the following code to override the render method to invoke the plugin and return the $userControl object:

render : function() {
     var control = $.xfaWidget.numericInput.prototype.render.apply(this, arguments);
     var $control = $(control);
     var controlObject;
     try{
         if($control){
         $control.bootstrapNumber();
         var id = $control.attr("id");
         controlObject = $("#"+id);
         }
     }catch (exc){
          console.log(exc);
     }
     return controlObject;
}

In the numericStepper-widget.js file, override the getOptionsMap property to override the access option, and hide the + and - buttons in disabled mode.

getOptionsMap: function(){
    var parentOptionsMap = $.xfaWidget.numericInput.prototype.getOptionsMap.apply(this,arguments),

    newMap = $.extend({},parentOptionsMap,

     {

           "access": function(val) {
           switch(val) {
              case "open" :
                this.$userControl.removeAttr("readOnly");
                this.$userControl.removeAttr("aria-readonly");
                this.$userControl.removeAttr("disabled");
                this.$userControl.removeAttr("aria-disabled");
                this.$userControl.parent().find(".input-group-btn button").prop('disabled',false);
                break;
              case "nonInteractive" :
              case "protected" :
                this.$userControl.attr("disabled", "disabled");
                this.$userControl.attr("aria-disabled", "true");
                this.$userControl.parent().find(".input-group-btn button").prop('disabled',true);
                break;
             case "readOnly" :
                this.$userControl.attr("readOnly", "readOnly");
                this.$userControl.attr("aria-readonly", "true");
                this.$userControl.parent().find(".input-group-btn button").prop('disabled',true);
                break;
            default :
                this.$userControl.removeAttr("disabled");
                this.$userControl.removeAttr("aria-disabled");
                this.$userControl.parent().find(".input-group-btn button").prop('disabled',false);
                break;
          }
       },
   });
   return newMap;
 }

Save the changes, navigate to the folder containing the pom.xml file, and execute the following Maven command to build the project:

mvn clean install

Install the package using AEM Package Manager.

Open the adaptive form in edit mode on which you want to apply the custom appearance and do the following:

1. Right-click the field on which you want to apply the appearance and click Edit to open the Edit Component dialog.

2. In the Styling tab, update the CSS class property to add widget_numericStepper.