Hi,
Below is the scenario,
* There is a multifiled item for steps , where each step has title,description and multiple images/videos.
* Within each step , since user can enter multiple images/videos that is also been made multifield item.
* This multifield images/videos is show/hide dropdown with image and video as selectors.
* When you select image or video, few fields are hidden/shown depending on what you select.
* This works fine within step1( remember step1 is a part of main multifield item within which we have multifield show/hide items for images/videos).
* But when you try to select video/image in step2 , it breaks.
* Issue is let's say dialog fields are like below:
step1:
+ title
+description
+assets
item1
+image
+imagepath
+alt
item2
+video
+videopath
step2:
+ title
+description
+assets
item1
+video
+videopath
from above example:
when I select video dropdown for item1 in step2 , item1 of the step1 will show videopath instead of imagepath.
I have already incorportated whatever @arunpatidar has suggested in this question : https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem6-4-multifield-with-sho... , because this changes it is working fine within step1 I mean show/hide works fine within each steps but not between steps.
Solved! Go to Solution.
Views
Replies
Total Likes
Hi @aem-enthu27 , I understand you are trying to show hide inner multifield in a nested multifield case. Here the code given by Arun will not work as it is looking for your element in the first level.
Here is the approach you need to follow to update that JS.
Step1: Try creating Nested Multifield like below
<firstMF jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container"> <items jcr:primaryType="nt:unstructured"> <files granite:class="multifield-class" granite:data="multifielddata" jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/multifield" class="full-width" composite="{Boolean}true" fieldLabel="First Multi Field" validation="multi-validate"> <field jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container" name="./firstMF"> <items jcr:primaryType="nt:unstructured"> <heading jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/textfield" fieldLabel="Heading" name="./heading" required="{Boolean}true"/> <secondMF jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/multifield" composite="{Boolean}true" fieldLabel="Second Multi Field"> <field jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container" name="./secondMF"> <items jcr:primaryType="nt:unstructured"> <label jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/textfield" fieldLabel="Link - Label" name="./label" required="{Boolean}false"/> <image
.
.Your Existing Image Field
.
.<granite:data
id:imagesecondMF
>
./>
<video
.
.Your Existing Video Field
.<granite:data
id:videosecondMF
>
.
./> </items> </field> </secondMF> </items> </field> </files> </items> </firstMF>
Step2: Now, Implement Mutationobserver like this
var ourObserver = new MutationObserver(function() { }); ourObserver.observe(document.querySelector("#imagesecondMF"), {childList: true, subtree: true} // // try showHide here ); ourObserver.observe(document.querySelector("#vidoesecondMF"), {childList: true, subtree: true} // try showHide here // );
Step 3:
Increment each id of image selection & Video selection while adding them to avoid malfunction
I know,this is long approach, but it will help you for sure.
~Aditya.Ch
Hi @aem-enthu27 , I understand you are trying to show hide inner multifield in a nested multifield case. Here the code given by Arun will not work as it is looking for your element in the first level.
Here is the approach you need to follow to update that JS.
Step1: Try creating Nested Multifield like below
<firstMF jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container"> <items jcr:primaryType="nt:unstructured"> <files granite:class="multifield-class" granite:data="multifielddata" jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/multifield" class="full-width" composite="{Boolean}true" fieldLabel="First Multi Field" validation="multi-validate"> <field jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container" name="./firstMF"> <items jcr:primaryType="nt:unstructured"> <heading jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/textfield" fieldLabel="Heading" name="./heading" required="{Boolean}true"/> <secondMF jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/multifield" composite="{Boolean}true" fieldLabel="Second Multi Field"> <field jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container" name="./secondMF"> <items jcr:primaryType="nt:unstructured"> <label jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/textfield" fieldLabel="Link - Label" name="./label" required="{Boolean}false"/> <image
.
.Your Existing Image Field
.
.<granite:data
id:imagesecondMF
>
./>
<video
.
.Your Existing Video Field
.<granite:data
id:videosecondMF
>
.
./> </items> </field> </secondMF> </items> </field> </files> </items> </firstMF>
Step2: Now, Implement Mutationobserver like this
var ourObserver = new MutationObserver(function() { }); ourObserver.observe(document.querySelector("#imagesecondMF"), {childList: true, subtree: true} // // try showHide here ); ourObserver.observe(document.querySelector("#vidoesecondMF"), {childList: true, subtree: true} // try showHide here // );
Step 3:
Increment each id of image selection & Video selection while adding them to avoid malfunction
I know,this is long approach, but it will help you for sure.
~Aditya.Ch
I thought only I can mark questions as answered .
Views
Replies
Total Likes
Check this if helps https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/hide-and-show-dropdown-in-...