Introducing all new Reference Demos in AEM

Transcript

I’m not gonna lie, I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. I’m not gonna lie. Hello, hello. Welcome to Experience Griffith Live. My name is Danny Gordon, and I’m a tech marketing engineer here at Adobe. And I’ve been working with Adobe Experience Manager for a number of years, and, yeah, I just want to welcome all of you to the live stream. So I’m streaming from Southern California in San Diego. And if you join the live stream, Diego. And if you join the stream, yeah, feel free to let us know where you are and where you’re streaming from. Super excited. See we’ve got a few comments already in the chat pod. Welcome, Daniel, Katie, the tech prepper. Yeah, we’re excited to have a fun session today. And yeah, so we’ve got the chat pod where you can post questions as we present. And yeah, as the show goes on, we’ll try and answer those questions. And yeah, we’re looking forward to a fun session this morning.

The show will be recorded and the replay will be available. So yeah, it should be nice. Today’s topic, we are going to be talking about some all new reference demos in AEM. So if you’re familiar with AEM, we’ve had a number of reference samples over the years. If you’ve been working with it for a long time, we had geometrics, we retail, weekend. And so these are all designed to make it easy for potential users, developers, anyone who wants to try out features of AEM to just spin something up and test out those content management features.

And yeah, okay, I’m gonna pause here because we’ve got a great number of comments in the chat pod. This is awesome. We’ve got people from Seattle, from Florida, Petaluma, oh, Brazil, okay, India, Italy. Oh, this is awesome. So we’ve got a great global audience. Fantastic.

Yeah, so anyways, yeah, we’re gonna be talking about these reference demos. I got two great guests that are gonna help us talk all of, you know, really explain kind of this next iteration of demos and features. And so yeah, let’s go ahead and bring them out. So first guest we have Hyman Cheung. Hey Hyman, how are you? I’m doing great. Hey Danny, it’s great to be here with you this morning. Very excited to showcase reference demos to the audience. Hello everyone from all around the world. It’s very exciting. Yeah, I’m stoked. Hyman was like, I only want to come on the show if it’s going to be popular, if there’s going to be a lot of people. And I was like, I don’t know, I’m not sure. Yeah, you delivered. It’s great. Yeah, very sweet. So Hyman, where are you streaming from? So I am based out of the San Francisco Bay Area. I’m a product manager on the AM Sites team. And we’ve been working on new innovations to help our customers, partners, and our internal folks as well, kind of make it easier to understand, learn, and showcase the power and flexibility of the AM platform. Very excited to share what we have come up with you today. Awesome. Yeah, we’re super stoked. We got someone from Italy, UK, Arizona represented. Okay, and so we’ve got another guest that we want to welcome, who’s also going to help present to this new feature. And let’s welcome Ruben Ruser. Hey Ruben, how are you? Hey guys. Oh, let me give you the applause.

I was waiting for you. So Ruben, you shaved, you got a haircut. I mean, you’ve really pulled out all the stops for this live stream. Oh man, I tried, right? Yesterday, I didn’t look great. This pandemic, it’s dragging on, right? I understand you did this haircut yourself. Yeah, I did. You want to show us the back? Come on. I will get in trouble with my wife if I do that.

It’s got the mullet in the back. You guys can imagine what it looks like. Yes, stop talking over this, please. You know, you make mistakes, you make mistakes, right? I didn’t, you know, we’ve been working with Ruben for a long time, but I didn’t know that you were the CTO of Headwire. That’s a pretty lofty title. Yeah, my wife actually, now wife started the company and hired me to work with her. So we’ve been doing this for over 20 years now. I’m running a little AEM shop out of Southern California, even though I’m currently live streaming from Switzerland right now and it’s getting dark outside. Well, yeah, we appreciate you coming on the stream so late for you. Yeah, that’s easy, right? The morning is hard.

