May 10, 2020
Estimated Post Reading Time ~ 1 mins

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 )


ootb-cl


and It will show fields in dailog like below:

Floating mode and Fullscreen mode

ootb-column

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

coral2-prop
'rowresume' Coral2 resource type

coral3-prop
'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%; }

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

dialog

Fullscreen mode

fullscreen

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

rowcontinue2

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.
aem4beginner.blogspot


By aem4beginner

No comments:

Post a Comment

If you have any doubts or questions, please let us know.

image

Ad Blocker Detected :(

Please consider supporting us by disabling your ad blocker.

Please Disable your adblocker and Refresh the page to view the site content.