Show hide dropdown under multifield and Dialog field Ajacent to each other in Configuration dialog

[tushaar_srivastava]

Hi,
I am facing some issue in Configuration file.

1.Show hide dropdown in multifield.

2. Dialog Field Ajacent to each other.

My Configuration file looks like:

 requirement 1: On selection of dropdown "Advance" I need to show "Enter URL Parameters" fields rest hide this field.

 requirement 2: Breakpoint dimensions mapping where we can see Breakpoint, width and Height, we need to get those fields Ajacent to each other.

getting Breakpoint, width Height in a single row with multifield.

Here is my sample dialog structure of Config file.

<?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="Configuration"
    sling:resourceType="cq/gui/components/authoring/dialog"
    extraClientlibs="[cq.authoring.dialog,cq.common.wcm,core.wcm.components.page.v2.editor,cq.wcm.msm.properties,granite.contexthub.configuration,cq.siteadmin.admin.properties,project.configurations.configconsole]"
    mode="edit">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <title
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/form/hidden"
                name="./jcr:title"
                value="Image Optimization Configuration"/>
            <tabs
                granite:class="cq-siteadmin-admin-properties-tabs"
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/tabs"
                size="L">
                <items jcr:primaryType="nt:unstructured">
                    <wcm
                        jcr:primaryType="nt:unstructured"
                        jcr:title="WCM"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        maximized="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <subtabs
                                granite:class="cq-siteadmin-admin-properties-tabs"
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/tabs"
                                size="L">
                                <items jcr:primaryType="nt:unstructured">
                                    <tabimage
                                        jcr:primaryType="nt:unstructured"
                                        jcr:title="Tab Image"
                                        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
                                        <items jcr:primaryType="nt:unstructured">
                                            <renditions
                                                    cq:showOnCreate="{Boolean}true"
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                                                    composite="{Boolean}true"
                                                    fieldLabel="Image Config">
                                                <field
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceType="granite/ui/components/coral/foundation/container"
                                                        name="./wcm/mediagallery/renditions">
                                                    <items jcr:primaryType="nt:unstructured">
                                                        <rendition
                                                                cq:showOnCreate="{Boolean}true"
                                                                jcr:primaryType="nt:unstructured"
                                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                                fieldDescription="Please enter a name for the rendition."
                                                                fieldLabel="Image Layout"
                                                                name="./rendition"/>
                                                        <layout
                                                                cq:showOnCreate="{Boolean}true"
                                                                jcr:primaryType="nt:unstructured"
                                                                sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                                                fieldLabel="Select layout options"
                                                                name="./layout">
                                                            <items jcr:primaryType="nt:unstructured">
                                                                <crop
                                                                        jcr:primaryType="nt:unstructured"
                                                                        text="Crop &amp; Resize"
                                                                        value="crop"/>
                                                                <resize
                                                                        jcr:primaryType="nt:unstructured"
                                                                        text="Resize"
                                                                        value="resize"/>
                                                                <advanced
                                                                        jcr:primaryType="nt:unstructured"
                                                                        text="Advanced"
                                                                        value="advanced"/>
                                                            </items>
                                                        </layout>
                                                        <dimensions
                                                                cq:showOnCreate="{Boolean}true"
                                                                jcr:primaryType="nt:unstructured"
                                                                sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                                                                composite="{Boolean}true"
                                                                fieldDescription="Breakpoint dimensions maping"
                                                                fieldLabel="Breakpoint dimensions maping">
                                                            <field
                                                                    jcr:primaryType="nt:unstructured"
                                                                    sling:resourceType="granite/ui/components/coral/foundation/container"
                                                                    name="./dimensions">
                                                                <items jcr:primaryType="nt:unstructured">
                                                                    <breakpoint
                                                                            cq:showOnCreate="{Boolean}true"
                                                                            jcr:primaryType="nt:unstructured"
                                                                            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                                            fieldLabel="Breakpoint"
                                                                            name="./breakpoint"/>
                                                                    <width
                                                                            cq:showOnCreate="{Boolean}true"
                                                                            jcr:primaryType="nt:unstructured"
                                                                            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                                            fieldLabel="Width"
                                                                            name="./width"/>
                                                                    <height
                                                                            cq:showOnCreate="{Boolean}true"
                                                                            jcr:primaryType="nt:unstructured"
                                                                            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                                            fieldLabel="Height"
                                                                            name="./height"/>
                                                                </items>
                                                            </field>
                                                        </dimensions>
                                                        <query
                                                                cq:showOnCreate="{Boolean}true"
                                                                jcr:primaryType="nt:unstructured"
                                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                                fieldLabel="Enter URL Parameters"
                                                                name="./urlParameters"/>
                                                    </items>
                                                </field>
                                            </renditions>
                                        </items>
                                    </tabimage>
                                </items>
                            </subtabs>
                        </items>
                    </wcm>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

