AEM 6对话框中的条件显示/隐藏字段 [英] Conditional show / hide of fields in AEM 6 dialogs

问题描述

我正在使用一个简单的创作对话框来构建一个相对简单的AEM组件。我的对话框顶部是一个选择字段。我希望当此选择字段设置为特定项目时对话框中的某些字段消失。

我研究了Foundation Carousel组件的实现，该组件使用 cq-dialog-dropdown-showhide-target 属性，这很好，但并不是我要寻找的逻辑。此处使用的逻辑是：

如果选择等于X，则显示此字段

我正在尝试实现：

如果选择等于X，Y或Z，则隐藏此字段，否则将其显示

还有其他人在他们的对话框中无法实现这种逻辑吗？

谢谢！ / p>

戴夫

解决方案

对于TouchUI对话框，实际上没有插件注册表在ExtJS框架中大量使用。这次，我们实际上可以仅使用clientlib和jQuery来完成所有的魔术操作。

看看您所引用的基本实现此处： /libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide.js

这是一个附属于 cq.authoring.dialog 类别的clientlib，并且需要 granite.jquery 进行初始化。请参阅客户端库文档以了解有关此内容的更多信息。脚本本身是一个匿名函数，可使用document参数和来自花岗岩的jQuery调用该匿名函数（请参见脚本的最后一行：}）（document，Granite。$）; ）

如果给定的功能不足以满足您的需求，则可以使用类似的简单javascript函数创建自己的clientlib，以处理更复杂的条件。另请注意，放置在窗口小部件节点中的任何属性都将作为数据属性放置在结果html中。

对于该节点（例如 / libs / foundation / components / carousel / cq：dialog / content / items / list / items / column / items / orderBy ），您希望在某些情况发生时隐藏该地方属性：hideWhen = children，搜索（不要将其设置为数组，因为它不会在JS中正确转换为字符串）。指向一个下拉选择器（ / libs / foundation / components / carousel / cq：dialog / content / items / list / items / column / items / listForm @ cq-dialog-dropdown-hidefor-target ）分配给您要分配给可隐藏字段的适当类。

  | -listFrom（选择）
 | |--@cq-dialog-dropdown-hidefor-target=.orderByClass 
 | 
 orderBy（自动完成）
 |-@ hideFor = children，搜索
 |-@ class = orderByClass 
  

您的案例的javascript方法可能类似于：

 （function（ document，$）{
 use strict; 
 
 // //注入对话框时
 $（document）.on（ foundation-contentloaded，function（e）{ 
 //如果已经有一个初始值，请确保相应的目标元素变为可见
 showHide（$（。cq-dialog-dropdown-showhide，e.target））; 
 }）; 
 
 $（document）.on（ selected， .cq-dialog-dropdown-showhide，function（e）{
 showHide（$（this））; 
}）; 
 
函数showHide（el）{
 var widget = el.data（ select）; 
 
 if（widget）{ 
 
 //获取选择器以找到目标元素，将其存储为data- ..属性
 var target = el.data（ cqDialogDropdownHideforTarget）; 
 
 //获取选定的值
 var value = widget.getValue（）; 
 
 //确保所有未选择的目标元素都被隐藏。 
 var hideFor = $（target）.data（'hidefor'）。split（'，’）; 
 
 $（target）.not（。hide）。addClass（ hide）; 
 
 //取消隐藏包含所选值的目标元素作为data-showhidetargetvalue属性
 if（hideFor.indexOf（value）== -1）{
 $ {target） .removeClass（ hide）; 
} 
} 
} 
  

隐藏存在一些问题在这种情况下输入标签，因此最好将字段包装到该部分（granite / ui / components / foundation / well）

I am building a relatively straight-forward AEM component with a simple authoring dialog. At the top of my dialog is a select field. I want certain fields in my dialog to disappear when this select field is set to a specific item.

I have studied the implementation of the Foundation Carousel component, which uses the cq-dialog-dropdown-showhide-target attribute, which is fine, but isn't quite the logic I am looking for. The logic used there is:

show this field if the select is equal to X

Whereas I am trying to implement:

hide this field if the select is equal to X, Y or Z, otherwise show it

Has anyone else had trouble implementing this kind of logic in their dialogs?

Thank you in advance!

Dave

解决方案

For TouchUI dialogs there is actually no plugin registry that was heavily used in ExtJS framework. This time, we can actually do all the magic with the use of just clientlibs and jQuery.

Take a look at the base implementation that you are refering to that can be found here: /libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide.js

This is a clientlibs that is attached to cq.authoring.dialog category and requires granite.jquery to be initialized before. See clientlibs documentation to learn more about it. The script itself is a anonymous function that is invoked with a document parameter and jQuery from granite (see last line in the script: })(document,Granite.$);)

If given functionality is not sufficent for you, you can create your own clientlib with a similar simple javascript function that will handle more sophisticated conditions. Please also note, that any attribute placed in the "widget" node will be placed as data attribute in resulting html.

For the node (e.g. /libs/foundation/components/carousel/cq:dialog/content/items/list/items/column/items/orderBy) that you want to hide when some condition occurs place property: hideWhen=children,search (don't make it an array as it won't be properly casted to a string in JS). Point a dropdown selector (/libs/foundation/components/carousel/cq:dialog/content/items/list/items/column/items/listForm@cq-dialog-dropdown-hidefor-target) to a proper class that you will on the other hand assign to your hideable field.

|-listFrom(select)
| |--@cq-dialog-dropdown-hidefor-target=.orderByClass
|
orderBy(autocomplete)
  |--@hideFor=children,search
  |--@class=orderByClass

The javascript method for your case could look something like that:

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

    // when dialog gets injected
    $(document).on("foundation-contentloaded", function(e) {
        // if there is already an inital value make sure the according target element becomes visible
        showHide($(".cq-dialog-dropdown-showhide", e.target))  ;
    });

    $(document).on("selected", ".cq-dialog-dropdown-showhide", function(e) {
        showHide($(this));
    });

   function showHide(el){
       var widget =  el.data("select");

       if (widget) {

           // get the selector to find the target elements. its stored as data-.. attribute
           var target = el.data("cqDialogDropdownHideforTarget");

           // get the selected value
           var value = widget.getValue();

           // make sure all unselected target elements are hidden.
           var hideFor = $(target).data('hidefor').split(',');

           $(target).not(".hide").addClass("hide");

           // unhide the target element that contains the selected value as data-showhidetargetvalue attribute
           if (hideFor.indexOf(value) == -1) {
               $(target).removeClass("hide");
           }
       }
   }

There are some issues with hiding input labels in such case so it might be good idea to wrap the field into the section (granite/ui/components/foundation/well)

这篇关于AEM 6对话框中的条件显示/隐藏字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！