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

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

如果能够确定是否在服务器端显示面板，则可以使用

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:         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:         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"        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"  name="./gender" text="Male" value="male"/>        <option2 jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/radio"  name="./gender" text="Female" value="female"/>    </items></gender><male    jcr:primaryType="nt:unstructured"    jcr:title="Male"        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"        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>