Wednesday 31 July 2019

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.

No comments:

Post a Comment

AEMaaCS - Core Component's Children Editor

If you are using core components, you should be familiar with the children-editor for Tabs, Accordion, and Carousel. These components are th...

About Me

My photo
https://www.linkedin.com/in/arunpatidar26/ https://experienceleaguecommunities.adobe.com/t5/user/viewprofilepage/user-id/6786635 https://community.adobe.com/t5/user/viewprofilepage/user-id/12372253 https://forums.adobe.com/people/Arun+Patidar