Using a JSON file with the Dropdown widget on the Metadata Schema

Posted on Wednesday, January 3, 2018 By

Have to use where you need to setup a metadata schema with a dropdown widget where the options needed to come from a JSON file? Keep on reading…

First, the JSON file.

The JSON file needs to follow the same structure as below.

 "options": [
 "value": "en-gb",
 "text": "English-United Kingdom"
 "value": "en-us",
 "text": "English-United States"
 "value": "fr-ca",
 "text": "French-Canada"
 "value": "fr-fr",
 "text": "French-France"
 "value": "de-de",
 "text": "German-Germany"
 "value": "es-mx",
 "text": "Spanish-Mexico"
 "value": "es-es",
 "text": "Spanish-Spain"

There needs to be an “options” array and each element in the array needs to have a “value” and a “text”. The “text” value is what is displayed to the end user and the “value” value is what is saved in JCR.

Second, where to store the file.

You can upload this file to AEM as an Asset or upload it somewhere as a nt:file. Where its uploaded will define how the widget on the metadata schema needs to be configured.

Lastly, how to configure the widget.

The dropdown widget on the metadata schema lets you define a “JSON Path” property. This property needs to point to the nt:file node of the JSON file.

What does this mean?

If you have uploaded the JSON file as an Asset, this value needs to be set to the original rendition of the asset. For example /content/dam/myproject/myfile.json/jcr:content/renditions/original. If you have upload this file as an nt:file, the path would be something like /etc/myconfigurations/myfile.json.

At the time of writing this blog, there is a known issue where if the content of the JSON file changes, you need to open the schema again and hit save for the new changes to populate. 

12:05 PM Permalink

Are you ready for AEMRockstar 2018?

Posted on Monday, January 1, 2018 By

Its back for another year! Join us at Adobe Summit 2018 for one of the most popular sessions from Summit 2017. It’s one part tips and tricks and one part exciting “Shark Tank” experience where the winners are chosen in real time.

This year we’re focusing on not just presentations but live demos to really show the power of the tips and tricks that our contestants have come up with. Think you have an idea that is good enough to battle it out with other finalists in Las Vegas? Submission closed

If you’re chosen as one of our presenters, you’ll receive a free pass (valued at $1895) to Summit on March 25-29, 2018 in Las Vegas, and the opportunity to win cool prizes like airline tickets, laptop, or who knows what! And don’t forget about the bragging rights. 


Submission closed: January 29, 2018

Tips for submission:

  • Multi-Solution items (AEM + Analytics, IO, etc.) present better to the varied audience of Adobe Summit.
  • Think of the value proposition that your tip or trick is solving. Be prepared to defend it.
  • Does it “wow” when demoing?
  • Adobe customers using Experience Cloud or Adobe Partners with a customer co-presenter are highly desired.

To be considered, all you have to do is submit your tip using this online form. We’re looking for all things AEM. Sites, Assets, Mobile, Forms, anything and EVERYTHING! We want tips that you believe will show your fellow AEM marketers and technologists new things about AEM and help them to do their jobs more effectively and efficiently. Ultimately, your judges will be the session attendees, including leaders from the AEM Product and Marketing teams, as they vote for their favorite tips. Don’t be on the fence about submitting a tip — you might be surprised how useful things can be to others.

We’ll be screening your tips based on how innovative, practical, and valuable they are as well as how broadly they could be used by AEM marketers and technologists at other companies in different industries. We’ll select up to 5 finalists who will come to Las Vegas and present their tip to one of the largest audiences at the conference. This is a great opportunity to attend Summit and showcase your talents to the world!

We are giving away some swag to everyone who submits an idea as well. Every person who submits an idea gets the new vol 2 AEM Rockstar sticker (subject to availability)!

Eligibility Requirements (the fine print)

  • Adobe employees are not eligible
  • You are responsible for all expenses except the Adobe Summit registration.
  • Finalists from the previous year are not eligible.

2017 Recap

The first ever AEM Rockstar session was a resounding success. We were in the top 10 most attended sessions at Summit last year! As for prizes, last year, in addition to the free Summit pass, we gave away,

  • 1st – DJI Mavic Pro Drone
  • 2nd – $200 Amazon Gift Card
  • 3rd – $100 Amazon Gift Card

To get your creative juices flowing, below are our finalists and their submissions from last year.

Dan Klco, Perficient

“Integrating AEM with other Adobe Marketing Cloud solutions using data layers powered by Sling Models.”

Rima Mittal, Sapient

“Need a script to change existing production content? Sling Pipes to the rescue.”

Robert Langridge, Carphone Warehouse

“How Dixons Carphone gives their authors the ability to generate designs to be used in their AEM Mobile application.”

Ruben Ruesser, headwire, Inc.

“Making sure all your developers generate consistent files during AEM development.” – the AEM Developer Companion

Martin Fitch, Kaiser Permanente

“How Kaiser Permanente achieved their stringent approval requirements using AEM workflows.”

Congratulations to Dan Klco for being our inaugural winner.


Submission closed: January 29, 2018




6:57 AM Permalink

Tips & Tricks: Link Tag Management for AEM

Posted on Wednesday, August 30, 2017 By

We are back with another Rockstar Tip & Trick guest post from Steven Carter, who is a Web Developer for HS2 Solutions, a digital transformation company based in Chicago. Like our other guest bloggers, Steven was a runner up in this year’s AEM Rockstar competition. For more from Steven, connect with him on LinkedIn ( or GitHub (

Link Tag Management for AEM

Links (anchor tags) are a ubiquitous part of any site, and yet as developers, we hardly give them a second thought. We tell the link where we want the user to be directed to next, and that is generally the extent of the consideration needed for them to work properly. On an AEM site, however, there are a few additional dimensions to the thought process that we need to consider. Will this site be internationalized? Does the label for this link need to be translated, or the target address changed for the internationalized version of the page? For example, say you have an external link pointing to, but on the Spanish translated version of your site, should that external link instead be  Should this link be opened in an external window or tab instead of in the current tab? These considerations and more can be addressed easily if a little planning and forethought are put into the way you add links to the page. By adding a custom JSTL tag to resolve links before adding them to our templates, we have been able to exercise considerable control over our links and can add to this functionality even years after the site was initially built.

Fig. 1: Here is an example detailing the usage of our resolveLink tag. The path is passed to the tag, and then the resulting map of properties is returned into a variable. We can then access specific properties, such as the “resolved” link href, label, or the target attribute and place those within the anchor tag.

Getting Started

The first step in managing your links is adding a simple tag that can take a link and “resolve” it, and then use that tag for every link on your site. This tag takes the link address and applies rules and other behaviors to alter the final link. In the next few sections, I’ll give some examples of different alterations we perform to the final link. Before we get into those specific examples, I want to point out that since we pass all of our links through this tag before they are rendered on the final page, we have a lot of control. As an example, let’s say that months after a site was built, we decide the links going to a certain portion of the site should open in a new tab. Instead of returning to the templates and identifying all of the links that point to that section of the site, we can simply add a new rule to our link resolution tag. A quick substring match and we can update the anchor tag target attribute as desired.

Internal vs. External links

One of the first checks we added to our tag was to identify whether the href attribute pointed to an internal (served by our AEM instance) or an external location. Since we would like to keep the user on the site, all external links should be opened in a new tab or window.

Translation of External URLs

One item that is easy to overlook when translating a website is the external websites. As an example, while is the correct domain for English users, your Spanish users should ideally be linked out to It’s also possible that if you’re linking to an external site somewhere, that the paths may completely differ based on the language. Both of these scenarios are easily handled by a link resolution tag.

Automatic Generation of Link Label

For internal links which point back to a page on our internal AEM site, we use the page’s navigation title as the default link label. This prevents the need for a content author to set a label for each link they might add to a page and allows for easier link generation for components that automatically construct a link tree. For sites that are translated, the navigation title will already have been translated, so this is one less item that needs to have a translation added for each language.

Externalizing Paths

In some cases, we want the final path provided from this tag to be externalized. That is, it has the virtual host instead of the internal publish server address. We created our own code to handle the externalizing of these paths to provide us more control over the final path. We also have a Boolean attribute on the resolveLink tag so that we can choose when we want this externalizing code to run, as there are some cases where we may want the path externalized.

Append Extension or Sling Selector

Here’s another case where we have a Boolean attribute added to the resolveLink tag to modify what we’re asking the tag to do for us. In this case, we default the attribute to true, because in most cases we want an extension to be appended to the final path. Now, when the author uses the pathbrowser widget to select a path (which typically only points to the JCR node, and does not supply its own extension) we can add the required extension to the URL. This is also powerful if you have need of custom sling selectors, which can be added to the URL before the extension is appended. The addition of these extensions is another place where our earlier check for internal vs. external links is helpful because extensions should never be added to external URLs.


When using the AEM launches feature, we sometimes wanted to have a little more control over where content was being loaded from. Say for example we have a component that pulls its content from a path, but the content from that path is not included in the launch. With our launch path resolution code, we can verify if the data exists at the launch path and fall back to the base site automatically if the content does not exist there.

Final Thoughts

As with most things in the programming world, you will be rewarded if you plan ahead and are diligent in your implementation. If every link is resolved with a custom tag before being added to your templates, you can exercise a lot of control and simplify fixes and other adjustments you might need at a later time. You could compare this to always using an i18n tag when displaying text on pages, which pays dividends later when you begin to internationalize your site.

All opinions expressed by Steven Carter are his own and not Adobe’s.

1:26 PM Permalink

AEM Best Practices are Live on the SPP

Posted on Tuesday, August 29, 2017 By

If you haven’t visited the Solution Partner Portal (SPP) lately, it has an updated training experience that includes a new series by our team, Adobe Partner Experience (APx). These Implementation Best Practices, written by our team of expert Technical Architects, are drawn from our experiences implementing solutions across Adobe Experience Cloud Platform. Our first installment features articles related to Adobe Experience Manager, but we have upcoming articles on how to access resources for all the solutions, and also a series on Campaign Best Practices. 

The following APx Best Practices are now published on the SPP. Click the title to be redirected to the full article.

Multitenancy and Concurrent Development in AEM: An analysis of the types of issues that a business might face when attempting to implement AEM, using multiple teams of developers and trying to meet the demands of multiple brands.  Explore strategies for mitigating risks and driving communication and efficiency in project delivery.

Performance and Load Testing AEM – Author Basics: Explore the topic of load and performance testing and the basic best practices for ensuring a successful go live by utilizing tools such as JMeter and ToughDay.

Continuous Integration for AEM: Learn more about three commonly used tools that are central to the continuous integration process:

  • Jenkins: used for continuous integration, version control, and the compiling, testing, and deployment of your code.
  • SonarQube: used for code analysis and to track and measure code quality and technical debt.
  • Nexus OSS: a free repository manager that allows for the mirroring and storage of Maven dependencies.

The new training experience on the Solution Partner Portal has combined all of Adobe’s best training content in one place. Resources are organized by Solution and by role, and the on-demand training is now powered by Adobe Captivate Prime. You’ll also find new Partner Learner Journeys that will guide you through which trainings to take to achieve certification.

Stay tuned for details about our APx Best Practices webinar, which will be presented by Ian Reasor, an A.C.E Architect from Adobe Partner Experience team. 


2:12 PM Permalink

AEM Multi-Site Tips & Tricks

Posted on Monday, June 12, 2017 By

And…..he’s back! We are excited to share another post in the AEM Rockstar Tips & Tricks Guest Blog series! This Tips & Tricks post is a follow-up from Brett Birschbach, an AEM Certified Architect and AEM Rockstar semi-finalist who presented at Adobe’s global virtual developer conference, IMMERSE 2017. Brett previewed his Tips & Tricks in a preview post before IMMERSE. As promised, he’s returned to share more from his presentation. 

Brett is the Adobe Marketing Cloud Solutions Architect for HS2 Solutions, a digital transformation company based in Chicago. He is a hands-on problem solver with experience leading large multinational, multi-site platform projects.  Brett led the development of the new Shared Component Properties feature in the open-source ACS AEM Commons library. For more from Brett, connect with him on LinkedIn,  ( ) or visit his Github: HitmanInWis.


AEM Multi-Site Tips & Tricks – Top 3½ Tips from IMMERSE 2017


Faced with a multi-site project and looking to get off on the right foot?  As mentioned in my previous article, most mature AEM installations involve multiple sites, but nearly all began as a single site before expanding to support more.  Why should you care about “getting it right” up front, rather than figuring it out as you go?  Well…

  1. Multi-site code structures don’t happen by default.
  2. Setting up the right structures makes it easy for developers to do the right thing.
  3. Getting multi-site wrong early will haunt you as long as the sites live.

But hey, I don’t need to convince you of this, or else you wouldn’t invest your time into this article.  You’ve got sites to write, and lots of them!  So let’s get right to the good stuff – the tips most voted as new/helpful by the attendees of the Adobe IMMERSE session on Multi-Site Platforms – Setting your Codebase Up for Success.  These tips were demonstrated in the context of coding a multi-site platform for a fictitious football league (HFL) including the Green Bay Peckers (Go Peck Go!) and Chicago Boars (a.k.a. Chicago Bores), the demo of which is available to download at the bottom of this article.


Tip #3-1/2 – Leverage the Page Root Provider in ACS Commons

IMMERSE Presentation Time Slots: 18:21-19:24, 27:04-28:09

OSGi Configs for Page Root Provider:

Coming in at a virtual tie in votes with Tips #3 and #2, the Page Root Provider in ACS Commons earns the distinct honor of being Tip #3½ by playing a supporting role making Tips #3 and #2 possible.  The Page Root Provider in ACS Commons gives your code a simple, reliable way to determine the homepage of the site pertinent to the request being processed.  This allows you to:

  • Write OSGi services and components with generic code that executes on content specific to the applicable site.
  • Easily reference the homepage node from code for complex use cases as well as simple tasks like rendering a link to the homepage.


Tip #3 – Use the “Contextual Path Browser” Field

IMMERSE Presentation Time Slots: 19:24-20:12, 28:09-29:05 

OOTB Path Browser Field:


Contextual Path Browser Field:

Frankly, I was blown away by the popularity of this tip–it is such a simple and narrow concept compared to Tips #2 and #1.  The tip’s simplicity, however, is offset by its even simpler effort to implement.  The Contextual Path Browser field in ACS Commons (sling:resourceType = acs-commons/touchui-widgets/contextualpathbrowser) is a drop-in replacement for AEM’s OOTB Path Browser field with one powerful improvement – the ability to limit the author to the “context” of the site on which the component lives.  The main benefits include:

  • Less clutter and clicks for authors, automatically putting them where they need to be.
  • Authors working on multiple sites are far less likely to accidentally navigate into an incorrect site and potentially create invalid links.


Tip #2 – Use Shared/Global Properties

IMMERSE Presentation Time Slots: 20:13-22:09, 29:05-30:31

Component Supporting Shared and Global Properties Dialogs:


Shared Properties Dialog – Properties Shared Across All Pages within a site:


Global Properties Dialog – Logo Shared with Header:

Tip #2 comes as a long-awaited boon to battle-hardened AEM developers, who have custom-built support for “global properties” again and again. Developers try to ease the burden on authors for component values that need to be repeated on multiple pages of a site, but that authors don’t want to have to set (and maintain) on every page.   Often, it is tempting to hard-code these values, but that has limitations in that it doesn’t allow authors to change the values (the opposite of a CMS) and it doesn’t allow the value to differ between two sites.  Shared Component Properties in ACS Commons solves both of those issues, allowing a property to be set once for an entire site, but still different on individual sites.

Take the “Tout” component in the images above that links off to the Schedule page.  This component needs to link to the same page and have the same copy on all pages of the Green Bay Peckers site, but have a different link and potentially different copy on the Chicago Boars site.  Shared Component Properties allows this component to do just that, with no specialized coding on the part of the developer.  The “Tout” component also renders the team logo on all pages, another great use case for Shared Component Properties.  Because the site header also uses that logo, however, a “global” property dialog is used to share the logo between the two components.

There are numerous applications of Shared Component Properties, even in non-multi-site solutions.  I encourage you to check out the main documentation page for Shared Component Properties to learn more.  In summary, benefits include:

  • Allowing repeated component copy and configs to be authorable without putting a burden on authors to maintain on multiple pages.
  • Allowing shared properties to be internationalized via standard AEM translation (as opposed to a solution using the design dialog).
  • Sharing properties within a sling:resourceType (termed “shared” properties).
  • Sharing properties across sling:resourceTypes (termed “global” properties).
  • Ability to simplify headers, footers, and other site-wide content to no longer require the use of an iparsys.

For a deep dive on Shared Component Properties, check out my article on Shared Component Properties.

Tip #1 – Add a Living Style Guide to Each Site

IMMERSE Presentation Time Slots: 34:57-37:49, 42:10-43:36 

Green Bay Peckers Style Guide vs Chicago Boars Style Guide

Let’s just call this tip “the secret to make everyone like you.”  When this tip came in as the top voted tip, I can honestly say I wasn’t surprised.  Why?  Simple – it is extremely useful, everyone (especially clients) loves it, and it costs you nothing to implement.

Living style guides are so highly touted by UI designers, front-end developers, and marketers, that the term is a buzzword applied to nearly all style guides these days, regardless of whether they are actually living.  However, when you do a living style guide in AEM, you get the real thing.  Because the style guide is rendered by AEM using real live code, it is guaranteed to be 100% up to date at all times.

Though few people will argue against the usefulness of a living style guide, many will claim that such a construct is too expensive to produce and maintain.  I’ll be the first to admit that I was originally a skeptic sitting in this camp.  However, after having done this on multiple projects, I’ve come to a new realization – a living style guide in AEM is effectively free.  Here’s why:

  • Your front end developers are already authoring components in all of their variations in order to style them. As such, the only overhead for a front-end developer is the original setup of the style guide page structure (perhaps a day) and incremental overhead of exporting their authored content from AEM to the codebase (literally seconds).
  • Your QA personnel is likely testing components by authoring them completely from scratch, repeating the work that is already being done by your front-end developers. With the style guide exported to the code base and thus deployed to AEM, along with the code changes to test, your QA team will often now be 75-100% set up for their component testing, recouping any extra time (and likely more) spent by your front-end developers creating and maintaining the style guide.
  • Because a complete style guide requires all variations of the component to be displayed, it is a forcing factor to ensure your developers actually work through all variations, thus reducing the number of bugs that make it to QA in the first place.

Your economics professor probably drilled into your head that “there’s no such thing as a free lunch,” but when it comes to AEM living style guides your professor was wrong!  Benefits of a living style guide include:

  • 100% up-to-date rendering of site components in a consolidated, easy to navigate location.
  • The ability for developers to easily verify a styling change across multiple sites and components.
  • The ability for marketers to see what a new brand site and/or styling scheme will look like with very little development time and effort.
  • Fewer bugs that get to and/or through QA.

But wait, there’s more!

…says the infomercial trying to sell us the latest widget, I know I know.  But there really is more to multi-site tips & tricks – 12 more tips to be exact!  Each principle covered in the IMMERSE session on Multi-Site Platforms – Setting your Codebase Up for Success received numerous votes as being new and/or helpful to attendees – the ones covered here are just the start.  If you’re able to access the IMMERSE site and view the entire presentation, it will be time well invested.  Otherwise, download the presentation deck and associated code demo to dig directly into the details yourself.  As always, please reach out if there’s any way I can help! You can contact me on LinkedIn or email

All opinions expressed by Brett Birschbach are his own and not Adobe’s.

6:00 PM Permalink
  • Authors

  • Archives

  • Developer Resources