如何在 cq 对话框中动态使用下拉元素更改选项？

Question

我想编写一个 AEM 组件，我想在其中添加一些元素。在一个组件中，我想添加三个不同的选项，我想动态更改此选项。

实际上，我尝试将部分代码添加到我的 cq_dilog.xml，但问题是我有三个下拉选项可供选择，但我无法更改触发器元素。

<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
          xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
          jcr:primaryType="nt:unstructured" jcr:title="Text"
          sling:resourceType="cq/gui/components/authoring/dialog">
    <content jcr:primaryType="nt:unstructured"
             sling:resourceType="granite/ui/components/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <column jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <title jcr:primaryType="nt:unstructured"
                           fieldLabel="Trigger"
                           sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
                           filedDescription="URL to the page you will linked to."
                            name="./title"/>
                    <type
                            sling:resourceType="granite/ui/components/foundation/form/select"
                            fieldLabel="Type" name="./type"
                            jcr:primaryType="nt:unstructured">
                        <items jcr:primaryType="nt:unstructured">
                            <option1 jcr:primaryType="nt:unstructured" text="Download" />
                            <option2 jcr:primaryType="nt:unstructured" text="Link" />
                            <option3 jcr:primaryType="nt:unstructured" text="Add" />
                        </items>
                    </type>
                </items>
            </column>
        </items>
    </content>
</jcr:root>

Answer 1

我在您的示例中看到您将旧的 Coral2 小部件（granite/ui/components/foundation/..）与较新的 Coral3 小部件（granite/ui/components/ coral /foundation/..）混合在一起。

如果您正在使用 Coral2 但考虑完全迁移到 Coral3（更多信息请点击此处），Oliver 提供的文章很有用，在这种情况下，有一个不同但在我看来更好更清晰的系统。概念是一样的，但实现已经改变了。

下面是 XML 中的实现：

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Properties"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
        <items jcr:primaryType="nt:unstructured">
            <column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <text
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                        fieldLabel="Text"
                        name="./text"/>
                    <dropdown
                        granite:class="cq-dialog-dropdown-showhide"
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/select"
                        fieldLabel="Dropdown"
                        name="./dropdown">
                        <granite:data
                            jcr:primaryType="nt:unstructured"
                            cq-dialog-dropdown-showhide-target=".option-showhide-target"/>
                        <items jcr:primaryType="nt:unstructured">
                            <no-option
                                jcr:primaryType="nt:unstructured"
                                text="No option"
                                value="no-option"/>
                            <option
                                jcr:primaryType="nt:unstructured"
                                text="Option"
                                value="option"/>
                        </items>
                    </dropdown>
                    <dynamic-option
                        granite:class="hide option-showhide-target"
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                        text="Dynamic option">
                        <granite:data
                            jcr:primaryType="nt:unstructured"
                            showhidetargetvalue="option"/>
                    </dynamic-option>
                </items>
            </column>
        </items>
    </content>
</jcr:root>

以下是重要部分：

1. 下拉节点的 Granite:class 属性启用动态显示/隐藏功能
2. 在cq-dialog-dropdown-showhide-target该物业granite:data的下节点dropdown节点定义负责切换的动态字段的自定义类（这里我用的.option-showhide-target，但你可以叫它任何你想要的）
3. 该granite:class目标节点（的dynamic-option在我们的例子）告诉我们什么领域类（步骤2中的自定义类），它的显示/隐藏行为结合。
4. 在showhidetargetvalue该物业granite:data我们的目标节点定义其下拉（基于价值属性）项目下的节点将切换显示/隐藏行为。

这是 CRXDE 中结构的屏幕截图：

这是结果的 GIF：