Awesome. So yeah, so Ruben, you’ve been, I mean, yes, Headwire has done a number of AEM implementations and you’ve been working with AEM for a number of years. And so, yeah, you’ve been pretty close to this new reference demos feature. Yeah, Hymen and Saturate actually dragged us into this a while back because demos are really important, right? And showing that AEM works well and, you know, different use cases are important. So they dragged us in and asked whether we would look at what the demo, the reference demo looks like and help out a little bit or comment on it. It’s always nice to comment, right? Adobe does stuff, it changes it. So, Yeah. Yeah. So, yeah, I mean, I can give some background from my perspective. You know, we’ve had, you know, reference sites like WeRetail and we, you know, we’ve had Weekend for quite some time. And then Weekend kind of span, you know, was our full stack sites implementation. We have the corresponding tutorial as well as the code. And I think it’s been used from sales side, but, you know, just to showcase AEM features. But then it’s also used by developers to kind of, like, look at how, you know, a site actually gets implemented. And then from there, like, it’s spawned various different, you know, kind of sub brands. So we had like a spot editor example, headless example. So there’s all these different flavors. And, you know, individually, I would like to think that they’re pretty well documented on Experience League and all the codes open source. And so, you know, deploying them individually, pretty straightforward. However, if you wanted to set up an environment that had all of them, you know, it might take a little more legwork. And so, like, I kind of think this is one of the areas where the reference demos you know, one of the areas that the reference demos attempts to solve.

Yeah, definitely. I think I completely agree. So one of the kind of guiding principles when we started this project was to make it very simple for anyone, both technical users or non-technical users to install these reference demo code bases into cloud service and allow them to get into AEM very quickly and kind of understand the capabilities and different implementation models.

Yeah, it’s been, I think, very well received so far. And we’re just starting to be very excited to showcase it. Cool. So, Hyman, I guess you’ve got like a little bit of a presentation for us, maybe some deck, slide decks at the start and then some demo? Yeah, let’s get into it. So I just have a few, two slides to kind of set up the demo and then I’ll actually run through a demo of the demo. Take control of the screen here. There we go. Let’s see here. So is anyone having issues with audio? I don’t know. Just in the chat pod, if you want to mention.

Like I can hear you, Hyman. Oh, Benji says it’s all good, but we’ll keep going. Okay. Okay, great. So let me just get through these quick kind of set up slides and then we’ll actually take a look at the new innovations. So as we talked about… All right. So Hyman, you’re sharing. Go for it. Okay, great. Okay. So as we talked about guiding principles for this project, we wanted to make learning, showcasing Adobe Experience Manager as a cloud service as easy and as compelling as possible with this project. And when we think about what the objectives were, we had a few things that we knew were potential friction points and requirements from discussions with our partners, our customers, and of course, our internal stakeholders as well. First is we know that Adobe Experience Manager is incredibly powerful. There’s a lot of capabilities in the platform. We wanted a single demo code base to allow users to showcase and learn all of those capabilities, including sites, head-on, headless, assets, dynamic media, eventually screens and forms. So there’s a lot of functionality that we want to cover in a single compelling demo code base. Second, as we talked about, for enterprise software, the environment setup is typically potentially very tedious and requires technical expertise. And we wanted to remove that hurdle for our users. So we wanted to make it very simple for anyone, both technical and non-technical, to set up a demo environment so that they can get started with all the great features within Adobe Experience Manager without that initial hurdle. Second is we’re all in technology. We love innovation. And with Adobe Experience Manager as a cloud service, we have unlocked our ability to introduce new innovations faster than ever. So features are being released on a monthly basis now. And what that means is that we enjoy all these great new capabilities, but learning them, being able to demo them quickly, it can be a challenge. So with reference demos, we wanted to make it simpler and have the content and the demo capabilities reflected in these demo code bases so that it’s very simple for anyone to learn the new features that are introduced in each monthly release.

