如何在授权用户界面中创建向导并在AEM中的珊瑚用户界面html中设计向导 [英] How to create wizards in grante UI and design it in coral UI html in AEM

问题描述

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

As i am new to AEM development, I want to know how to create wizards in AEM and how to design those using coral UI. As i have created wizard and it contains two step view:

               source  --->   select

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

I have designed this two step wizard and i have to show different items on each step.This steps are nothing but nodes under my createfragment page.

1)来源:我有两个单选按钮，假设选择像男性和女性这样的性别.我已经为源创建了节点，并在源项下创建了两个单选按钮.

1) Source: I am having two radio buttons lets suppose selecting gender like male and female. I have created node for source and under source items, created two radio buttons.

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

Functionality: Through the selected radio button i have to open next container which have further items like name, address. I have different items under my wizard for male and female options so that container for the particular value is shown to user depending upon selection of gender either male or female. With in source user needs to select only 1 radio button and depending on selected value the user will show items from select nodes items like maleform and femaleform.

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

2) Select: This node should contains two sub-nodes under items and this forms has different functionality as per user selection. I want to show first node from item (maleform) on selection of male radio button on the other hand show (femaleform) second node items on female selection.

我的Node结构就像:

My Node structure is like:

 + 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" 

基于用户选择，我想呈现两个不同页面上的两个单独的表单组件.

On the basis of user selection, I want to render two separate form components which are on two different pages.

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

For eg: If user selects male radio button, I want to display male form and similarly for the female one.

请帮助我，因为我必须使用 AEM 中的珊瑚或花岗岩 UI渲染两个不同的页面.

Please help me as I have to render two different pages using coral or granite UI in AEM.

推荐答案

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

If you're able to determine whether to show panels or not on the server side, you can use the granite/ui/components/foundation/renderconditions/simple widget to check a condition. Query your default AEM installation for examples, the condition is set in the expression property of the granite:rendercondition node. This sample checks the QueryString, but you can check other things such as the suffix using Expression Language (EL), for example: ${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显示和隐藏窗口小部件.在向导中，这两个小部件不一定需要是两个不同的步骤.实际上，最好不要这样做，那样，向导进度指示器将只显示一个步骤，您可以在该步骤中更改显示.

Otherwise, on the clientside you can simply show and hide widgets with JavaScript. The two widgets don't necessarily need to be two different steps in a wizard. In fact, it might be better if they weren't, that way your wizard progress indicator will just show one step and you can alter the display within that step.

CSS以启动隐藏的字段:

CSS to start the fields hidden:

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

在对话框打开时运行的JavaScript，并在单击单选按钮时显示/隐藏字段集.这是一个简单的示例，您可以编写更多可重用的内容:

JavaScript that runs when the dialog opens and shows/hides fieldsets when radio buttons are clicked. This is a simple example, you can write something much more reusable:

$(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选择器一起使用:

The Touch UI Dialog with radio buttons and fieldsets for male and female genders. Each widget has a custom CSS class to be used with your jQuery selectors:

<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>

这篇关于如何在授权用户界面中创建向导并在AEM中的珊瑚用户界面html中设计向导的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！