AEM - Boîte de dialogue Touch UI masquer et afficher les onglets dans la liste déroulante

Question

J'essaie de créer une boîte de dialogue de dialogue tactile basée sur des onglets AEM (AEM-6.2) Mais je suis confrontée à des problèmes pour masquer les onglets.

J'ai 3 onglets dans une boîte de dialogue.

1. général (toujours activé)
2. sport (active uniquement lorsque la sélection est le sport)
3. films (Activer uniquement lorsque la sélection est des films)

Avant la configuration, et 'sports' Les onglets "Films" sont masqués. Dans l'onglet "Général", j'ai une boîte de sélection avec les options 'choisir les sports' et 'choisir les films'. Sur la sélection, l'onglet correspondant devrait s'afficher. J'ai essayé d'utiliser les étapes fournies dans le chemin ci-dessous, mais il ne parvient pas à masquer les onglets.

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

Autre référence, nous avons essayé:https://github.com/aman02deep/aem-6.2/blob/master/tabshideshow.js

Contenu .xml:

       </items> 
          </selection> 
         </items> 
        </columns> 
       </items> 

     </generalPanel> 
     <sports 
      jcr:primaryType="nt:unstructured" 
      jcr:title="Sports" 
      sling:resourceType="granite/ui/components/foundation/container"> 
      <layout 
       jcr:primaryType="nt:unstructured" 
       sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns" 
       margin="{Boolean}false"/> 
       <items jcr:primaryType="nt:unstructured"> 
        <columns 
        jcr:primaryType="nt:unstructured" 
        sling:resourceType="granite/ui/components/foundation/container"> 
         <items jcr:primaryType="nt:unstructured"> 
          <sptext jcr:primaryType="nt:unstructured" 
            sling:resourceType="granite/ui/components/foundation/form/textarea" 
            fieldLabel="enter the text :" 
            name="./sp_text" 
            required="false"/> 

         </items> 
        </columns> 

       </items> 

     </sports> 
     <movies 
      jcr:primaryType="nt:unstructured" 
      jcr:title="Movies" 
      sling:resourceType="granite/ui/components/foundation/container"> 
      <layout 
       jcr:primaryType="nt:unstructured" 
       sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns" 
       margin="{Boolean}false"/> 
       <items jcr:primaryType="nt:unstructured"> 
        <columns 
        jcr:primaryType="nt:unstructured" 
        sling:resourceType="granite/ui/components/foundation/container"> 
         <items jcr:primaryType="nt:unstructured"> 
          <mvtext jcr:primaryType="nt:unstructured" 
            sling:resourceType="granite/ui/components/foundation/form/textarea" 
            fieldLabel="enter the text :" 
            name="./mv_text" 
            required="false"/> 

         </items> 
        </columns> 

       </items> 
     </movies> 
    </items> 
</content> 

Answer 1

Vous pouvez utiliser le granit: données pour créer un attribut de données que vous pouvez masquer et afficher à vous convinicence en utilisant jquery.

1. Ajouter Listener changer de votre bouton radio
2. Ajouter granit: Les données sur les deux onglets
3. On écoute appelé, afficher et masquer, en fonction de votre sélection et jquery.

Ref: https://docs.adobe.com/docs/en/aem/6-1/ref/granite-ui/api/jcr_root/libs/granite/ui/components/foundation/commonattrs.html