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.
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.
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.
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.
Incase there is any failure in the dialog conversion the exception is shown up under the comments section.
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:
- Basic RTE
- RTE inside multifield
- Multiple Html5smartimage conversion (having more than one image in a dialog)
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.