Posts tagged "AEM"

April 19, 2018

Brett Birschbach #AEMRockstar 2018

It’s a wrap! Adobe Summit NA 2018 is done, and we are excited to announce the winner of this year’s #AEMRockstar competition:

 

Brett Birschbach from HS2 Solutions

 

This year brought more outstanding submissions than ever, resulting in a fantastic field of semi-finalists. Congratulations to Brett and our other finalists, Bryan Williams, Joost van Dun, and Conrad Woeltge, who competed in front of an audience of 300 AEM enthusiasts! 

Brett (a previous CM guest blogger) has written a great post about his winning Rockstar Tip & Trick. He is the lead 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. Read on below: 

 

AEM Remote Assets –

Sync What You Need, When You Need It

 

Have you ever wanted to use AEM Assets on one server from AEM Sites on another? I bet you have, even if you don’t realize it. Until now, options to do so would have been custom and/or manual, so you may have simply blinded yourself to the idea. Here are some common uses cases that you’ve probably run into:

 

Use Case: Enterprise AEM Assets Instance

Ok, I admit this is probably not the most “common” use case, but for large enterprises in the digital age, it’s a critical use case. An enterprise DAM is a key part of an enterprise technology stack, often calling for a dedicated AEM server with DAM as its sole purpose. But then how do you use those assets for your AEM sites?

 

Use Case: Migrating Assets from Production to Non-Production Environments

Does your organization have Dev/QA/Stage AEM environments? Of course, it does. Are those environments consistently up to date with the latest set of assets from production? For almost everyone I talk to, the answer is almost invariably a resounding “No.” How can this be done in a way that is both automated and disk efficient?

 

Use Case: Site Assets for Local Developer Servers (i.e., localhost:4502)

Pulling down a copy of the production site pages to a local server is easy. Pulling down all of the assets associated with that site? Not so much. How can this be done in a way that leaves behind assets that are not applicable to the site?

A simplistic, brute-force solution might be to use AEM’s package manager to bundle up the entire DAM, copy it down to the Sites server, and call it a day, right? Not exactly. Assets are big…and numerous… Last I checked, numerous big things is rarely a simple situation. Copying the entire DAM can be problematic in terms of disk space, network transfer, and effective package sizes. And even if you can do it manually, as soon the first asset on the remote server changes, you’re out of date!

Ok, so why not just reference the assets directly from their remote location? This would be a nightmare for your authors and developers, no longer able to leverage simple OOTB tools like image components, DAM search, and the authoring sidebar. Ultimately, you’d no longer be able to leverage the full power of AEM sites.

In short, you need a solution that achieves all of the following objectives:

  • Access to all remote AEM Assets from the AEM Sites instance
  • Remote AEM Assets stored locally in AEM Sites for seamless authoring w/OOTB features
  • Copies of just the required remote AEM Assets, not the entire DAM
  • All accomplished in an automated fashion

 

Sync What You Need, When You Need It

AEM Remote Assets tackles this tricky problem in a unique way. The seemingly opposed objectives of “Access to all remote AEM Assets” and “Copy of just the required remote AEM Assets” are achieved by a “sync what you need, when you need it” strategy. What this means is the automated asset sync first copies the entire node structure from the remote DAM, pulling in the tags and metadata of all of the remote assets but leaving behind the large binary files in the source DAM. If and when any of these assets are requested for a real use case, only then does Remote Assets copy the binary files “just in time” via a second sync, leaving behind all of the other asset binary files that are not needed.

Let’s see how this works in practice. AEM Remote Assets first syncs in the node structure of the remote AEM Assets, substituting in a small, temporary binary file to keep all unused assets very small compared to their real counterparts.

Admin user viewing folder of remote assets on an AEM Sites instance.

As an admin user on the AEM Sites instance, I can see all of the “remote” assets that have been synchronized from the remote AEM Assets server. And though an asset may say it is 500+ KB in size, in actuality it is far smaller due to the temporary binary file.

Now the true magic begins. Because we have synchronized in all of the remote asset nodes and tags, we have everything we need as an author to search and use those assets, and AEM will take care of pulling over the binary files for the ones I want to use. Say for example I open a browser and search for “Bike” assets. The system finds the two assets, but as the request is being processed it first pulls over the associated binary files from the remote Assets server, making those two assets now “real” on the Sites server.

Right: Author user viewing two searched assets; Left: Admin user viewing folder with searched assets now made “real.”

The same thing happens if I pull up the page authoring sidebar to add an image to my page.

Right: Author user choosing asset from page authoring sidebar; Left: Admin user viewing folder with referenced asset now made “real.”

This is amazing for the “Enterprise Remote AEM Assets” use case, where authoring sites with remote assets is a critical business function. But what about the use cases of “Migrating Assets from Production to Non-Production Environments” and “Site Assets for Local Developer Servers” where largely we just want to be able to browse the site with all assets. Turns out that scenario (and any others you can think of) works as well.

Right: Web page as seen by an author user, all assets being made “real” simply by browsing to the page; Left: Web page with remote assets before access by an author user.

 

This is Awesome! Can I Has AEM Remote Assets Too?

You absolutely can! HS2 Solutions has contributed AEM Remote Assets to ACS AEM Commons, the most prominent open source feature library for AEM in the industry. You’re probably using this library already! We look forward to the community pitching in with their ideas on configuration options, additional functionality, and even direct code contributions!

For more on AEM Remote Assets, including a video demonstration, view my article on hs2solutions.com. You may also contact me via LinkedIn or email at brett.birschbach@hs2solutions.com.

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

4:31 PM Comments (0) Permalink
January 3, 2018

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

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
January 1, 2018

Are you ready for AEMRockstar 2018?

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
August 30, 2017

Tips & Tricks: Link Tag Management for AEM

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 (https://www.linkedin.com/in/cartersteven/) or GitHub (https://github.com/internetbummer).

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 www.google.com, but on the Spanish translated version of your site, should that external link instead be www.google.es?  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 google.com is the correct domain for English users, your Spanish users should ideally be linked out to google.es. 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.

Launches

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
August 29, 2017

AEM Best Practices are Live on the SPP

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
  • Authors

  • Archives

  • Developer Resources