Touch UI Component Converter

With the deprecation of Classic UI by Adobe and end of support by 2019, it's essential for the customers to migrate their sites from Classic UI to Touch UI. But this is a mammoth task and executing it without an automated tool requires a lot of manual work. To bypass these problems, Adobe has come up with an internal OOTB tool called the Dialog Conversion Tool which helps to convert existing components with only classic UI dialog(based on ExtJS) or based on Granite UI and Coral 2 to Touch UI.

But this tool has its limitations and fails to convert many classic UI dialogs to their touch UI versions, depending on the xtype of a dialog field that is in question. The OOTB Dialog Conversion tool creates the new dialog using the  Granite UI and Coral 3-based UI rules, but it skips what it cannot convert. It has been observed that the tool fails to convert checkbox, multifield, RTE and custom dialogs which has a combination of different xtypes. It also doesn’t provide the user any information about this failure and simply marks the conversion as a success.

We at TA Digital have extended this OOB conversion tool, to create a wholesome Touch UI Component Converter which is an admin tool that provides an interface to convert Classic UI dialog’s to Touch UI dialogs. This tool facilitates more control and more information is visible with conversion stats and comments. The tool creates a corresponding dialog for the touch-optimized UI at the same location in the content tree as the classic dialog. Along with dialog conversion, the Component Converter tool also provides basic content retention as well which is not supported by the OOTB tool.

Touch UI Component Converter Tool

Here’s how the tool looks like. The user needs to go to the path browser and select the component(s) which he wants to convert from the list of the components.

List of Components in the Path Browser

Select component to be converted

Upon clicking select the list of components under that path or the component itself if chosen, comes up on the tool interface. We can select the component that we want to convert by clicking on the checkbox and click on the Convert dialog button to convert it.

Select the path to a component to be converted

Upon successful conversion, we can see the success message on the tool, along with some additional information like the dialog path, component name, the conversion result, etc.

Successful conversion

In case there is any failure in the dialog conversion the exception is shown up under the comments section.

Unsuccessful conversion

The TA Touch UI Component Converter tool has the ability to convert classic dialogs with many xtypes that the Adobe tool doesn't support. This includes the following xtypes:

1.    Basic RTE

2.    RTE inside multifield

3.    Html5smartimage

4.    Multiple Html5smartimage conversion (having more than one image in a dialog)

5.    Html5smarfile

6.    Datepicker

7.    DateField

8.    Htmleditor

9.    Label

10.Buttongroup

11.Checkboxgroup

12.Timefield

Along with adding rules to convert additional xtypes, an additional “Comments” column was added in the interface of the tool, to show the list of fields/xtypes that the tool couldn't convert. This way the user is aware of the fields that were not successfully converted and he can make changes manually. The Adobe tool doesn't provide such information and so the user must review all the converted dialogs and possibly make additional adjustments.

TA Touch UI Component Converter tool also provides data retention for various dialogs. This means that the Touch UI dialogs will be prepopulated with the data that was authored in the classic UI dialog before the conversion. This provides easy migration of components, and the user doesn't have to re-author the component.