And we also wanted to make sure that the demo code bases that are included are referenceable. And what we mean by that is anyone can kind of hack together a compelling demo with different tricks. But once you lift the covers and if you look at the code, is it something that you would model an actual implementation after? So that’s the level of code quality that we wanted to ensure with our new demo code bases so that we can hand it over to partners, to customers, so that they can learn best practices for implementation of Adobe So those were kind of our guiding principles when we were thinking about the vision demo framework. And so that’s how we consolidated and created a vision or zen statement for our project. So here it is. It’s kind of a mouthful, but what we intend to do is to provide comprehensive, meaning representative of all the capabilities and products within the AM platform, including sites, assets, dynamic media, eventually screens, forms as well. Up to date, meaning reflecting the latest in each monthly release of cloud service. Consolidated, meaning in one place, so not having to look for different code repos for the different features and products. And again, referenceable, meaning that it represents Adobe best practices for implementations that are scalable and performant. And of course, simple to install, so not requiring any technical expertise to install into your cloud service environment. So that’s how we’re thinking about reference demos and how we’ve constructed this framework and how we intend to continue to build on it over time. So with that, let’s actually get into it and see what reference demos looks like. So in terms of installing the framework into your cloud service environment, it’s very simple now. So within cloud manager, you can go to edit program, go to solutions and add-ons, and all you have to do is enable this reference demo option in the sites dropdown here. You might want to enable commerce and screens as well, and it’s available to all cloud service sandboxes. So it’ll just be available to you once you log into cloud manager in your sandbox. Once you do that- And if you only have… You have to have at least sites, I guess, in the sandbox? That’s right. That’s right. That’s the minimum. Okay. Yes. Yes.

So sites in your sandbox, then you’ll get that option. Turn it on, run a pipeline to install it into your environment, and then that’s all. That’s all that’s required to get the demo code bases available to you in sites. So then once you do that, you click into AM, and where the reference demos are available is you go into sites, click create, and then select site from template, and you’ll see a series of site templates that are now available to you from this wizard. So we’ll quickly walk through each of these. So first is the weekend website template. This is the one that we all know and love very well. So this represents AM sites core components. There’s included page templates, style system options, et cetera, to walk you through and install the weekend site, and you can use it to review the weekend tutorial, which is very popular on Experience League to learn about all the rich capabilities of head full implementation of AM sites. There’s a new single page app that uses the same assets and content fragments from the site to build an SPA. We’ll walk through that in a little bit. There’s a weekend asset share common. So if you want to bring up a site that is representative of a kind of a reference portal to share approved brand assets like images and media to partners and affiliates and customers, you can use this site template. We have the Venya commerce site. So this is a site that uses integration framework or SIF to bring in commerce data into this e-commerce website.

There’s also a standard AM site template. That’s kind of our standard starter template for the new QuickSight creation features that were introduced about a month ago. So a lot of great stuff, and we’ll continue to be adding to this list of demo code bases over time. Let me show you now how to actually deploy one of these. So we’ll start with the weekend site template. You select it, click next. I’m going to call this weekend site.

And that is essentially it. That’s all you need to do to create a site using the site template. It takes a few minutes and here we are. So this is the new site that was just created.

So yeah, it works asynchronously, I guess, and it’s like installing it.

So I can now go into this page.

Yeah, it’s taking a little bit of time to load everything. So there we go. Nice. So now we have the complete weekend site with the assets, with the components, the initial content all represented and ready for use. So we can come in here and see all the different assets that were installed. See the list of core components that are also available. The core components also have styling options that are pre-installed as well so that you can learn about the AM style system. So, Hyman, we had a question from Caitlin. Are the templates editable? These templates are not editable, but we do have tooling available so that you can create your own template. The templates are also open source so you can get access to the code repo and make edits and then import the… Let me go back here. Yeah, so I guess that we can clarify too, right? When we say templates, I guess we have two meanings, right? There’s the site templates that you’re showing here and we also have the page templates as well. Yes.

Got it. Yeah. So I was talking about the site templates. Those are available out of the box. They’re also open source so you can get access to the code. For the page templates, yes, they are editable so you can go back to your templates in AM and you’ll see the templates that are installed with the weekend site and make them any necessary edits. So it’s installed the same way as if you would create it from scratch.

Gotcha. Awesome.

