Level 5

Solved

Dropdown in Multifield in 6.2, dynamically show/hide widgets

Forum|Forum|8 years ago
October 18, 2017
7 replies
8706 views

Hi All,

I have a requirement where i have a dtopdown in multifield, based on the selection values i need to show/hide other widgets.

For example image/video are the options in dropdown, for image 3 widgets(path, alt text, url) should show. For video (id and image path) should.

How to achieve it? In classic UI i did it with the help of listeners in selection change event, but granite i am stuck.

Please help if anyone knows.

Thanks,

Pradeep

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by smacdonald2008

I was talking to AEM Touch UI experts whom said this will not work OOTB, You need to write custom code.

Techaspect_Solu

Level 7

Hi Pradeep,

AEM has OOTB library to implement the hide/show feature. You can use below path:

/libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide/js/dropdownshowhide.js

Please refer below working code which might help you in implementing hide/show feature in your granite UI dialog.

Sample dialog xml:

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/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="Rotating Image Component"

sling:resourceType="cq/gui/components/authoring/dialog"

helpPath="https://www.adobe.com/go/aem6_2_docs_component_en#Title">

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

<image-tab

jcr:primaryType="nt:unstructured"

jcr:title="Image Details"

sling:resourceType="granite/ui/components/foundation/section">

<layout

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"

margin="{Boolean}false"/>

<column

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/container">

<component-type

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/form/select"

class="cq-dialog-dropdown-showhide"

cq-dialog-dropdown-showhide-target=" .text-image-hide-show"

fieldLabel="Component Type"

name="./componentType">

<rotating-image

jcr:primaryType="nt:unstructured"

text="Rotating Image"

value="rotating-image"/>

<static-image

jcr:primaryType="nt:unstructured"

text="Static Image"

value="static-image"/>

</items>

</component-type>

<static-image

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/container"

class="hide text-image-hide-show"

showhidetargetvalue="static-image">

<heading

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/heading"

class="coral-Heading coral-Heading--4"

level="{Long}4"

text="Static Image"/>

<well

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/container">

<layout

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/layouts/well"/>

<static-image

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/form/pathbrowser"

fieldLabel="Static Image"

name="./staticImage"

rootPath="/content"

showhidetargetvalue="static-image"/>

</items>

</well>

</items>

</static-image>

<rotating-image

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/container"

class="hide text-image-hide-show"

showhidetargetvalue="rotating-image">

<heading

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/heading"

class="coral-Heading coral-Heading--4"

level="{Long}4"

text="Rotating Image"/>

<well

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/container">

<layout

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/layouts/well"/>

<image-360

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/form/pathbrowser"

fieldLabel="360 Image"

name="./image360"

rootPath="/content"

showhidetargetvalue="rotating-image"/>

<rotating-image

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/form/pathbrowser"

fieldLabel="Rotating Image"

name="./rotatingImage"

rootPath="/content"

showhidetargetvalue="rotating-image"/>

</items>

</well>

</items>

</rotating-image>

</items>

</column>

</items>

</image-tab>

</items>

</content>

</jcr:root>

Note: For more information, please refer:

http://www.adobeaemclub.com/toggle-fields-based-on-selection-in-granite-ui-dialogs/

We hope this information helps!

Regards,

TechAspect Solutions

P

pradeepdubey82Author

Level 5

Hi,

This approach works well without multifield. In multifield it affects all elements upon selection of any option. Let's say i am selecting image in first element of multifield so it will show/hide widgets for image. When i add one more element in multifield and select video from dropdown, it changed first element also in multifield.

To be very frank classic UI was much more better than touch UI. touch UI no help nothing, simple things became complex in touchUI.

By the time i got little comfortable with classic UI, Adobe introduced this complex concept called touch UI.

It takes lot of time to google and find some solution for basic problem.

Please share any code which worked in multifield dropdown show/hide widgets.

Thanks,

Pradeep

smacdonald2008

Level 10

As mentioned by Techaspect Solutions, the show hide feature is the closest functionality for this requirement.

