Experience Manager Guides

DivrajSingh · 12/18/22

Context

With AEM Guides (version 4.x or lower) users can publish content to various output formats including AEM Sites, PDF, HTML and more using the ditamap dashboard (see [1]). This dashboard has various tabs (output, reports, output presets etc.). There are times when you want to make minor change in behavior of out of the box interface.

Let us understand this type of use case with a requirement.

Requirement

Let us take an example of output to AEM Sites where the generated output can be previewed directly from the link available under "Ouputs" tab on the map dashboard.

Out of the box the preview link available from outputs tab opens the page in preview mode - where you will not see options to publish the AEM Site page to the publish instance because in preview mode the publishing and other site page options are not available.

Reason being, the URL of preview link contains "?wcmmode=disabled" which hides various other options.

But, to be able to see all options from preview, the URLs should have a prefix "editor.html" and should not have suffix "?wcmmode=disabled"

see [2] and [3] - to understand the terms used above.

Change needed

To be able to change the default behavior/link in the output tab of map dashboard, i.e. manipulating the preview link for AEM site page

from: /page-path.html?wcmmode=disabled
to: /editor.html/page-path.html

You can write a custom client library that overrides the map dashboard output tab behavior. Below are the details on how to achieve this:

Create a client library folder with categories "etc.designs.fmdita.clientlibs.reportpage" (see [4])
Add a javascript under that to subscribe to the page model and make necessary changes to the rendered html (see [5])

Once you do above changes, client-side code will update the URLs of only the generated AEM Sites output links to add the desired prefix/suffix, which will then open the page in the preview, but now with global-bar.

Downloads

As a sample, you can start with the base setup using above explained customization, for this you can download the package from this link.

To use this, upload this package via AEM package manager. This will install the clientlibrary folder at path "/apps/fmditacustom/clientlibs/dashboard-outputs", and it will contain the javascript in file "/apps/fmditacustom/clientlibs/dashboard-outputs/js/overrides.js"

You can also localize this code in your code repository.

[1]: Ditamap dashboard in AEM Guides