With this weekend site template, I also wanted to share the new theming functionality that was introduced with the QuickSight creation features that were launched in December. So this makes it very simple for front-end developers to style the new site without needing to install AM locally. So we focus our front-end developers now on the CSS and JavaScript, their expertise, rather than having to install AM and all the prerequisites for AM. So all you have to do is download this source package, unpack it, bring it into your IDE. This essentially creates a local theming environment for you without having to, again, install AM. So I’m going to run a few NPM commands.

So, yeah, so the theme sources, you’ve basically taken all the CSS and JavaScript that the weekend site depended on, turned it into a theme, and now you’re basically editing that theme.

Yeah, that’s right. That’s exactly right. So all the front-end code is retrieved or packaged up and then made available. And we’re bringing up a local theming environment that uses that CSS and JavaScript, but proxies the content from cloud service. So you can see how your changes to the CSS get reflected with the content from the cloud. So you can see now I’m running this environment locally, but I can go into the same site that was just created and see the content from the cloud, but using the CSS and JavaScript that I’ve downloaded locally to render that content. And I can go into my IDE now and let’s make some simple changes and show how a front-end engineer would make styling changes. So instead of this yellow, maybe we can change our accent color here to red. Save this off. And immediately you can see that the changes are reflected in this local presentation of the weekend site content. So as you can imagine, makes it very simple now for front-end engineers to change the colors, the layouts, the styling of the site that’s created. And they can check that back into their Git and with the new front-end pipeline, they run that and push these changes back into their cloud environment very quickly. So just a couple of minutes to run our new front-end pipelines so that we can merge your front-end code back into the cloud service environment. Yeah. And I think it’s like a great way if you have a front-end developer who’s just new to styling AM core components, it’s just a great kind of environment that you can quickly stand up for them and they can start to style them and understand how just the kind of out of the box classes that are available that they can manipulate. And yeah, get going pretty quickly. And they also don’t have to install a local AM Quickstart. They don’t have to install Java, do a Maven deploy. You can kind of hand them that Webpack project and just send them on their way. So I think it’s- That’s exactly right. Yeah. We’re super excited about this new set of features. We think it will unlock the number of engineers that would be able to develop for AM because all you have to know now is CSS and JavaScript, which is any front-end developer with their salt should be able to do this now. Right. Okay, great. So that’s the new weekend site that’s part of reference demos, fully featured, including the new QuickSight creation functionality. Also wanted to showcase some of the other demos as well. So I’m going to go back into the site from template and let’s take a look at the new headless capabilities that are showcased with the single page app. So I’m going to do this. Do weekend. Again, asynchronous creation. Oh, there it goes. So this is a way that you can test and showcase the different headless capabilities that are now available in experience manager. Right. And this app includes examples of the spa editor functionality, graph QL, as well as a remote page and experience fragment functionality as well. So this new single page app is deployed remotely. So I’m going to bring up this app this way here, so I can show you how it works. So this is now a remote front end that leverages the headless capabilities to load the content from AEM. So the JavaScript front end that’s outside of the AEM.

And this homepage here is leveraging our spa editor and it allows marketers to make changes to the content on the homepage using the AEM editor. And it will be reflected in the front end that’s deployed remotely. So you can imagine the power of this if a now marketer can come in and make changes to the images. Let me change this to Viking adventures. Then come here, reload the app and now it’s reflected in this single page app. So what this means is marketers can now make changes to PWAs without the need for the expensive IT resources and coding. So we give control to the marketers and content authors to manage content in AEM and have it reflected in mobile apps with this functionality. So yeah, very cool. Before you move on, so the app that you have running on the right hand side, that’s a PWA. It’s built in React, I think. That’s right.

I mean, you kind of had it already pre-installed and it’s like pointed to this author environment, or like, yeah, how did you, where did it come from? Yeah. So we deployed to make it easy to access, we deploy this app within a directory of your cloud service environment, but effectively it’s deployed remotely because it’s not coming from a directory that typically an app like this would be hosted under. So it’s in the ETC directory of your cloud service environment. Okay. And so, yeah, it’s completely decoupled. And so we had another question. Let me just bring this into the broadcast. So Gustavo was asking, is this like something that could only work with PWAs or could you also do something similar with native apps? And maybe this is a question for Ruben. You’re pretty close with this.

