Expand my Community achievements bar.

Reusable Touch UI Dialogs

Avatar

Community Advisor

10/3/22

Company Name: Finning.com

Company URL: https://www.finning.com

Your Name: Brian Ka Sing Li

Your Title: Senior AEM Software Engineer

Describe your company, the customer experience and business challenge(s) you set out to solve with Adobe Experience Cloud products, and how long your company/organization has been using Adobe Experience Cloud products.

Finning digital has been using AEM for many years and has many components which had too many common Touch UI fields and tabs that were re-written every time, making the code very WET (write everything twice).

 

 

 

Describe how you have integrated and used multiple Adobe Experience Cloud products to solve these challenges to improve and personalize the customer experience/journey. Please provide information that will be helpful in understanding your integration (e.g. architecture diagram, step by step process integration flow, etc.).

We solved the issue by introducing the re-usable Touch UI configuration architecture. This architecture introduces a common Touch UI dialogue namespace which includes pre-configured Touch UI fields and tabs, that can be referenced by the developer from the code. Making changes to the  common Touch UI dialogue namespace will update all component's Touch UI that are referencing this. This Touch UI configuration architecture has really helped AEM developers develop faster component's and allows the best level of maintenance for components.

 

For example, most of f's components use the rich text editor. Most of these components have the same configuration Touch UI fields, so for every AEM content component, we created a common Touch Ui dialogue namespace with the richtext common Touch UI field, and we have used the granite UI 1.0 API, granite/ui/components/coral/foundation/include, to include all fields into all existing components. 

 

Tutorial can be found here -> https://sourcedcode.com/blog/aem/dry-way-of-using-richtext-granite-ui-component-in-aem-for-static-te...

 

Based on your successful use and integration of multiple Adobe Experience Cloud products, describe how it has transformed the customer experience/journey, and the value, business impact, and results your company/organization has realized. Please cite both qualitative and quantitative results as applicable.

This Touch UI configuration architecture has really helped AEM developers develop faster components and allows the best level of maintenance for components. This solution saves time and energy from the entire AEM content component's development cycle.

 

Elevate Experience Manager Experience Platform