Touch UI Dialog - Display fields in a same row in 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 a dialog 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 the 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
Create a clientlibs of category 'cq.authoring.dialog'
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%; }

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


Fullscreen mode

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



Package
You can install the below packages from GitHub to enable this feature for the Touch UI dialog. These works in AEM 6.3+

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

If you install this package, the 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 the 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.