Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

[AEM 6.5]Issue with Show Hide selection Path Browser under Multifield

Avatar

Avatar
Validate 10
Level 2
tushaar_srivastava
Level 2

Likes

8 likes

Total Posts

95 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Ignite 3
Ignite 1
Give Back 5
View profile

Avatar
Validate 10
Level 2
tushaar_srivastava
Level 2

Likes

8 likes

Total Posts

95 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Ignite 3
Ignite 1
Give Back 5
View profile
tushaar_srivastava
Level 2

07-12-2020

Hi Team,

There is a issue I am facing with the pathbroswer in Multifield, and it is based on Show Hide of dropdown,

There is a requirement here is like.

Need to create a Multifield having 4 maximum limit, and each field should contain

  • Title
  • Description
  • Media Type:
    • Options:
      • Image
      • Video
  • Note: Based on Media Type selection can show either Image or Video fields.
  • Image:
  • Video:
  • Alt-Text

The Dialog I created 

 

 

<?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="Feature"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/container">
        <layout
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/layouts/tabs"
            type="nav"/>
        <items jcr:primaryType="nt:unstructured">            
            <tab1
                jcr:primaryType="nt:unstructured"
                jcr:title="Content"
                sling:resourceType="granite/ui/components/foundation/section">
                <layout
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
                <items jcr:primaryType="nt:unstructured">
                    <column
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <fieldset
                                jcr:primaryType="nt:unstructured"
                                jcr:title=""
                                sling:resourceType="granite/ui/components/foundation/form/fieldset">
                                <layout
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
                                <items jcr:primaryType="nt:unstructured">
                                    <formFields
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                                        composite="{Boolean}true"
                                        eaem-multi-nested=""
                                        fieldLabel="Content"
                                        maxLimit="4">
                                        <field
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/foundation/form/fieldset"
                                            name="./formFields">
                                            <layout
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
                                                method="absolute"/>
                                            <items jcr:primaryType="nt:unstructured">
                                                <column
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/foundation/container"
                                                    fieldLabel="Items">
                                                    <items jcr:primaryType="nt:unstructured">
                                                        <title
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                            fieldDescription="Under 45 characters recommended."
                                                            fieldLabel="Title"
                                                            name="./title"
                                                            required="{Boolean}true"/>
                                                        <description
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/coral/foundation/form/textarea"
                                                            fieldDescription="Under 140 characters recommended."
                                                            fieldLabel="Description"
                                                            name="./description"/>
                                                        <mediaType
                                                            granite:class="cq-dialog-dropdown-showhide"
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                                            fieldLabel="Media Type"
                                                            name="./mediaType">
                                                            <granite:data
                                                                jcr:primaryType="nt:unstructured"
                                                                cq-dialog-dropdown-showhide-target=".image-video-mediatype-showhide-target"/>
                                                            <items jcr:primaryType="nt:unstructured">
                                                                <image
                                                                    jcr:primaryType="nt:unstructured"
                                                                    text="Image"
                                                                    value="image"/>
                                                                <video
                                                                    jcr:primaryType="nt:unstructured"
                                                                    text="Video"
                                                                    value="video"/>
                                                            </items>
                                                        </mediaType>
                                                        <image
                                                            granite:class="hide image-video-mediatype-showhide-target"
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/coral/foundation/container">
                                                            <granite:data
                                                                jcr:primaryType="nt:unstructured"
                                                                showhidetargetvalue="image"/>
                                                            <items jcr:primaryType="nt:unstructured">
                                                                <image
                                                                    jcr:primaryType="nt:unstructured"
                                                                    sling:resourceType="granite/ui/components/foundation/form/pathbrowser"
                                                                    emptyText="Drag-and-drop or select an asset into the input field"
                                                                    fieldLabel="Image"
                                                                    mimetype="image"
                                                                    name="./image"
                                                                    rootPath="/content/dam"/>
                                                                <alttextimage
                                                                    jcr:primaryType="nt:unstructured"
                                                                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                                    fieldLabel="Alt-Text"
                                                                    name="./alttextimage"/>
                                                            </items>
                                                        </image>
                                                        <video
                                                            granite:class="hide image-video-mediatype-showhide-target"
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/coral/foundation/container">
                                                            <granite:data
                                                                jcr:primaryType="nt:unstructured"
                                                                showhidetargetvalue="video"/>
                                                            <items jcr:primaryType="nt:unstructured">
                                                                <video
                                                                    jcr:primaryType="nt:unstructured"
                                                                    sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
                                                                    emptyText="Drag-and-drop or select an asset into the input field"
                                                                    fieldLabel="Video"
                                                                    name="./video"
                                                                    rootPath="/content/dam"/>
                                                                <alttextvideo
                                                                    jcr:primaryType="nt:unstructured"
                                                                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                                    fieldLabel="Alt-Text"
                                                                    name="./alttextvideo"/>
                                                            </items>
                                                        </video>
                                                    </items>
                                                </column>
                                            </items>
                                        </field>
                                    </formFields>
                                </items>
                            </fieldset>
                        </items>
                    </column>
                </items>
            </tab1>
        </items>
    </content>
