Contextual Path Browser for Component Dialogs

Tags:

March 5, 2017 | Brett Birschbach

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.

screen shot of Contextual Path Browser AEM OOTB

The author is required to wade through all top-level sites to first pick “we-retail”, then make further selections of “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:

screen shot of authoring a path on an english site

Authoring a Path on the Spanish site:

screen shot of authoring a path on a 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.

screen shot of how to configure a page root provider

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`.

screen shot of fields resource type

Learn More

For additional guidance, visit the official documentation.