Yeah. So there is a native app in the demo add-on, but we don’t allow editing in the native app directly, right? That one is actually based on content fragments. So you can really just edit content fragments and push that out into the native app. We do have, but we have one example in the native app that I saw was an experience fragment that showcased as well in the native app. So you can’t edit in the native app, but you can edit in AEM, you can edit the experience fragment and the native app will show that data. Gotcha. At least that’s what I saw so far. Yeah, that’s right. So we modeled different kind of implementation modes that allowed different levels of control to content authors in this app and also in the native app that’s included in reference demos as well. So we can walk through some of those. So within this adventures section, this is where we showcase how GraphQL now works in AEM. So this is, as Ruben mentioned, content fragments that are built in AEM and access GraphQL APIs. So let’s do this. So from here, we can, let’s look for a cycling.

You know what, let me, so this is the content fragment that populates this screen and it leverages the same content fragments that are in the weekend site that we created. So I think it might be interesting to see how we can make a change to this content fragment.

This one is what we’re looking at.

So yeah, so this is the root content fragment for this cycling adventure.

Right. So we can say, let’s see, cross this off your list. I’m going to change the trip length to 10 days. Sounds like a really exciting adventure. And let’s make this five to six people.

Save this and again, reload it in the app. You can see the updates here and reload it on my site as well. And we can see the updates on the site. So you can see how easy it is now to create omni-channel experiences with content fragments using AEM and demo it with these different code bases. Delivering them to all these different touch points.

Exactly. Right. And you can also go into, if you’re so inclined, you can go into GraphQL editor in our browser and see both the requests and the responses for the content fragment.

One thing that I think showcases how thoughtful the GraphQL implementation is, is how we are representing this content within this response. Right. So typically you would get for, let’s say, this adventure description, kind of this HTML representation of this content. But what we’ve done is to make it easier for developers to render this content in whatever way that makes sense for them. It’s automatically parsed in this JSON response as well. So you can see this header is parsed from the paragraph section. So it makes it very simple for developers to then take this content and render it any way that they would like. So it may not seem like much, but for the developer experience, it makes it much easier. And it’s these kind of thoughtful implementation models that we’ve built into GraphQL that makes it very meaningful for engineers. Yeah. You don’t want to have to parse through the HTML in order to display the content in your application. You kind of just want a nice clean JSON format and then you can decide, okay, this is my H2. This is my header. I don’t want to be relying on some markup. So yeah, that’s really nice. So there’s a couple of different, some more questions that we have. Let’s start with this one. Maybe Ruben, you can help us with this. So Klaus was asking, how is the editing in the PWA and for the individual routes? So I believe it’s using the…

That’s my fault. Please mute your phone during the broadcast.

So editing in the PWA and for the individual routes, I believe it’s using the remote spot editor capabilities. Yeah. It’s using all types of different ways to do it. So each screen in the PWA uses a different methodology as Hyman tried to show. The adventures is kind of a mix. You can change the title. That’s remote spot editing. The homepage allows you to change the images. They’re tied to a page in AEM. And then the magazine section is a fully edited section. So that’s the, I guess you guys call it a content services, right? It uses the standards link models and a standard way to basically pull the routes and things like that. Gotcha. Yeah. So it’s using… Yeah. And I think the app’s built in React, I believe.

And so yeah, it’s using… The app was built with basically just a create React app and then mixed a little bit of AEM dependencies into it, right? Really the idea was to start with an app that anybody would find on the internet and then connect it to AEM. There’s no client library magic in there or nothing like that. It’s really just a regular create React app that’s hosted. You can host it wherever you want. Yeah. And I think there’s a… On the AEM side, there’s a JavaScript library that AEM Spy Editor provides the model manager that helps map the content that gets displayed through the page editor back into the app. And… There’s also a headless library to connect to GraphQL, right? So you don’t have to think about it. And that goes into the other question I saw, right? Yeah. So yeah, you wanna take this question as well, Ruben? Exactly what you’re saying. So we show both. We show persisted queries and we show regular queries in this app.

