AEM XML required property with boolean expression

user_10768519 0
Viewed 310

I would like to know, if it is possible to set alt text not to be mandatory, while "Image is decorative" is checked? I am working with AEM 6.5, here is the code.

<decorative jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/checkbox" checked="${not empty cqDesign.isDecorative ? cqDesign.isDecorative : false}" fieldDescription="Check if the image should be ignored by assistive technology and therefore does not require an alternative text. This applies to decorative images only."
  name="./isDecorative" text="Image is decorative" uncheckedValue="false" value="{Boolean}true" />
  
<alt jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/textfield" fieldDescription="For visually impaired users using screen readers. Describe the functionality of the image or what you see in the image. Don't include 'image of', 'picture of', etc. If the image is purely graphical, select 'Image is decorative'."
  fieldLabel="Alt text" name="./alternativeText" required="${not empty cqDesign.isDecorative ? false : cqDesign.isDecorative}" />

I know that AEM supports expressions like required="{Boolean} true" or simply required="false". I have tried (as visible above) required="${not empty cqDesign.isDecorative ? false : cqDesign.isDecorative}", but id doesn't work.

aem xml
1 Answers

@Michal - you need to write down js code for this, it should be loaded while authoring (extraClientlibs) and on check box change, update alt text filed(mandatory/non) and sample is here- 

(function(document, $, Coral) {
    "use strict";

    // when dialog gets injected
    $(document).on("foundation-contentloaded", function(e) {
        // if there is already an initial value make sure the according target element becomes visible
        makeMandatoryAAlt($(".makemandatory", e.target));

    });

    // To mandatory/non figure
    $(document).on("change", ".makemandatory", function(e) {
        makeMandatoryAlt($(this));
    });

    // Mandatory or Non Alt
    function makeMandatoryAlt(el) {
         el.each(function(i, element) {
              if ($(element).prop('checked')){
                  //making mandatory.
                  $("[name='./altText']").attr('required',true);
              } else {
                  //making not mandatory.
                  $("[name='./altText']").removeAttr('required');
                  $("[name='./altText']").removeAttr('aria-invalid');
                  $("[name='./altText']").removeAttr('aria-required');
                  $("[name='./altText']").removeAttr('invalid');
              }
        })
    }

})(document,Granite.$,Coral);
user_17385620
Related