I follow :https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-6-5-show-hide-fields-d... for show hide but seems not working for Configuration files. is there any direct way to make show hide.

https://github.com/arunpatidar02/aem63app-repo/blob/master/js/dropdownshowhide-multifield-multivalue... 

and for dialog Ajacent to each other I tried to follow OOB teaser components where we can see link and text adjacent to each other in single row

/libs/core/wcm/components/teaser/v2/teaser/cq:dialog/content/items/tabs/items/actions/items/columns/items/column/items/actions/field/items/link but this feature is also not working for this.

Could you please suggest me the way to do.

Thanks
@Vijayalakshmi_S  @arunpatidar  @Theo_Pendle  @kautuk_sahni  @VeenaVikraman  @Nikhil-Kumar 

Note:
Maybe the issue with loading clientLibs "cq.authoring.dialog" for Configuration file.
Example I have created a config file under : /apps/Project/authoring/configurations/components/configuration/imageoptimization/cq:dialog [above dialog structure]

I made changes in cq.authoring.dialog clientlibs [apps/project/clientlibs/clientlib-authoring/js/checkbox-showhide.js] for show hide dropdown in ImageOptimization Config and breakpoint adjacent to each other.

But I believe this works only for dialogs maybe not for Config files.

I tried to put Alert or console in cq.authoring.dialog clientlibs [apps/project/clientlibs/clientlib-authoring/js/checkbox-showhide.js], so the alerts and console works for pages but not for Config files.

Also I tried using extraClientLibs property to Config file dialog. in that case also CSS/JS dnt load.

So could you please help me with the loading of a clientLibs for Configuration or context aware configuration file.

[Vijayalakshmi_S]

Hi @tushaar_srivastava,

For requirement #1,

• there is no direct approach for now. Solution shared by @arunpatidar works fine. Could you please elaborate on what is not working.  

For requirement #2,

• OOTB Teaser component achieves this UI with help of CSS. 
• You can find the respective file here - /apps/core/wcm/components/teaser/v1/teaser/clientlibs/editor/css/teaser.less
  • cmp-teaser__editor-action this class on multifield -> field node which has display:flex should help display the fields in a row. 
  • With this - cmp-teaser__editor-actionField on individual field, we can control the width
• If you have already tried this in your custom component, could you please elaborate the issue.

[arunpatidar · Accepted solution]

For requirement #2, you can check https://aemlab.blogspot.com/2019/07/aem-touch-ui-dialog-fields-in-same-row.html

[tushaar_srivastava]

Hi @Vijayalakshmi_S / @arunpatidar 
I have updated the Note in above question.
I found that Maybe the issue with loading clientLibs "cq.authoring.dialog" for Configuration file.
because when I tried to put Alert or console in cq.authoring.dialog clientlibs [apps/project/clientlibs/clientlib-authoring/js/__.js], so the alerts and console works for pages but not for Config files.

Also I tried using extraClientLibs property to Config file dialog. in that case also CSS/JS dnt load

So could you please help me how to invoke any CSS or JS for context aware configuration

[Vijayalakshmi_S]

@tushaar_srivastava,

Could you please provide some background on where exactly the dialog as part of context aware configuration comes into picture / which content path this config is being referenced / overall use case in brief if possible. 

On analyzing the dialog shared, could see the Core page v2 component related clientlibs + custom one - project.configurations.configconsole are added as extraClientlibs and few class and properties related to page component.