Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

Show hide tab based on dropdown in content fragment

Avatar

Level 2

Hi Team,

I need help regarding show hide dropdown field inside content fragment.

jaideep_te_0-1689585362693.png

 

Based on dropdown value in general tab, i need to show hide next tab. We need to write custom js for the same but i am not able to find any js.

8 Replies

Avatar

Employee Advisor

Hi,

 

To implement show/hide functionality for a dropdown field inside a content fragment, below steps could help:

  1. Identify the JavaScript file or script associated with the content fragment.
  2. Find the event handler function that handles the dropdown value change event.
  3. Use JavaScript or a library like jQuery to retrieve the selected value of the dropdown.
  4. Based on the selected value, modify the CSS display property or add/remove CSS classes to show or hide the next tab or section.
  5. Save the changes and test the behavior by changing the dropdown value in the content fragment.

Avatar

Level 2

Do you have any reference for the js which show hide multifield based on dropdown selection in content fragment.

Avatar

Community Advisor

Hi @jaideep_te 

you need to write custom js for that.

To trigger a js on dialog open a js need to add as a clientlib:

(function (document, $, Coral) {
    $(document).on('foundation-contentloaded', function (e) {
        //do what you want to do here
    });
})(document, Granite.$, Coral);

 then you can show/hide your tab based on selection.

there are other events like 'foundation-contentloaded' for when you actually want to trigger the JS, please do some research and find which one is suitable for you.

Avatar

Level 2

As per my understanding this is just to add multifield in content fragment and show hide fields in multifield but i want to show hide tab/multifield within a same tab based on dropdown selection.

Avatar

Level 2

Hi @jaideep_te 

You can follow the approach below to hide the tab based on the dropdown selection.

(function(document, $) {
    "use strict";
    // when dialog gets injected
    $(document).on("foundation-contentloaded", function(e) {
        // if there is already an inital value make sure the according target element becomes visible
        showHide($(".cq-dialog-tab-showhide", e.target));
    });

    $(document).on("selected", ".cq-dialog-tab-showhide", function(e) {
        showHide($(this));
    });

    $(document).on("change", ".cq-dialog-tab-showhide", function(e) {
        showHide($(this));
    });

    function showHide(el){
        el.each(function(i, element) {
            /* get the selector to find the target elements. its stored as data-.. attribute */
            var target = $(element).data("cqDialogTabShowhideTarget");
            if ($(element).data("select")) {

                // get the selected value
                var value = $(element).data("select").getValue();

                // make sure all unselected target elements are hidden.
                $(target).not(".hide").addClass("hide");

                /* show the target element that contains the selected value as data-showhidetargetvalue attribute */
                if(value)
                    $(target+'.'+value).removeClass("hide");
            }else if ($(element).is("coral-select")) {

                // get the selected value
                var value = $(element).find("coral-select-item:selected").attr("value");

                // make sure all unselected target elements are hidden.
                $(target).not(".hide").addClass("hide");

                /* show the target element that contains the selected value as data-showhidetargetvalue attribute */
                if(value)
                    $(target+'.'+value).removeClass("hide");
            } else if($(element).is('input:checkbox')){

                // toggle the target element that contains the selected value as data-showhidetargetvalue attribute
                if($(element).is(':checked')){
                    $(target).removeClass( "hide" );
                }else{
                    $(target).addClass( "hide" );
                }

            }
        })
    }
})(document,Granite.$);

 Make sure to add the script available in the authoring dialogue(with extraClientslibs). 

Then follow the structure in dialog.

