AEM - Touch UI Dialog - Display fields in a same row | Two Column Layout

In Touch UI dailog Coral/Granite type fields displays in a stack/top to bottom, one after another in a floating dialog and in fullscreen. In fullscreen it can be displayed in 2 column layout if column layout is used for dialog (columns inside granite/ui/components/foundation/layouts/fixedcolumns type )

and It will show fields in dailog like below:

Floating mode and Fullscreen mode

Improve Authoring Experience

Visit https://experiencemanaged.com/posts/improve-the-aem-authoring-experience-ax.html blog to see how authoring experience can be improved.

There are several scenarios where having a top-to-bottom approach to all fields can have a negative impact on the authoring experience. To improve the experience, fields can be added one after another in the same row.

How to do it

• Create clientlibs from code mentioned in ClientLibs Code section
• Add rowresume (Boolean) = true property in the field to display field in the same row. Make sure this property is added in all the fields which should display in the same row.

rowresume property

• Add rowresume property in the field, if Coral2 type is used 
• if you are using coral3/Granite type then add rowresume property in granite:data node

'rowresume' Coral2 resource type

'rowresume' Granite/Coral3 resource type

ClientLibs Code 

1. Create a clientlibs of category 'cq.authoring.dialog'
2. Create js.txt , css.txt, dialog.field.2column-layout.css and dialog.field.2column-layout.js files with below content or click on the file name to get the file from Github.

js.txt
dialog.field.2column-layout.js

dialog.field.2column-layout.js

(function($, $document) {
    "use strict";
    $document.on("dialog-ready", function() {
        var items = $('[data-rowresume="true"]');
        $(items).each(function(i) {
            $(this).closest('.coral-Form-fieldwrapper').addClass("coral-Form-fieldwrapper--rowresume");
        });
    });

})($, $(document));

css.txt
dialog.field.2column-layout.css

dialog.field.2column-layout.css

.coral-Form-fieldwrapper.coral-Form-fieldwrapper--rowresume {
    width: 44%;
    display: inline-grid;
    margin: 0 3%;
}

Dailog fields after adding rowresume property to width, height, dropdown and radio group fields

Fullscreen mode

Dailog fields after adding rowresume property to height, dropdown and radio group fields

Package

You can install below packages from GitHub to enable this feature for touch ui dialog. These works in AEM 6.3+


However, packages contain:
1. Clientlibs to enable side panel option in touch ui dialog.
2. Clientlibs to enable displaying touch ui field in two-column layout in floating touch UI dialog


If you install this package, Below files will be installed in the repository at 

• /apps/commons/clientlibs/dialog/js.txt
• /apps/commons/clientlibs/dialog/js/dialog.field.2column-layout.js
• /apps/commons/clientlibs/dialog/css.txt
• /apps/commons/clientlibs/dialog/css/dialog.field.2column-layout.css

Other files are getting used to enable side panel option in touch ui dialog, Find more details about it at AEM - Touch UI Dialog - Assets Panel

Limitation:

Work only with form field type.