</jcr:root>

 

 

Now >>

Step 1: Select Image form Dropdown and give some value in pathBrowser. (*Video dialog will hide)

tushaar_srivastava_0-1607337458087.png

 

Step 2: Click on Add to Add new field, and select Video from Dropdown, and select some path for videos 

tushaar_srivastava_1-1607337697601.png

 

Step 3: After Selection of Video in Second field (step2), we can see the image pathbrowser changes to video on first fields (step1)

tushaar_srivastava_2-1607338003936.png

And in CRX, we can see the values  are storing as expected, but the selection of just next field impacted the showing of first field

value for field 1:

tushaar_srivastava_0-1607339353452.png

value for field 2:

tushaar_srivastava_1-1607339601043.png

 

Continuation of  : https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/pathfield-inside-multifiel... 

Thanks you

 

@Manjunath_K  @kautuk_sahni  @Arun_Patidar  @BrianKasingli  @santhosh_kumark  @vanegi  @Vijayalakshmi_S 

aem6.5 dropdown multifield pathbrowser selection Touch UI Touchui dialog

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,429 likes

Total Posts

3,300 posts

Correct Reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,429 likes

Total Posts

3,300 posts

Correct Reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

09-12-2020

Answers (2)

Answers (2)

Avatar

Avatar
Validate 1
Level 2
shaileshb584084
Level 2

Likes

14 likes

Total Posts

18 posts

Correct Reply

2 solutions
Top badges earned
Validate 1
Give Back
Boost 5
Boost 3
Boost 10
View profile

Avatar
Validate 1
Level 2
shaileshb584084
Level 2

Likes

14 likes

Total Posts

18 posts

Correct Reply

2 solutions
Top badges earned
Validate 1
Give Back
Boost 5
Boost 3
Boost 10
View profile
shaileshb584084
Level 2

08-12-2020

Hi,

 

You need to write your own javascript for this and need to load them on every time the dialog is loaded again.

 

For getting the values from the backend we can use the below sample.

 

setTimeout(function() {
$.ajax(Granite.author.DialogFrame.currentDialog.editable.path + ".infinity.json").done(handler);
}, 1000);

 

Once you get the value's of that mulifield, create a handler and write the show/hide logic based on the business logic.

function handler(data) {
$('[data-granite-coral-multifield-name="./<multifield-node-name>"]').find('coral-multifield-item').each(function(index, value) {
$(this).find('[name*="<multifield-property-name>"]').val(data['<multifield-node-name>']['item'+index]['<multifield-property-name>']);

//method for processing the business logic goes in here in the below function

conditionalRendering();
});
}

 

The category "cq.authoring.dialog" should be selected while creating the js.

 

Thanks 

Avatar

Avatar
Establish
MVP
Anudeep_Garnepudi
MVP

Likes

275 likes

Total Posts

320 posts

Correct Reply

87 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
Anudeep_Garnepudi
MVP

Likes

275 likes

Total Posts

320 posts

Correct Reply

87 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
Anudeep_Garnepudi
MVP

07-12-2020

Hi @tushaar_srivastava 

OOTB dropdown show/hide will not work with in multifield as it is class based show/hide. On option change show/hide will be applied to all the items with in multifield as there are multiple fields with same class. Solution is to write a custom listener js to hide/show field with in closest multifield  item.

-AG