Contextual Path Browser for Component Dialogs

The Contextual Path Browser field augments the Adobe Experience Manager (AEM) authoring experience for choosing a content path by narrowing the interface selection down to just the applicable content, increasing author efficiency, and reducing easy-to-make mistakes. This tool aligns with Bounteous’ mantra to treat authors in AEM as first-class “users” no different than visitors of the published website.

Use Cases
The Contextual Path Browser field is applicable for any use case where an author is required to enter a content path and it is expected that the content path resides within the current website being edited.

Example uses include:
Creating a link on the homepage to a subsection of the website
Referencing content to display in a “List” or “Navigation” component
All other use cases where authored components reference site content

To demonstrate the first use case in action let’s use we-retail US-EN and US-ES websites as an example, with an author setting the Hero Image button path. By default, this is what the path selection user interface (UI) looks like with the out-of-the-box (OOTB) AEM path browser field.


The author is required to wade through all top-level sites to first pick “we-retail”, then make further selections of “The United States” and “English” (or “Español”) just to get to the correct site. From there, the author can drill down to the correct page, but those 3 unnecessary clicks to drill down to the appropriate site are required every time the author is specifying a path. Furthermore, for a power user that is maintaining multiple country and language versions of the same site, this process can be extremely error-prone (e.g. selecting an English path from the Spanish website) as the page trees all look very similar.

With Contextual Path Browser, the UI is simplified to put the author into the context of the current website, eliminating those extra clicks and ensuring the author is selecting content only from the appropriate site.

Authoring a Path on the English site:


Authoring a Path on the Spanish site:

How to Use
1. Configure a Page Root Provider
Configure the ACS AEM Commons service for Page Root Provider, which allows AEM to identify the homepage of the site being edited. This is done by adding an OSGi factory config for `com.adobe.acs.commons.wcm.impl.PageRootProviderConfig`. For the we-retail example above, a simple regex of `/content/we-retail/[a-z]{2}/[a-z]{2}` can be used to enable the functionality for all international websites.


2. Update Path Browser Fields to Contextual Path Browser
For any path field on a dialog that is currently using `sling:resourceType` of `granite/ui/components/foundation/form/pathbrowser` or `granite/ui/components/coral/foundation/form/pathfield` update the resource type instead to `acs-commons/touchui-widgets/contextualpathbrowser`.


Learn More
For additional guidance, visit the official documentation.

Source: https://www.bounteous.com/insights/2017/03/05/contextual-path-browser-component-dialogs/