web-dev-qa-db-ja.com

AEM6ダイアログのフィールドの条件付き表示/非表示

単純なオーサリングダイアログを使用して、比較的単純なAEMコンポーネントを構築しています。ダイアログの上部には選択フィールドがあります。この選択フィールドが特定の項目に設定されている場合、ダイアログの特定のフィールドを非表示にします。

cq-dialog-dropdown-showhide-target属性を使用するFoundationCarouselコンポーネントの実装を研究しましたが、これは問題ありませんが、私が探しているロジックではありません。そこで使用されるロジックは次のとおりです。

selectがXに等しい場合は、このフィールドを表示します

私が実装しようとしているのに対し：

selectがX、Y、またはZと等しい場合はこのフィールドを非表示にし、それ以外の場合は表示します

他の誰かがダイアログにこの種のロジックを実装するのに問題がありましたか？

前もって感謝します！

デイブ

aem
12
Darve

TouchUIダイアログの場合、ExtJSフレームワークで頻繁に使用されたプラグインレジストリは実際にはありません。今回は、clientlibsとjQueryだけを使用して、実際にすべての魔法を実行できます。

ここで見つけることができるあなたが参照している基本的な実装を見てください：_/libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide.js_

これは、_cq.authoring.dialog_カテゴリに関連付けられているclientlibsであり、_granite.jquery_を事前に初期化する必要があります。詳細については、 clientlibsドキュメント を参照してください。スクリプト自体は、ドキュメントパラメータと花崗岩からのjQueryで呼び出される無名関数です（スクリプトの最後の行を参照してください：})(document,Granite.$);）

指定された機能では不十分な場合は、より高度な条件を処理する同様の単純なjavascript関数を使用して独自のclientlibを作成できます。また、「ウィジェット」ノードに配置された属性はすべて、結果のhtmlのデータ属性として配置されることに注意してください。

何らかの条件が発生したときに非表示にするノード（例：_/libs/foundation/components/carousel/cq:dialog/content/items/list/items/column/items/orderBy_）の場合は、プロパティを配置します：hideWhen = children、search（JSの文字列に適切にキャストされないため、配列にしないでください） 。ドロップダウンセレクター（_/libs/foundation/components/carousel/cq:dialog/content/items/list/items/column/items/listForm@cq-dialog-dropdown-hidefor-target_）を、非表示のフィールドに割り当てる適切なクラスにポイントします。

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

あなたのケースのjavascriptメソッドは次のようになります。

_ (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");
           }
       }
   }
_

このような場合、入力ラベルを非表示にすることにはいくつかの問題があるため、フィールドをセクション（granite/ui/components/Foundation/well）にラップすることをお勧めします。

6
Mateusz Chromiński