To make this work in a multi-field, you would need to code against that multi-field. See these articles for examples on how to code with a multi-field:

http://experience-aem.blogspot.com/2016/05/aem-62-support-required-validator-on-file-upload-image-in-touch-ui-dialog.html

http://experience-aem.blogspot.com/2016/06/aem-62-touch-ui-validator-for-restricting-tag-count-dialog-field.html

http://experience-aem.blogspot.com/2016/09/aem-62-touch-ui-composite-multifield-with-rte-required-validator.html

P

pradeepdubey82Author

Level 5

I tried as per above comment, placed widgets in multifield, same issue

Below is cq:dialog.xml

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/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"

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

<tab1

jcr:primaryType="nt:unstructured"

jcr:title="Carousel Image/Video"

sling:resourceType="granite/ui/components/foundation/section">

<layout

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>

<column

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/container">

<fieldset

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/form/fieldset">

<layout

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>

<column

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/container">

<images

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/form/multifield"

class="full-width"

fieldDescription="Click '+' to add a new Image"

fieldLabel="Carousal Images">

<field

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/form/fieldset"

eaem-nested=""

name="./images">

<layout

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"

method="absolute"/>

<column

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/container">

<component-type

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/form/select"

class="cq-dialog-dropdown-showhide"

cq-dialog-dropdown-showhide-target=" .text-image-hide-show"

fieldLabel="Component Type"

name="./componentType">

<rotating-image

jcr:primaryType="nt:unstructured"

text="Rotating Image"

value="rotating-image"/>

<static-image

jcr:primaryType="nt:unstructured"

text="Static Image"

value="static-image"/>

</items>

</component-type>

<static-image

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/container"

class="hide text-image-hide-show"

showhidetargetvalue="static-image">

<heading

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/heading"

class="coral-Heading coral-Heading--4"

level="{Long}4"

text="Static Image"/>

<well

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/container">

<layout

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/layouts/well"/>

<static-image

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/form/pathbrowser"

fieldLabel="Static Image"

name="./staticImage"

rootPath="/content"

showhidetargetvalue="static-image"/>

</items>

</well>

</items>

</static-image>

<rotating-image

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/container"

class="hide text-image-hide-show"

showhidetargetvalue="rotating-image">

<heading

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/heading"

class="coral-Heading coral-Heading--4"

level="{Long}4"

text="Rotating Image"/>

<well

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/container">

<layout

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/layouts/well"/>

<image-360

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/form/pathbrowser"

fieldLabel="360 Image"

name="./image360"

rootPath="/content"

showhidetargetvalue="rotating-image"/>

<rotating-image

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/form/pathbrowser"

fieldLabel="Rotating Image"

name="./rotatingImage"

rootPath="/content"

showhidetargetvalue="rotating-image"/>

</items>

</well>

</items>

</rotating-image>

</items>

</column>

</items>

</field>

</images>

</items>

</column>

</items>

</fieldset>

</items>

</column>

</items>

</tab1>

</items>

</content>

</jcr:root>

smacdonald2008Accepted solution

Level 10

I was talking to AEM Touch UI experts whom said this will not work OOTB, You need to write custom code.

divyak96999766

Level 2

Any Custom code available for this requirement? smacdonald2008 pradeepdubey82@gmail.com

P

pradeepdubey82Author

Level 5

Below is my custom listener.js code

Hope this will help you.

