Part 2: Building AEM Admin Consoles that will not break with new AEM releases

This is part 2 of a 2 part blog post. If you have not already, checkout part 1. In this post, I pickup on what we discussed in part 1 and add coral-spectrum and a new CLI to generate Admin interfaces in your existing project.

Before we get to it

You do not have to use coral-spectrum. I repeat: you DO NOT have to use coral-spectrum. It’s primary purpose, is to make your application look like the rest of adobe’s UI in AEM. But you are not bound to that. If your team prefers a combination of different UI Libraries and Frameworks, use that!  It’s much better for you, in the long run, to pick something you strongly believe will be easy to maintain and that would be strongly tied to what your team is most familiar with. coral-spectrum provides absolutely NO advantage over other component libraries, aside from the fact that it looks just like the rest of AEM.

Alright! Let’s get on with it

What is coral-spectrum

It is a

A JavaScript library of Web Components following Spectrum design patterns

You can brows examples, see reference documentation or build in their playground

Because coral-spectrum is built using Custom Elements, which are supported in all major browsers, it makes it perfect for use with Vue/React/Angular or even on its own with vanilla JS!

The AEM Admin Interface Generator CLI

Who said I was good at naming things?

To simplify building Admin Interfaces the way I described, I’ve built a Nodejs CLI that allows you to generate a base Admin Interface, with coral-spectrum included as a clientlibrary and small helpful utilities (for loading screens and notifications). Let’s use it:

CLI installation

npm install -g aem-admin-interface-generator

CLI Usage

For the sake of this demo, I created a blank aem-archetype project that looks like this:

Admin Ui Archtype Blank

Then I navigated to the apps folder in terminal and ran aemag admin new, see output below:

Admin Ui After Clias you can see, that generated a new folder under apps called sample

After deploying the whole project as it is and navigating to http://localhost:4502/apps/ahmeds-app/sample.html, here is what you get:

Sample Admin Ui

Let’s add a cards to what we now have

As a fun example, let’s add some simple cards from the coral-spectrum card examples.
in my generated html page: /apps/ahmeds-app/sample/components/page/page.html I commented out the alert and added a card list instead:

Add CardsAdd Card Ui

A Final Word

Now that we have something built entirely in vanilla Js and coral-spectrum, you are free to build on top of that, or maybe introduce a front-end build module, similar to Adobe’s aem-archetype frontend module, you could even build your admin client library using the same one! But I hope this gives you a good starting point so you don’t have to write a lot of boilerplate code!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Ahmed Musallam, Adobe Technical Lead

Ahmed is an Adobe Technical Lead and expert in the Adobe Experience Cloud.

More from this Author

Follow Us