AEM 6.3 : 5 things you need to know while building Touch UI components

Posted in AEM Tutorials By Raj On September 19, 2017

 

Are you an AEM developer and working on AEM 6.3 Touch UI components then this article is for you, based on my experience, I am putting some common things which every AEM developer touches while building AEM Granite UI based components

Out of 10 components, I think minimum 7 or 8 components touch below things

Granite UI Multifield Component

The multifield component is very useful when it comes to AEM dialogs and if you don’t have multifield control or if you are not using Multifield control then the authoring functionality of your component is not maintainable you need to author something like below which is totally annoying for content author’s 

<linkText>=<LinkUrl>;<Linktext>=<LinkUrl>

In AEM 6.3 the Coral 3 supports Multifield component, in earlier versions of multifield component supports only one field but, in AEM 6.3 coral 3 supports more than one field so, you do not need to use any custom ACS commons multifield components but, if you are looking for more functionalities something like min items and max items validations etc… then I would recommend to go for ACS commons 

If you are looking for How Multifield works in AEM 6.3 coral 3 then refer my below article

Populate Granite UI dropdown using data source object

Another frequently used thing is populating Granite UI dropdown list using data source object, In earlier versions of AEM, to populate dropdown list dynamically, we had to write servlet which exports data in the form of JSON, but in Granite UI we don’t need to write separate servlet to handle this situation we can use DataSource object to populate dropdown list, for more information on Datasource object refer below article

Validation Framework

Another important thing we need to consider while building Touch UI dialogs is writing custom validators, the Granite UI is built on top of JQuery so if you have experience on JQuery and selectors then it is easy to write validations in Granite UI, you can refer below article on validation

If you need more information on Validations then I suggest you refer core package, it contains so many validations but you must have knowledge of Javascript to understand

Coral 3 resource type’s

The resource type’s for widgets is different than the earlier versions of AEM, in AEM 6.3, the Touch UI dialogs are using Coral UI components, if you are new to Coral UI then it is very difficult to remember entire resource path, I have consolidated most of the resourceTypes and published in separate article

Re-using tabs

Another important thing is re-using tabs, create tabs in single place and re-use it in other places by using below code

There is a good article on it, please check below link

 

  • dd

    Hi Raj,

    Thanks for the article, you have mentioned that understand Validations we should refer to core package which contain many validations. Could you please let me know which core package are you referring to ? Where can the validations be found ?

    Thanks