{"id":53871,"date":"2021-08-25T20:47:12","date_gmt":"2021-08-25T15:17:12","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=53871"},"modified":"2024-11-27T12:13:17","modified_gmt":"2024-11-27T06:43:17","slug":"sorting-preferences-list-of-dita-topics-in-aem-xml-web-editor-interface","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/sorting-preferences-list-of-dita-topics-in-aem-xml-web-editor-interface\/","title":{"rendered":"Sorting Preferences (List of DITA Topics) in AEM XML Web Editor Interface"},"content":{"rendered":"

Problem statement<\/b><\/h4>\n

For editing the XML content AEM provides an XML web editor interface, where editors can edit content, add XML elements in the markup and refer one or more Darwin Information Typing Architecture(<\/span>DITA<\/span><\/a>) topics\/articles in a DITA topic. Editors can navigate the preferences list and include it in the DITA topic. The out of the box provided preference list is not in sorted order, so whenever an editor wants to include a specific topic in a DITA topic he\/she has to scroll down the list and find it. Since the list is not in sorted order, if the list is too huge it’s difficult for the editor to find it.<\/span><\/p>\n

To make the editor experience better there is a need to provide a Sorting option to the editor so that the required topic can be easily identified in the list.<\/span><\/p>\n

Solution<\/b><\/h4>\n

You can customize the AEM XML Web editor interface for <\/span>DITA Map<\/span><\/a> and provide a sorting option to the editor. <\/span>To achieve it the following steps need to be performed.<\/span><\/p>\n

Interface Customization<\/b><\/h4>\n

1. Overlay the <\/span><\/p>\n

\/libs\/fmdita\/ditamapeditor\/core\/editor\/jcr:content\/body\/content\/header\/items\/selection\/items<\/span>
\nto :- \/apps\/fmdita\/ditamapeditor\/core\/editor\/jcr:content\/body\/content\/header\/items\/selection\/items<\/span><\/p>\n

and add toggleSort item (toggle button for Ascending, Descending) under it. By overlaying the node and adding the required items we can see this option on the AEM web interface.<\/span><\/p>\n

\"\"<\/p>\n

Persisting the Sorting Preference<\/b><\/h4>\n

2. On click of this custom button added, make an ajax call to servlet by passing the preference to be stored like ascending(a-z) or descending(z-a) as the value attached to the button. This will save the editors preference and when the editor accesses the interface next time, the selected preference will already be there.<\/span><\/p>\n

3. In the servlet, save this preference against any property (I have used \u2018sortBy\u2019) to some node, like<\/span><\/p>\n

\/apps\/fmdita\/ditamapeditor\/core\/editor\/jcr:content\/body\/content\/aside\/items\/references\/layout\/layouts\/columns <\/span>(overlayed node) OR to the editor profile.<\/span><\/p>\n

\"\"<\/p>\n

Sorting Logic<\/b><\/h4>\n

4. Overlay<\/span><\/p>\n

\/libs\/fmdita\/components\/columnview\/columnview.jsp
\nto
\n\/apps\/fmdita\/components\/columnview\/columnview.jsp<\/span><\/p>\n

Here the sorting of the references will be performed.<\/span><\/p>\n

4.1 Items at line no 33 need to be sorted. This is one of the custom sorting logic, one can have their own implementation for sorting.<\/span><\/p>\n

\/\/ Sort the data, custom code<\/span><\/p>\n

\"\"<\/p>\n

4.2 Similarly the following method as shown in the snapshot should also return sorted result.<\/span><\/p>\n

\"\"<\/p>\n

Final Interface Snapshot<\/b><\/h4>\n

\"\"<\/p>\n

On clicking the ascending\/ descending button the preferences will be stored as explained in the previous steps. Here, we get the preference list in sorted order. Editor can easily look for the required item from the list and they will now have an option to toggle between ascending and descending.<\/span><\/p>\n

References<\/b><\/h4>\n