Both are possible, but they both go through the same headless library. And yeah, so if you’re not super close with the GraphQL implementation with AEM, there’s I guess two types of queries that you can do. There’s kind of a standard GraphQL query where you’re sending a post with a GraphQL body. And you’re sending your full query to… Yeah, like what Hyman has. You’re sending the full query to the AEM server. And then something that’s kind of innovative, I think for sure with AEM and the GraphQL implementation is you can then actually take your query and persist it on the AEM server and then make available an endpoint that you can then request using get. And so that request then can be cached at different layers. And you also, from the client side, you don’t have to know exactly the… You don’t have to send this full query every time. So if it’s something that’s pretty common, like getting all the adventures or even just an adventure detail, you can persist that query and make your app a little bit simpler. So yeah, good question. Yeah, and the good thing about it is also you don’t have to expose the full GraphQL endpoint. So anybody can go and look at all your data. With the persisted queries, you’re building an API that you can lock down. So it depends on where you are and the security of your data. You might want to say like, no, no, no, I don’t want to give everything out. It really helps with that. Yeah, yeah, definitely. So…

Sorry, Hyman. I feel like we derailed your demo a little bit. No, it’s great. Yeah, that’s exactly right. So a lot of very powerful functionality in our new headless capabilities, including of course, persistent queries. I’ll shout a plug to Experience League. There is a new advanced tutorial for GraphQL. So just go ahead and look for that. It has a whole chapter on persisting queries and how to use them and kind of some of the advantages of it. So and I’ll post that link in the show notes after it.

Yeah, cool. And there’s also some really cool content on nested content fragments in that, the new Experience League content as well. And that will eventually make its way into this demo. So you can see how nested content fragments also work in this adventure section. Okay, very cool. The last section I’ll just touch on very quickly of this single page app is our magazine section. So if you think about it, so the homepage is leveraging Spot Editor. The adventure section is content fragments and GraphQL. So that’s kind of structured content, as you can see. Let me go back here one more time. It’s very structured content that follows the content fragment model that’s built for adventures, that’s deployed with the site template. And magazines is our way to showcase unstructured content that we can provide marketers control of not only the content, but the layout. And they have ways to kind of edit these pages and this content via experience fragments that are deployed with the site templates as well. So three different sections of this site, all representing three different ways to implement headless with Adobe Experience Manager. So that’s the new single page app that gets deployed with reference demos. I guess I wanted to also showcase the assets demo content that’s installed with the reference demo framework as well. So when you do install that add-on and run your pipeline, you will get a very rich library of assets that get included as well. And you can showcase different capabilities of AEM assets. I’m going to choose one of these images here. You can see all the different renditions that are automatically created with assets. So there’s this version, click on that thumbnail. There’s also dynamic media. So you can see how the different renditions of dynamic media are included and Smart Crop as well. And Smart Crop is our integrated sensei capabilities that identifies kind of the salient parts of an image so that it makes it very easy to then leverage assets without having to manually crop to different sizes and different dimensions. Yeah. So this already has dynamic media configured just by installing the demo add-on. You don’t have to do anything else. So you will have to log into your dynamic media account and reprocess the assets. And I can show you in a second how to do that. There’s some new tooling that’s built that makes it very simple to activate dynamic media in your sandbox. But before I do that, I also wanted to show, of course, Smart Tags automatically enabled for your cloud service environment. So you can see kind of the sensei magic to identify the different entities that are automatically detected from the different images to help with asset curation and search via Smart Tags as well. Nice.