(function ($, $document) {

"use strict";

//alert("test");

$(document).on('foundation-contentloaded', function(e) {

//alert("contentloaded content ::: "+JSON.stringify(e));

//showHide();

});

$document.on("dialog-ready", function(e) {

var $dialog = $('.cq-dialog-floating'); // (3)

//alert($dialog);

var componentPath = $dialog.attr('action').replace('_jcr_content', 'jcr:content');

//alert("componentPath is ::::: "+componentPath);

$.ajax({

url:componentPath+'.json',

type:'GET',

dataType:'json',

async: true,

success: function(resp) {

var imagesval = resp.images;

if(imagesval){

var olElement = $("ol").children();

$.each(imagesval, function {

var thisOlElement = olElement[i];

var imageItem = imagesval[i];

var jimage = JSON.parse(imageItem);

if(jimage.mediaType == 'image') {

$(thisOlElement).find('.coral-Select-button-text').first().text("Image");

$($(thisOlElement).find('.coral-Form-fieldlabel').each(function(index, obj){

if(obj.innerHTML == 'DAM Video Path' || obj.innerHTML == 'Fall Back Image URL' || obj.innerHTML == 'Auto Play'|| obj.innerHTML == 'Youtube ID') {

$(this).closest('.coral-Form-fieldwrapper').hide();

}

}));

} else if(jimage.mediaType == 'video') {

$(thisOlElement).find('.coral-Select-button-text').first().text("Video");

$($(thisOlElement).find('.coral-Form-fieldlabel').each(function(index, obj){

if(obj.innerHTML == 'Image' || obj.innerHTML == 'Alt Name' || obj.innerHTML == 'Image URL' || obj.innerHTML == 'Youtube ID') {

$(this).closest('.coral-Form-fieldwrapper').hide();

}

}));

var camelTitle = jimage.autoPlay.replace(/(?:^|\s)\w/g, function(match) {

return match.toUpperCase();

});

$(thisOlElement).find('.coral-Select-button-text').last().text(camelTitle);

} else if(jimage.mediaType == 'youTubeVideo') {

$(thisOlElement).find('.coral-Select-button-text').first().text("Youtube Video");

$($(thisOlElement).find('.coral-Form-fieldlabel').each(function(index, obj){

if(obj.innerHTML == 'Image' || obj.innerHTML == 'Alt Name' || obj.innerHTML == 'Image URL' || obj.innerHTML == 'DAM Video Path' || obj.innerHTML == 'Fall Back Image URL'|| obj.innerHTML == 'Auto Play') {

$(this).closest('.coral-Form-fieldwrapper').hide();

}

}));

}

});

}

},

error: function(jqXHR, textStatus, errorThrown) {

alert("there is some error");

}

});

$(document).on('selected.select', function(e) {

var currentLi;

var index = 1;

if($("ol").children().length == 1) {

currentLi = $("ol").children("li:last");

} else {

index = 2;

currentLi = e.target.closest("li");

}

if(e.selected == 'Select') {

if(index == 1) {

$(currentLi.find('.coral-Form-fieldlabel').each(function(index, obj){

if(obj.innerHTML == 'Image' || obj.innerHTML == 'Alt Name' || obj.innerHTML == 'Image URL' || obj.innerHTML == 'DAM Video Path' || obj.innerHTML == 'Fall Back Image URL'|| obj.innerHTML == 'Auto Play'|| obj.innerHTML == 'Youtube ID') {

$(this).closest('.coral-Form-fieldwrapper').hide();

}

}));

currentLi.find('coral-checkbox').hide();

} else if(index == 2) {

$($(currentLi).find('.coral-Form-fieldlabel').each(function(index, obj){

if(obj.innerHTML == 'Image' || obj.innerHTML == 'Alt Name' || obj.innerHTML == 'Image URL' || obj.innerHTML == 'DAM Video Path' || obj.innerHTML == 'Fall Back Image URL'|| obj.innerHTML == 'Auto Play'|| obj.innerHTML == 'Youtube ID') {

$(this).closest('.coral-Form-fieldwrapper').hide();

}

}));

$(currentLi).find('coral-checkbox').hide();

}

if(e.selected == 'image') {

if(index == 1) {

$(currentLi.find('.coral-Form-fieldlabel').each(function(index, obj){

if(obj.innerHTML == 'DAM Video Path' || obj.innerHTML == 'Fall Back Image URL'|| obj.innerHTML == 'Auto Play'|| obj.innerHTML == 'Youtube ID') {

$(this).closest('.coral-Form-fieldwrapper').hide();

}

}));

currentLi.find('coral-checkbox').hide();

$(currentLi.find('.coral-Form-fieldlabel').each(function(index, obj){

if(obj.innerHTML == 'Image' || obj.innerHTML == 'Alt Name' || obj.innerHTML == 'Image URL') {

$(this).closest('.coral-Form-fieldwrapper').show();

}

}));

} else if(index == 2) {

$($(currentLi).find('.coral-Form-fieldlabel').each(function(index, obj){

if(obj.innerHTML == 'DAM Video Path' || obj.innerHTML == 'Fall Back Image URL'|| obj.innerHTML == 'Auto Play'|| obj.innerHTML == 'Youtube ID') {

$(this).closest('.coral-Form-fieldwrapper').hide();

}

}));

$(currentLi).find('coral-checkbox').hide();

$($(currentLi).find('.coral-Form-fieldlabel').each(function(index, obj){

if(obj.innerHTML == 'Image' || obj.innerHTML == 'Alt Name' || obj.innerHTML == 'Image URL') {

$(this).closest('.coral-Form-fieldwrapper').show();

}

}));

}

if(e.selected == 'video') {

if(index == 1) {

$(currentLi.find('.coral-Form-fieldlabel').each(function(index, obj){

if(obj.innerHTML == 'Image' || obj.innerHTML == 'Alt Name' || obj.innerHTML == 'Image URL' || obj.innerHTML == 'Youtube ID') {

$(this).closest('.coral-Form-fieldwrapper').hide();

}

}));

$(currentLi.find('.coral-Form-fieldlabel').each(function(index, obj){

if(obj.innerHTML == 'DAM Video Path' || obj.innerHTML == 'Fall Back Image URL'|| obj.innerHTML == 'Auto Play') {

$(this).closest('.coral-Form-fieldwrapper').show();

}

}));

currentLi.find('coral-checkbox').show();

} else if(index == 2) {

$($(currentLi).find('.coral-Form-fieldlabel').each(function(index, obj){

if(obj.innerHTML == 'Image' || obj.innerHTML == 'Alt Name' || obj.innerHTML == 'Image URL' || obj.innerHTML == 'Youtube ID') {

$(this).closest('.coral-Form-fieldwrapper').hide();

}

}));

$($(currentLi).find('.coral-Form-fieldlabel').each(function(index, obj){

if(obj.innerHTML == 'DAM Video Path' || obj.innerHTML == 'Fall Back Image URL'|| obj.innerHTML == 'Auto Play') {

$(this).closest('.coral-Form-fieldwrapper').show();

}

}));

$(currentLi).find('coral-checkbox').show();

}

if(e.selected == 'youTubeVideo') {

if(index == 1) {

$(currentLi.find('.coral-Form-fieldlabel').each(function(index, obj){

if(obj.innerHTML == 'Image' || obj.innerHTML == 'Alt Name' || obj.innerHTML == 'Image URL' || obj.innerHTML == 'DAM Video Path' || obj.innerHTML == 'Fall Back Image URL'|| obj.innerHTML == 'Auto Play') {

$(this).closest('.coral-Form-fieldwrapper').hide();

}

}));

currentLi.find('coral-checkbox').hide();

$(currentLi.find('.coral-Form-fieldlabel').each(function(index, obj){

if(obj.innerHTML == 'Youtube ID') {

$(this).closest('.coral-Form-fieldwrapper').show();

}

}));

} else if(index == 2) {

$($(currentLi).find('.coral-Form-fieldlabel').each(function(index, obj){

if(obj.innerHTML == 'Image' || obj.innerHTML == 'Alt Name' || obj.innerHTML == 'Image URL' || obj.innerHTML == 'DAM Video Path' || obj.innerHTML == 'Fall Back Image URL'|| obj.innerHTML == 'Auto Play') {

$(this).closest('.coral-Form-fieldwrapper').hide();

}

}));

$(currentLi).find('coral-checkbox').hide();

$($(currentLi).find('.coral-Form-fieldlabel').each(function(index, obj){

if(obj.innerHTML == 'Youtube ID') {

$(this).closest('.coral-Form-fieldwrapper').show();

}

}));

}

});

})($, $(document));

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded