Expand my Community achievements bar.

SOLVED

How to add multiple check-boxes to one section in touch UI dialog

Avatar

Former Community Member

Hi,

Can anybody help me that how can we add multiple check-boxes to one section in touch UI dialog.

1269832_pastedImage_0.png

Regards,

Sandhya.

1 Accepted Solution

Avatar

Correct answer by
Level 5

Hi Sandhya,

You can create the dialog as below to get the nearest as per your requirement.

Dialog 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="Properties"

    sling:resourceType="cq/gui/components/authoring/dialog">

    <content

        jcr:primaryType="nt:unstructured"

        sling:resourceType="granite/ui/components/foundation/container">

        <layout

            jcr:primaryType="nt:unstructured"

            sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>

        <items jcr:primaryType="nt:unstructured">

            <column

                jcr:primaryType="nt:unstructured"

                sling:resourceType="granite/ui/components/foundation/container">

                <items jcr:primaryType="nt:unstructured">

                    <heading

                        jcr:primaryType="nt:unstructured"

                        sling:resourceType="granite/ui/components/foundation/form/textfield"

                        fieldDescription="Please provide page Heading"

                        fieldLabel="Page Heading"

                        name="./partnerHeading"/>

                    <description

                        jcr:primaryType="nt:unstructured"

                        sling:resourceType="granite/ui/components/foundation/form/textarea"

                        fieldDescription="Please provide page description"

                        fieldLabel="Page Description"

                        name="./partnerDescription"/>

                    <container

                        jcr:primaryType="nt:unstructured"

                        sling:resourceType="granite/ui/components/foundation/container">

                        <layout

                            jcr:primaryType="nt:unstructured"

                            sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"

                            maximized="{Boolean}false"/>

                        <items jcr:primaryType="nt:unstructured">

                            <column1

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/foundation/container"

                                class="custom-section">

                                <items jcr:primaryType="nt:unstructured">

                                    <text

                                        jcr:primaryType="nt:unstructured"

                                        sling:resourceType="granite/ui/components/foundation/heading"

                                        level="2"

                                        text="LOCATION"/>

                                </items>

                            </column1>

                            <column2

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/foundation/container"

                                class="custom-section">

                                <items jcr:primaryType="nt:unstructured">

                                    <location1

                                        jcr:primaryType="nt:unstructured"

                                        sling:resourceType="granite/ui/components/foundation/form/checkbox"

                                        name="./location1"

                                        text="Location1"

                                        value="location1"/>

                                    <location2

                                        jcr:primaryType="nt:unstructured"

                                        sling:resourceType="granite/ui/components/foundation/form/checkbox"

                                        name="./location2"

                                        text="Location2"

                                        value="location1"/>

                                    <all

                                        jcr:primaryType="nt:unstructured"

                                        sling:resourceType="granite/ui/components/foundation/form/checkbox"

                                        name="./all"

                                        text="All"

                                        value="all"/>

                                </items>

                            </column2>

                        </items>

                    </container>

                </items>

            </column>

        </items>

    </content>

</jcr:root>


Create a clientlib in the same component with category as cq.authoring.dialog and add following CSS to it.

.coral-FixedColumn-column.custom-section {

    float: left;

    width: 45%;

}

.coral-FixedColumn-column h2 {

    margin:0;

}

It would look something like below image:

dialog.png

Let me know if you have any queries.

View solution in original post

3 Replies

Avatar

Level 10

To get chekboxes into an AEM component dialog - you need to set the correct resource type in the JCR path of the touch UI dialog path. See the different fields in this article - we have tabs and each tab has different fields --

Adobe Experience Manager Help | Creating an AEM 6.2 HTML Template Language tab movie component

To get a checkbox into a dialog - the resource type is Checkbox — Granite UI 1.0 documentation.

To see a basic dialog -- see this article -- Adobe Experience Manager Help | Creating your first Adobe Experience Manager Touch UI component

Avatar

Correct answer by
Level 5

Hi Sandhya,

You can create the dialog as below to get the nearest as per your requirement.

Dialog 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="Properties"

    sling:resourceType="cq/gui/components/authoring/dialog">

    <content

        jcr:primaryType="nt:unstructured"

        sling:resourceType="granite/ui/components/foundation/container">

        <layout

            jcr:primaryType="nt:unstructured"

            sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>

        <items jcr:primaryType="nt:unstructured">

            <column

                jcr:primaryType="nt:unstructured"

                sling:resourceType="granite/ui/components/foundation/container">

                <items jcr:primaryType="nt:unstructured">

                    <heading

                        jcr:primaryType="nt:unstructured"

                        sling:resourceType="granite/ui/components/foundation/form/textfield"

                        fieldDescription="Please provide page Heading"

                        fieldLabel="Page Heading"

                        name="./partnerHeading"/>

                    <description

                        jcr:primaryType="nt:unstructured"

                        sling:resourceType="granite/ui/components/foundation/form/textarea"

                        fieldDescription="Please provide page description"

                        fieldLabel="Page Description"

                        name="./partnerDescription"/>

                    <container

                        jcr:primaryType="nt:unstructured"

                        sling:resourceType="granite/ui/components/foundation/container">

                        <layout

                            jcr:primaryType="nt:unstructured"

                            sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"

                            maximized="{Boolean}false"/>

                        <items jcr:primaryType="nt:unstructured">

                            <column1

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/foundation/container"

                                class="custom-section">

                                <items jcr:primaryType="nt:unstructured">

                                    <text

                                        jcr:primaryType="nt:unstructured"

                                        sling:resourceType="granite/ui/components/foundation/heading"

                                        level="2"

                                        text="LOCATION"/>

                                </items>

                            </column1>

                            <column2

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/foundation/container"

                                class="custom-section">

                                <items jcr:primaryType="nt:unstructured">

                                    <location1

                                        jcr:primaryType="nt:unstructured"

                                        sling:resourceType="granite/ui/components/foundation/form/checkbox"

                                        name="./location1"

                                        text="Location1"

                                        value="location1"/>

                                    <location2

                                        jcr:primaryType="nt:unstructured"

                                        sling:resourceType="granite/ui/components/foundation/form/checkbox"

                                        name="./location2"

                                        text="Location2"

                                        value="location1"/>

                                    <all

                                        jcr:primaryType="nt:unstructured"

                                        sling:resourceType="granite/ui/components/foundation/form/checkbox"

                                        name="./all"

                                        text="All"

                                        value="all"/>

                                </items>

                            </column2>

                        </items>

                    </container>

                </items>

            </column>

        </items>

    </content>

</jcr:root>


Create a clientlib in the same component with category as cq.authoring.dialog and add following CSS to it.

.coral-FixedColumn-column.custom-section {

    float: left;

    width: 45%;

}

.coral-FixedColumn-column h2 {

    margin:0;

}

It would look something like below image:

dialog.png

Let me know if you have any queries.