So that’s AIM assets, demo content that’s included with reference demos. So let’s go into the utilities and we can talk through some of the functionality that we’ve introduced to make it easier to kind of manage your demo code bases and your demo environment, including, of course, setting up dynamic media as we talked about. So once you’ve, again, have installed the framework, you will get this new… I think I went through that, went there kind of quickly. So I just want to navigate one more time to make it very simple. So there will be a new reference demos option in your tools menu here. So you click that and then you click to utilities and that brings up this really cool dashboard that shows all the different features and content that’s installed with the reference demos in a status of each, right? So you can see the different site templates that are installed, the different configurations and capabilities that are enabled via the framework as well. So from here, you can also go in and delete sites that you’ve created with reference demos. So it makes it very simple to keep a proper hygiene of your environment. You can create as many sites using the site templates as you want and we make it very simple to then delete them once you’ve completed your demo presentations and you want to start fresh. So just select and delete and that will remove all the code and configurations associated with the site that you’ve created. So yeah, it goes beyond just like the pages, any of the reference content would also get cleaned up. And that way you can reset it, I guess, for either the next demo or if you’re setting up a playground for a user, you can be sure that they’re going to start with a clean environment. That’s right. That’s exactly right. Next, there’s ways to delete site templates. So if you’ve, you know, there’s a previous version of a site template that you don’t need any longer, you can very quickly delete the site templates from here. If you’ve imported a template and want to delete it, you can also delete it from here as well. The next feature is one that I should have ran before we jumped on camera here, is this Prime Author Cache. And this makes the environment run faster for your demo presentation. So it fetches resources from different caches so that it warms up the different caches that AM includes so that your presentations will run faster. So a very cool feature that we’ve introduced as part of reference demos here. Next is the Android app. So we spoke quickly earlier about the native app, and there is an Android app that uses the same content as the weekend site and single page app. So you can download the native app using this button and run it in an emulator. There’s a link to BlueStacks, one that we use to emulate Android. And you can see the content in a native app.

Very cool. User preferences. So over time, we imagine that we’ll introduce more user preferences right now. It’s primarily turn off those legacy pop-up dialogues in your environment. So you can turn those off using user preferences, and you’ll see additional kind of customizations of your experience for the environment over time represented here. Set up GraphQL is a very simple way to create a GraphQL endpoint that powers the single page app. So before you go in and create the single page app, you want to come in here, set up your GraphQL endpoint, and they’ll set up the global GraphQL endpoint for you so that your single page app or any other kind of GraphQL implementation that you build can use that endpoint.

And I think for the GraphQL, right now this is part of the demo add-on, but in the full product, they are moving this capability into the AEM cloud service product. So that’ll be another UI that’s available that you can set up the GraphQL endpoints, as well as manage the persistent queries. So those are features that will become available just standard in AEM.

That’s right. Yeah.

So next is what we talked about. So dynamic media, if you have an account and you want to showcase the different capabilities of dynamic media, provide your credentials here, log in, and it will set up dynamic media in your environment, then you’ll need to reprocess the assets that are enabled with dynamic media. And from there, that’s all you need to do. So we’ve made it setting this functionality up to demo very easy with this tooling.

And then finally is if you need to create bulk content for your presentation, there’s this new content generator tool here. So this allows you to create pages in bulk for the sites that you’ve created. So you can select page, select a site, and then provide a kind of a naming hierarchy. You can also select from the available page templates, then a naming hierarchy, and you can make this as big as you want so that you can showcase what a site might look like in larger scale than is included in the site template. So it kind of builds out your page hierarchy. There’s also, if you want to show asset folder hierarchies very quickly, you can create asset folder hierarchies and also tag hierarchies with this new tool. Wow. And so where you have parent page, child page, those will just become the titles of that. Yeah. So you’ll want to make these unique. So we can do child page one, child page two here, child page one, child page two here, and that will create the pages using a script that we’ve built. Gotcha. Nice. Yeah. It comes in handy, I guess, if you just kind of want to, I don’t know, quickly spin up some additional pages or tags. That’s right. So as we know, AM is really great. It really shines for huge enterprise sites, and we want to make it easy and we want to make it easy to showcase how we support hierarchies of large scale very quickly with this functionality. Awesome.

