Contents
Objective
After reading this Article, You should have an Understanding of –
- Multiple checkbox to one section in Touch UI Dialog.
Introduction
In Touch UI Dialog, We have select option as dropdown only, But In Classic UI dialog, we have option to chose select as dropdown or checkbox. In this article we will see the implementation step to accomplish this.
Hence, without any further delay, let’s get started :
Multiple Checkbox Creation Steps
- Create a custom component in Touch UI as multicheckbox and also create basic structure of of cq:dialog.
- At checkbox level use the following properties
- sling:resourceType=”granite/ui/coral/components/foundation/form/checkbox”
- name=”./asianCountries”
- text=”India”
- value=”india”
- To add more countries in same container you can use same name, sling:resourceType but different text and value.
- When author the component the value will store as string array at node level.
cq:dialog : .content.xml
<?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="List of Asian Countries"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<tabs
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/tabs"
maximized="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<coutries
jcr:primaryType="nt:unstructured"
jcr:title="Select Countries"
sling:resourceType="granite/ui/components/coral/foundation/container"
margin="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<columns
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
margin="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<india
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
name="./asianCountries"
text="India"
value="india"/>
<china
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
name="./asianCountries"
text="China"
value="china"/>
<indonesia
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
name="./asianCountries"
text="Indonesia"
value="indonesia"/>
<pakistan
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
name="./asianCountries"
text="Pakistan"
value="pakistan"/>
<bangladesh
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
name="./asianCountries"
text="Bangladesh"
value="bangladesh"/>
<japan
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
name="./asianCountries"
text="Japan"
value="japan"/>
<philippines
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
name="./asianCountries"
text="Philippines"
value="philippines"/>
<vietnam
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
name="./asianCountries"
text="Vietnam"
value="vietnam"/>
<malaysia
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
name="./asianCountries"
text="Malaysia"
value="malaysia"/>
<nepal
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
name="./asianCountries"
text="Nepal"
value="nepal"/>
</items>
</column>
</items>
</columns>
</items>
</coutries>
</items>
</tabs>
</items>
</content>
</jcr:root>
Conclusion
- So in this post, we tried to cover simple multiple checkbox in Touch UI. If you have any other approach please comment and tag us. I would love to hear your thoughts and suggestions to make it better.
Sample Package to download :-
Other Reference from Adobe Experience League:-
I like the method that you write. Great website. Lovely understanding over listed here. Wonderful! Great Web page. I will certainly share this specific with all my friends! Thanks for your great blogs! I won’t be able to wait to confirm some those out! I love to write that type articles as if you.
Hi,
How can we do this for dynamic dropdown, I mean dynamic dropdown with checkboxes.
I truly appreciate your technique of writing a blog. I added it to my bookmark site list and will