Show hide tab based on dropdown in content fragment

[jaideep_te]

Hi Team,

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

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.

[ManviSharma]

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.

[jaideep_te]

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

[AsifChowdhury]

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.

[Nishant-Singh]

Hi @jaideep_te 

You can refer below blog to implement this usecase.

https://experience-aem.blogspot.com/2022/05/aem-6512-content-fragment-editor-composite-multifield-vi...

[jaideep_te]

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.

[Hafizur-Rahman]

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.

[jaideep_te]

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

[Mahedi_Sabuj]

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