So that’s kind of what I wanted to go through today. We’re certainly continuing to add to the demo code bases that will be included with reference demos soon. You’ll see a new commerce site template that is branded for weekend. So it’s all kind of a single brand. You’ll see a screens site template that allows you to demo digital in-store signage and over time forms and others will be represented here as well. We’re also introducing a new standard site template that uses Telwyn CSS. So you’ll all see different types of implementation, different types of technology that are represented in these site templates and we’ll continue to make it very simple to deploy and explore AM and all of its different capabilities, the different implementation models that it supports through this new tool. Awesome. Yeah, we’re definitely looking forward to that. We did have another question around the page content. Let’s see here. I can bring us in to bring the three of us on. So we had a question like, is there a way to populate the generated pages with dummy content? So I think right now that bulk generator just creates the structure. You can select the page template that you want to create the pages for and if there is initial content in those page templates then it’ll be reflected. Awesome. Let’s see here. So David Gonzalez is asking, can you talk about how we’d manage deploying new versions of demos over time? Ruben, do you want to take that one? Sure. So the new versions of the demo, they basically roll out with new versions of AM and your AM and you upgrade your AM environment. The version gets updated as well. You always see the latest version of the demo add-on in the about box of AM. I’m not sure if anybody knows that, but the top right corner, there’s the info button and in there is an about and you see the different versions of the different add-ons in there. So it’s pretty helpful to figure out what’s going on. Awesome. Cool. So yeah, I mean, we’re getting basically to the top of the hour. I think that pretty much wraps up everything that we wanted to talk about. If there’s any additional questions, we’ll also post a community link at the end of the show so we can continue the conversation in AM communities. But yeah, unless you, Hyman, Ruben, you guys have anything that you want to add? No, this was fun. Thanks so much and as we mentioned, it’s available to all cloud service sandboxes. So please install it and test it out. Give us your thoughts. We’re always open and very thankful for feedback. So we’d love to hear what else we can add to make demoing and learning about AM as simple and as comprehensive as possible for the different use cases that the community uses AM for. So definitely very interested in hearing what people think. Yeah. And so I think there was a question about if there’s plans to make additional QuickSight templates. So I know that there’ll be a new standard site template that you take advantage of Tailwind CSS. Maybe we’ll have some additional QuickSight templates in the future. I don’t know if you guys are aware of anything in the works.

Yeah. So definitely the standard site template with Tailwind is one that’s coming around the corner very quickly here, but we do plan to continue to build out the catalog of QuickSight templates and continue to build documentation and tooling to help partners and customers build their own site templates for the verticals and designs that they need site templates for and make it very simple so that anyone can build the site template and tribute. So we’re always looking for the community to build out different capabilities and content for AM and site templates, I think is a great way to do that. Nice. Yeah. So, yeah, Matias was asking, do you provide documentation for the demo cases, which you could then use to showcase the clients, like how they’re working? So I will take that since I’m working on the experience league side of things. So, yeah, right now we do have some documentation. I’ll post that in the show notes. There’s some documentation on just like how to set up the reference demos, basically install the add-on. And we will, yeah, we’re going to continue to add more detailed documentation per demo. So, yeah, I think it’d be great to kind of map out, especially like that headless spa, it’d be nice to map out exactly like, okay, the home screen is using remote spa editor, traditional spa editor, adventures is using GraphQL and just kind of showcase exactly, explain exactly how it got implemented. So if you’re watching on YouTube and streaming there, go ahead, Ruben. I think Danny, the examples, because they have to be referenceable, they’re going to make it out into the public GitHub repo from Adobe as well. As far as I know, that’s how I understand it. So in the future, they will be the new samples next to the weekend, it will all be available. Vania is already available today. Weekend is of course available and the others will make it there as well. Yeah, yeah, exactly. Yeah, so we want the code to be open sourced. And it’ll also make it easier too for feedback through GitHub. So, you know, if you run into issues, you know, it’s always easier to like point to the code and everything. So, yeah. And if you’re streaming from YouTube, like you can always come back to this link, the recording will be here. But we’ll also post a copy of the recording on Experience League and you should be able to easily find it there. So, yeah, I think with that, we’ll wrap up the show. Look at that, right on time, 10 a.m. So thanks again, Hyman and Ruben for joining. And yeah, it’s super fun. And thanks for the lovely audience participation. I mean, that’s why we do the live streams is for that interaction. So, yeah, thanks everyone. Thanks, Danny. Thanks, everyone. This was fun. All right. Take care.