Search code examples
dialogaem

How to configure horizontal layout for aem touch ui dialog

I have a touch ui requirement where I need to place 2 text boxes side by side like the older ExtJs size widget. Is there a layout I can set to item to place those objects next to each other. For the older implementation I had written a custom widget with hbox layout. I think this should be supported now but cant find it in the docs. Any references will help. Thanks

Solution

  • You should use fixedColumn layout

    Please note that you will not see the columns in floating dialog mode, this layout is intended for fullscreen dialog, see the screenshots.

    Here is an example I put together:

    <?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="Sample"
    sling:resourceType="cq/gui/components/authoring/dialog"
    mode="edit">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <columns
                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">
                    <col1
                        jcr:primaryType="nt:unstructured"
                        jcr:title="General"
                        sling:resourceType="granite/ui/components/foundation/section">
                        <items jcr:primaryType="nt:unstructured">
                            <filed1col1
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/form/textfield"
                                fieldDescription="sample filed1col1"
                                fieldLabel="filed 1 col 1"
                                name="./filed1col1"/>
                        </items>
                    </col1>
                    <col2
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Phone Numbers"
                        sling:resourceType="granite/ui/components/foundation/section">
                        <items jcr:primaryType="nt:unstructured">
                            <filed1col2
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/foundation/form/textfield"
                                    fieldDescription="sample filed1col2"
                                    fieldLabel="filed 1 col 2"
                                    name="./filed1col2"/>
                        </items>
                    </col2>
                </items>
            </columns>
        </items>
    </content>
</jcr:root>

    Dialog in floating mode Dialog in floating mode

    dialog in fullscreen mode dialog in fullscreen mode

    As it is the case with any dialog related questions, you can write your own CSS to achive this functionality, however, you run the risk of dialog markup/classes changing in future which will render your CSS useless.