如何在授权用户界面中创建向导并在AEM中的Coral UI html中设计向导

Z时代
2024-01-10
分类：问答

由于我是AEM开发的新手，所以我想知道如何在AEM中创建向导以及如何使用珊瑚UI设计向导。正如我创建的向导一样，它包含两个步骤视图：

               source  --->   select

我设计了这两个步骤的向导，每个步骤都必须显示不同的项目。这个步骤不过是我的createfragment页面下的节点。

1） 来源： 我有两个单选按钮，可以假设选择男女之类的性别。我已经为源创建了节点，并在源项下创建了两个单选按钮。

功能：通过选中的单选按钮，我必须打开下一个容器，其中包含其他项，例如名称，地址。在向导的男性和女性选项下，我有不同的项目，因此根据性别的选择，向用户显示特定值的容器。使用源代码时，用户只需要选择1个单选按钮，然后根据所选值，用户将显示来自选定节点项的项目，如雄形和雌形。

2） 选择：

此节点应在项目下包含两个子节点，并且此表单根据用户选择具有不同的功能。我想在选择男性单选按钮时显示项目（男性形式）中的第一个节点，而在女性选择中显示（女性形式）第二个节点项目。

我的Node结构就像：

+ wizard - sling:resourceType = "granite/ui/components/coral/foundation/wizard" - items + source - sling:resourceType = "granite/ui/components/foundation/container" - items + male - sling:resourceType ="granite/ui/components/foundation/form/radio" - name:gender - value:male + female - sling:resourceType ="granite/ui/components/foundation/form/radio" - name:gender - value:female + select - sling:resourceType = "granite/ui/components/foundation/container" - items + maleform - sling:resourceType ="granite/ui/components/foundation/form/text" + femaleform - sling:resourceType ="granite/ui/components/foundation/form/text"

根据用户选择，我想呈现两个不同页面上的两个单独的表单组件。

例如：如果用户选择了男性单选按钮，我想显示男性形式，而女性则类似。

请帮助我，因为我必须在 UI 渲染两个不同的页面。 *

回答：

如果能够确定是否在服务器端显示面板，则可以使用granite/ui/components/foundation/renderconditions/simple小部件检查条件。查询默认的AEM安装以获取示例，条件是在节点的expression属性中设置的granite:rendercondition。此示例检查QueryString，但是您可以检查其他内容，例如使用表达式语言（EL）的后缀，例如：${requestPathInfo.suffix

== "/my/suffix"}。

<wizard>
    <items jcr:primaryType="nt:unstructured">
        ...
        <male
            jcr:primaryType="nt:unstructured"
            jcr:title="Male"
            sling:resourceType="granite/ui/components/coral/foundation/wizard/lazycontainer"
            src="...">
            <parentConfig jcr:primaryType="nt:unstructured">
                <next
                    granite:class="foundation-wizard-control"
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/button"
                    disabled="{Boolean}true"
                    text="Next"
                    variant="primary">
                    <granite:data
                        jcr:primaryType="nt:unstructured"
                        foundation-wizard-control-action="next"/>
                </next>
            </parentConfig>
            <granite:rendercondition
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/renderconditions/simple"
                expression="${querystring == &quot;gender=male&quot;}"/>
        </male>
        <female
            jcr:primaryType="nt:unstructured"
            jcr:title="Female"
            sling:resourceType="granite/ui/components/coral/foundation/wizard/lazycontainer"
            src="...">
            <parentConfig jcr:primaryType="nt:unstructured">
                <next
                    granite:class="foundation-wizard-control"
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/button"
                    disabled="{Boolean}true"
                    text="Next"
                    variant="primary">
                    <granite:data
                        jcr:primaryType="nt:unstructured"
                        foundation-wizard-control-action="next"/>
                </next>
            </parentConfig>
            <granite:rendercondition
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/renderconditions/simple"
                expression="${querystring == &quot;gender=female&quot;}"/>
        </femail>
    </items>
</wizard>

否则，在客户端，您可以简单地使用JavaScript显示和隐藏窗口小部件。在向导中，两个小部件不一定需要是两个不同的步骤。实际上，如果不这样做可能会更好，这样向导进度指示器将仅显示一个步骤，您可以在该步骤中更改显示。

CSS开始隐藏的字段：

.gender-male-fieldset, .gender-female-fieldset {
    display: none;
}

对话框打开时运行的JavaScript，单击单选按钮时显示/隐藏字段集。这是一个简单的示例，您可以编写一些更可重用的东西：

$(document).on("dialog-ready", function() {
    var $maleRadio = $('.gender-male-radio'),
        $femaleRadio = $('.gender-female-radio'),
        $maleFieldset = $('.gender-male-fieldset'),
        $femaleFieldset = $('.gender-female-fieldset');
    $maleRadio.click(function(){
      $maleFieldset.show();
      $femaleFieldset.hide();
    })
    $femaleRadio.click(function(){
      $maleFieldset.hide();
      $femaleFieldset.show();
    })
});

触摸UI对话框，带有用于男性和女性的单选按钮和字段集。每个小部件都有一个自定义CSS类，可与您的jQuery选择器一起使用：

<gender
    jcr:primaryType="nt:unstructured"
    class="gender"
    sling:resourceType="granite/ui/components/foundation/form/radiogroup"
    fieldLabel="Gender">
    <items jcr:primaryType="nt:unstructured">
        <option1
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/form/radio"
            class="gender-male-radio"
            name="./gender"
            text="Male"
            value="male"/>
        <option2
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/form/radio"
            class="gender-female-radio"
            name="./gender"
            text="Female"
            value="female"/>
    </items>
</gender>
<male
    jcr:primaryType="nt:unstructured"
    jcr:title="Male"
    class="gender-male-fieldset"
    sling:resourceType="granite/ui/components/foundation/form/fieldset">
    <items jcr:primaryType="nt:unstructured">
        <headingText
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/form/textfield"
            fieldLabel="Male fields"
            name="./maleText"/>
    </items>
</male>
<female
    jcr:primaryType="nt:unstructured"
    jcr:title="Female"
    class="gender-female-fieldset"
    sling:resourceType="granite/ui/components/foundation/form/fieldset">
    <items jcr:primaryType="nt:unstructured">
        <headingText
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/form/textfield"
            fieldLabel="Female fields"
            name="./femaleText"/>
    </items>
</female>