Touch UI Dialog Conversion Tool
CMS, Enterprise Solutions, Java

Touch UI Component Converter

With the deprecation of Classic UI by Adobe and end of support by 2019, its 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 combination of different xtypes. It also doesn’t provide the user any information about this failure and simply marks the conversion as 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 dialog’s. 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, Component Converter tool also provides basic content retention as well which is not supported by the OOTB tool.

Touch UI Component Converter 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
List of Components in the Path Browser
Select component to be converted
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 check box and click on Convert dialog button to convert it.

Select path to component to be converted
Select path to 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
Successful conversion

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

Unsuccessful conversion
Unsuccessful conversion

The TA Touch UI Component Converter tool has the ability to convert classic dialogs with many xtypes that the Adobe tool doesnt 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 couldnt convert. This way the user is aware of the fields that were not successfully converted and he can make changes manually. The Adobe tool doesnt 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 doesnt have to re-author the component.

 

About The Author