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
Solved! Go to Solution.
Views
Replies
Total Likes
I was talking to AEM Touch UI experts whom said this will not work OOTB, You need to write custom code.
Views
Replies
Total Likes
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"/>
<items jcr:primaryType="nt:unstructured">
<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"/>
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<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">
<items jcr:primaryType="nt:unstructured">
<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">
<items jcr:primaryType="nt:unstructured">
<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"/>
<items jcr:primaryType="nt:unstructured">
<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">
<items jcr:primaryType="nt:unstructured">
<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"/>
<items jcr:primaryType="nt:unstructured">
<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,
Views
Replies
Total Likes
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
Views
Replies
Total Likes
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:
Views
Replies
Total Likes
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"/>
<items jcr:primaryType="nt:unstructured">
<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"/>
<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"
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">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<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"/>
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<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">
<items jcr:primaryType="nt:unstructured">
<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">
<items jcr:primaryType="nt:unstructured">
<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"/>
<items jcr:primaryType="nt:unstructured">
<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">
<items jcr:primaryType="nt:unstructured">
<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"/>
<items jcr:primaryType="nt:unstructured">
<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>
Views
Replies
Total Likes
I was talking to AEM Touch UI experts whom said this will not work OOTB, You need to write custom code.
Views
Replies
Total Likes
Any Custom code available for this requirement? smacdonald2008 pradeepdubey82@gmail.com
Views
Replies
Total Likes
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));
Views
Replies
Total Likes
Views
Likes
Replies
Views
Likes
Replies