Sorting Preferences (List of DITA Topics) in AEM XML Web Editor Interface

Problem statement

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(DITA) 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.

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.

Solution

You can customize the AEM XML Web editor interface for DITA Map and provide a sorting option to the editor. To achieve it the following steps need to be performed.

Interface Customization

1. Overlay the

/libs/fmdita/ditamapeditor/core/editor/jcr:content/body/content/header/items/selection/items
to :- /apps/fmdita/ditamapeditor/core/editor/jcr:content/body/content/header/items/selection/items

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.

Persisting the Sorting Preference

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.

3. In the servlet, save this preference against any property (I have used ‘sortBy’) to some node, like

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

Sorting Logic

4. Overlay

/libs/fmdita/components/columnview/columnview.jsp
to
/apps/fmdita/components/columnview/columnview.jsp

Here the sorting of the references will be performed.

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.

// Sort the data, custom code

4.2 Similarly the following method as shown in the snapshot should also return sorted result.

Final Interface Snapshot

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.

References

• DITA maps:
  DITA maps are documents that organize topics and other resources into structured collections of information. For detailed information please refer to the document
• XML Documentation Add-On for AEM:
  The Add-On provides the capability of managing content and publishing it from AEM. For detailed information please refer to the user guide section of this document