在Touch UI cq对话框上禁用文本字段

Posted 2021-04-18

我想在加载cq对话框时调用JS函数来验证某个字段是否已经存在，如果是，则从版本中禁用它。我尝试过验证但是在用户与字段交互后调用它，我需要一种方法在加载之前完成它。可能吗？

<id
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
   fieldLabel="ID"
   validation="is_empty" // DO THIS WHEN IS LOADED
   name="./id"
   required="{Boolean}true"/>

答案

我可以想办法使用cq.authoring.dialog clientlib和jQquery实现这一目标

• 创建一个类别为cq.authoring.dialog的clientlib。此clientlib中的脚本仅加载到author instance中。
• 使用granite:class属性在文本字段中添加一个类，这是使用上面的clientlib中的脚本挂钩到文本字段

          <id
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
            fieldLabel="ID"
            granite:class="readonlySelector"
            name="./id"
            required="{Boolean}true"/>

• 您必须在dialog.xml中包含以下命名空间才能使用granite:class。 xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
• 注意上面在DOM中注册的类名

• 使用像foundation-contentloaded这样的OOTB花岗岩事件监听器之一来启动对话框初始化时的脚本。您可以使用更窄的事件，查看granite documentation以获取更多活动
• 使用Coral UI Textfield documentation查找支持的属性。支持disabled和readonly。将此代码放在cq.authoring.dialog clientlib中。

$(document).on('foundation-contentloaded', function (e) {//event fires when dialog loads
    var $textField = $('.readonlySelector');
    if ($textField.val()) {//truthy check
        $textField.prop('disabled', true);//Greys the field
        $textField.prop('readonly', true);
    }
})

• 灰色和残疾