Touch UI show/hide on select

September 10, 2018   


Just a hint in case you can not remember configuration :)

Configuration for the latest coral components aka ‘granite/ui/components/coral/foundation/form/select’

   <select
           jcr:primaryType="nt:unstructured"
           granite:class="cq-dialog-dropdown-showhide"
           sling:resourceType="granite/ui/components/coral/foundation/form/select"
           name="./select"
           fielDescription="D Select"
           fieldLabel="Select">
       <granite:data 
              jcr:primaryType="nt:unstructured"
              cq-dialog-dropdown-showhide-target=".list-option-listfrom-showhide-target"/>
       <items jcr:primaryType="nt:unstructured">
           <value1
                   jcr:primaryType="nt:unstructured"
                   text="Text 1"
                   value="value1"/>
           <value2
                   jcr:primaryType="nt:unstructured"
                   text="Text 2"
                   value="value2"
           />
       </items>
   </select>
   <filed1 jcr:primaryType="nt:unstructured"
              granite:class="hide list-option-listfrom-showhide-target"
              sling:resourceType="granite/ui/components/coral/foundation/container">
       <granite:data 
                jcr:primaryType="nt:unstructured"
                showhidetargetvalue="value1"/>
       <items jcr:primaryType="nt:unstructured">
           <colour
                   jcr:primaryType="nt:unstructured"
                   sling:resourceType="granite/ui/components/coral/foundation/form/colorfield"
                   fielDescription="Field 1"
                   fieldLabel="D Field 1"
                   name="./field1"/>
       </items>
   </filed1>
   <filed2 jcr:primaryType="nt:unstructured"
                granite:class="hide list-option-listfrom-showhide-target"
                sling:resourceType="granite/ui/components/coral/foundation/container">
         <granite:data 
                   jcr:primaryType="nt:unstructured"
                   showhidetargetvalue="value1"/>
         <items jcr:primaryType="nt:unstructured">
             <colour
                     jcr:primaryType="nt:unstructured"
                     sling:resourceType="granite/ui/components/coral/foundation/form/colorfield"
                     fielDescription="Field 2"
                     fieldLabel="D Field 2"
                     name="./field2"/>
         </items>
   </filed2>

Notes:

  1. You have to use granite:data if you want to use data attributes
  2. You have to use granite:class instead of plain class if you want to add a custom class
  3. Fields you want to show/hide should be wrapped with granite/ui/components/coral/foundation/container and it should have granite:class="hide list-option-listfrom-showhide-target", if you will try to do it without wrapper directly on the input component –> your input field will be hidden, but field’s label will be still visible



comments powered by Disqus