<?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="Component Name"
          sling:resourceType="cq/gui/components/authoring/dialog"
          extraClientlibs="[abbvie-pro.tab-showhide]"
          mode="edit" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" >
    <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"
                active="{Boolean}true"/>
        <items jcr:primaryType="nt:unstructured">
            <properties
                    jcr:primaryType="nt:unstructured"
                    jcr:title="Select Tabs"
                    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">
                            <column
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/foundation/container">
                                <items jcr:primaryType="nt:unstructured">
                                    <dropdownSelector
                                            granite:class="cmp-select-type-selection cq-dialog-tab-showhide"
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                            fieldLabel="Selection Type"
                                            name="./selectionType">
                                        <items jcr:primaryType="nt:unstructured">
                                            <option1
                                                    jcr:primaryType="nt:unstructured"
                                                    text="Option 1"
                                                    value="selectOption1"/>
                                            <option2
                                                    jcr:primaryType="nt:unstructured"
                                                    text="optionv 2"
                                                    value="selectOption2"/>
                                        </items>
                                        <granite:data
                                                jcr:primaryType="nt:unstructured"
                                                cq-dialog-tab-showhide-target=".list-option-tab-showhide-target"/>
                                    </dropdownSelector>
                                </items>
                            </column>
                        </items>
                    </column>
                </items>
            </properties>
            <secondTab
                    jcr:primaryType="nt:unstructured"
                    jcr:title="Second Tab"
                    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">
                        <!-- Ttab Items-->
                </items>
                <layoutConfig
                        jcr:primaryType="nt:unstructured"
                        class="hide list-option-tab-showhide-target selectOption1"/>
            </secondTab>
        </items>
    </content>
</jcr:root>

 

This will show the second tab if Option 1 is selected.

Hope that's what you were looking for.

Avatar

Level 2

Yes this is correct for the tab show hide in cq:dialog , but i am looking for the content fragment as the dialog structure in content fragment is different from normal dialog

Avatar

Community Advisor

You need to create a clientlibs as category name dam.cfm.authoring.contenteditor.v2 for adding javascript when you add/edit content fragment from DAM.

Here are sample javascript for hide the tab:

(function(document, $) {
  $(document).on("foundation-contentloaded", function(e) {
    Coral.commons.ready(function() {
      showHideHandler($(".cfm-dialog-dropdown-showhide", e.target))
    })
  });
  $(document).on("selected", ".cfm-dialog-dropdown-showhide", function(e) {
    showHideHandler($(this))
  });
  function showHideHandler(el) {
    el.each(function(i, element) {
      if ($(element).is("coral-select"))
        Coral.commons.ready(element, function(component) {
          showHide(component, element);
          component.on("change", function() {
            showHide(component, element)
          })
        });
      else {
        var component = $(element).data("select");
        if (component)
          showHide(component, element)
      }
    })
  }
  function showHide(component, element) {
    var target = $(element).data("cfmDialogDropdownShowhideTarget");
    var showhidetargetvalue = $(element).data("showhidetargetvalue");

    // Hide your tab here
  }
})(document, Granite.$);

Although we can add class to the dialog element using granite:class but Tab Placeholder not support granite:class property. So, we need to use auto-generated ID for Tab in this case. ID is maintaining the order you added in the content fragment model e.g., cf-tab-0, cf-tab-1, etc..

Also granite:data not supported for Tab Placeholder, so adding showhidetargetvalue property at the select node.

<_x0031_689938946527 jcr:primaryType="nt:unstructured"
  granite:class="cfm-dialog-dropdown-showhide"
  sling:resourceType="granite/ui/components/coral/foundation/form/select"
  fieldLabel="Question Type"
  name="questionType"
  valueType="string">
  <optionsmultifield jcr:primaryType="nt:unstructured">
    <item0 jcr:primaryType="nt:unstructured"
      fieldLabel="Text"
      fieldValue="text"/>
    <item1 jcr:primaryType="nt:unstructured"
      fieldLabel="Radio"
      fieldValue="radio"/>
  </optionsmultifield>
  <granite:data jcr:primaryType="nt:unstructured"
    showhidetargetvalue="text"
    cfm-dialog-dropdown-showhide-target="#cf-tab-1"/>
</_x0031_689938946527>
<_x0031_689938985967 jcr:primaryType="nt:unstructured"
  sling:resourceType="dam/cfm/models/editor/components/tabplaceholder"
  fieldLabel="List of Questions"
  name="placeholder"
  valueType="string/tab"/>