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
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!
Inspired Digital Experiences for Manufacturing & Automotive
Whether you’re just beginning your digital transformation journey or are well on your way, we invite you to explore our partnership with Adobe and our diverse capabilities in manufacturing and automotive.
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:
npm install -g aem-admin-interface-generator
For the sake of this demo, I created a blank aem-archetype project that looks like this:
Then I navigated to the
apps folder in terminal and ran
aemag admin new, see output below:
After deploying the whole project as it is and navigating to
http://localhost:4502/apps/ahmeds-app/sample.html, here is what you get:
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:
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!