AEM TouchUI dropdown mandatory validation

In AEM 6.2, there is no mandatory validation for dropdowns in dialogs, when having a “Please select” option in place. This is due to a validation check in the out of the box AEM validator which does a check for “value != null”, which is not the case when having a “Please select” option (value would just be a blank String).

There is currently no other option then implementing a custom validation. This requires the following steps:

  1. Create a new clientlib with the following configuration
    <?xml version="1.0" encoding="UTF-8"?>
    <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
              jcr:primaryType="cq:ClientLibraryFolder"
              categories="[cq.authoring.dialog]"
              dependencies="[_]"/>
  2. Add the following JavaScript to this clientlib. This JS validates all select fields with a specific property set (see step 3)
    /**
     * Fix to allow required select fields.
     *
     * Add validation="select.required" to the field configuration
     *
     * e.g.:
     * <selectField
     *    jcr:primaryType="nt:unstructured"
     *    sling:resourceType="granite/ui/components/foundation/form/select"
     *    validation="select.required">
     */
    (function(window, $) {
      var SELECT_REQUIRED_VALIDATOR = "select.required",
        foundationReg = $(window).adaptTo("foundation-registry");
    
      foundationReg.register("foundation.validation.validator", {
        selector: "select[data-validation='" + SELECT_REQUIRED_VALIDATOR + "'], [data-validation='" + SELECT_REQUIRED_VALIDATOR + "'] select",
        validate: function(el) {
          var value = el.value;
          if (!value || value === '') {
            return "Please fill out this field."
          }
        }
      });
    })(window, jQuery);
  3. To mark select fields as required (and enable this validation), put the property¬†validation=”select.required” on it:
    <selectField
      jcr:primaryType="nt:unstructured"
      sling:resourceType="granite/ui/components/foundation/form/select"
      name="./mySelectField"
      validation="select.required">
       ...
    </selectField>

     

Right-To-Left Keyboard Switch for Granite / Touch UI

In the AEM classic UI, an author entering text in Hebrew can switch the editor to right-to-left mode with the keyboard shortcut ctrl-shift-x.

Unfortunately, this is not possible anymore in AEM’s granite or touch ui. While it sounds strange to create a keyboard shortcut to a touch ui, it is still helpful to have that ability when working from a desktop or laptop computer, so here is a package that implements this functionality:

rte-rtl-switch.zip

This works in both the inline and the full screen rich text editor and has been tested in Internet Explorer, Chrome, Firefox and Safari.

Simply install to you AEM instance using the package manager and the keyboard shortcut works.

enjoy!