带有布尔表达式的AEM XML必填属性。

问题描述 投票:0回答:1

我想知道,在勾选 "图片是装饰性的 "时,是否可以将alt文字设置为非强制性的?我使用的是AEM 6.5,下面是代码。

<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}" />

我知道AEM支持以下表达式 required="{Boolean} true" 或干脆 required="false". 我已经尝试过(如上图所示 required="${not empty cqDesign.isDecorative ? false : cqDesign.isDecorative}"但id不工作。

xml aem
1个回答
2
投票

@Michal - 你需要写下js代码,它应该在创作时加载(extraClientlibs),并在复选框更改时,更新alt文本文件(mandatorynon),示例在这里

(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);
© www.soinside.com 2019 - 2024. All rights reserved.