Create a live authoring guide in AEM Sites

Transcript

Hello, my name is Brett Verschbach, and I’m going to walk you through step by step how to create a live authoring guide within Adobe Experience Manager using out of the box tools, core components, and requiring no developer interaction. Before I do that, let’s actually walk through what a live authoring guide looks like in the end so that you understand the concepts. Here we’ve got the landing page of a live authoring guide that you can find at this URL above, and we basically give a simple welcome message to the live authoring guide and then link you off to the different showcase pages that will showcase and demonstrate the different components that are available in our system. So either here we can click on the different teaser cards that will take you to the category, but ultimately they’re going to redirect you down to these component showcase pages that we can go to directly in navigation as well. So let’s go ahead and go into the content elements or the button page, and we can see what a component showcase page consists of. It first starts with the title of the component and a brief description of what the component is. Then we demonstrate all the different ways that this component can be authored and rendered on the page so that our authors, our designers, our content strategists know what’s all available to them when creating experiences in Adobe Experience Manager using the components that are available to them. So first we have is the default showcase and we’re going to name it default. We then give some authoring instructions on how to create it, and then we’ve got an actual example live example that’s a working piece of code within our system that’s demonstrating the default button. Next we have a style variation for the secondary button, slightly lighter, styling, and we give a little bit different instructions on how you create it. And then we have an example of that style variation. Lastly, we’ve got some options within the dialogue to specify an icon. Not everything is a style variation. Sometimes it’s a content variation that’s worth showing in the showcase page. And so in this case, we’re showcasing the version of the button with an icon, and we actually have two different versions we’re showing here to give a little bit more in terms of variations. This obviously gets a lot more interesting if you’re looking at a component like a teaser, which has far more authoring instructions, a lot more complex to create, a lot more sophisticated, so to say. First, then we’ve got the image on the left, but then we can also put the image on the right. And then we’ve also got a case where it looks completely different, an image on the top and it’s in card format. This works a lot better in cases where you’ve got a grid that wants to display multiple teasers. Now we’ve also got a case with no image whatsoever. So you can see for your more complex components, how quickly this can become extremely useful to all your different stakeholders, knowing what is available. One of the benefits, and let’s go ahead and jump into Adobe Experience Manager, but one of the benefits of having this in your actual tool is not only is it running live code and actually representative of your components that are available, but we can come into here, into this library. So you can see I’ve got the library sitting alongside my website. So it’s the same running code that runs my website. And if I go down to my teaser component, one of the real nice things here is not only can I view this inside of Adobe Experience Manager, but if I’m an author, I can go ahead and toggle into edit mode. And now I can see how these different components are edited. I can go ahead and look at the dialog, see how the different buttons were authored. If I want to, I could actually remove one of these buttons and it would show reflect here. I can look how this alternate styling is added. I can see that, hey, it was because of this, this paint brush icon and the alternate image, alternate style was selected. I can see what happens if I take that off. Okay, I’ve got the default styling now. I can take the image out using this style. And so I can just come in here and play around and understand not only can I see what experiences are available to me, but I can also see how those are created so that I can create them myself. Okay, so now that we understand fully what an authoring guide is and what it looks like in its final form, now let’s make good on the promise on how you can build one of these in your own Adobe Experience Manager instance using no tools other than what you already have available. So you don’t need to work with your development team to create anything special if you don’t want to. So first off, let’s go ahead and let’s start by creating a new authoring guide. We’ll create it alongside of the one that we already have. But we’re going to use a very, very, very simple page template. This is one that you could create using editable templates in Adobe Experience Manager using your default website header and footer and basically just an empty drop zone in the middle where we can put our content. So I’m going to go ahead and create this page. Let’s create this. Let’s call it our authoring guide because this is our new authoring guide homepage. We’ll create that and we’ll open it right away so we can move on to authoring the content of that page. Why not get it knocked out right away? And so first you’ll see we’ve got a header and a footer and yeah, just an empty area where we could put our content. So let’s go ahead and start adding our content. We’ll start with a out of the box core component title and then we’ll go on to a core component text where we can welcome people to our authoring guide. And maybe give a little bit of context as to what this is. It’s all of our components and their variations. And you know, we could leave it like this, but it’s boring even for a boring guy like me. So let’s add a little bit of flair by maybe adding a core image component and let’s see what we have available in terms of Adobe Stock that might be fitting. This looks pretty good. It’s a collaboration tool, our authoring guide. So let’s use a collaborative image. That works for me. And we’re done. We now have a homepage for our authoring guide. So we’re one third of the way there. We got a homepage. Next we need is our category pages. So let’s go ahead and close this. And to create our category pages, we’re going to go to our authoring guide homepage and below it, we’re going to simply create a new page. And let’s start with the category. Content elements is a good one to start with. This would be things like a button, a text, a title, all those core components that we just used on the previous page. We can demonstrate those with showcase pages. Another category that we might want would be container components. So let’s go ahead and use that same template. Container components would be things like a carousel, an accordion, a tab control, et cetera, and so on and so forth. You could see I’d create all these different categories down the line. Below our category pages, we would then create our component showcase pages. And let’s just create an empty showcase page for the button component. And that’s the one that we are going to recreate in this demo. And so you could see this tree is starting to take form. If I were to build this all out, you could see how quickly I could do that. But let me just go ahead and fast forward for the purpose of demo here. Nothing special happening here. I could have just authored this all on my own, but just makes it appear faster. You can see now I’ve got four different categories and below each of these categories, you would have a listing of different components in each category. And so this is what it would look like as you add more and more pages. It would continue to expand. Let’s go now and before we author this button component, we do have still these category pages that we’ve done nothing with. And so simply what we’re going to do is go ahead and edit one. And the first thing you’ll notice is now we do have a navigation because I’m using my default website navigation. So no new component built for this. As you saw on the live version, we had a special navigation here. You don’t necessarily have to have that because that would require some additional development. And then for this category page though, all we want to do is have it redirect down to our first component in that category. That’s just what I choose to do. It makes it simpler. That way I don’t have to figure out what content I want to put on my category pages. Feel free to put content on those pages if you want, but I like keeping it simple. The homepage that has some content, the category pages simply redirect down to the showcase pages. And here we are now on the button showcase page. And so now let’s go ahead and again using out of the box components, let’s create the structure of a showcase page to show the different variations of this button component. We’ll start off with the title component that’s going to label what the component is and select its name automatically. Let’s then describe what this component is very briefly. So this is not how to author it. This is just simply what the component is. So this is just a CTA that links a user to another page. And then now that we’ve given the title of the component, we’ve given a description of what the component is. The next thing is, is we want to now demonstrate the different versions of this component using different showcases. And now we don’t have a special showcase component like we have on our example live authoring guide. We don’t have this special box, but what we can use is an out of the box core component. We can use the separator, creates a nice visual separation here that allows me to then now start creating my showcase. And so our first showcase is going to be for a default button. Let’s use a title component there to label the showcase. We’ll again use a core component text. And we’ll give some basic authoring instructions. So here we’ll say specify an internal page, or external URL and a button label. We can also say give authoring instructions in terms of how much content should be placed here. So maybe we’ll say label should be 20 characters or less. Really anything you want to put here that you think would be useful, helpful to your authors when they’re creating the component. Lastly, to actually showcase this component, we’re going to use the actual component to do so. So in this case, since we’re showcasing the button component, I’m going to author a button component here. Now let’s just link this to the authoring guide homepage, nice and simple. And since this is the default, we’re going to call that done. And there we go. We’ve got our default showcase showing the most common use case of our button component. Next, we want to show a style variation. So we want to showcase our secondary style. Let’s create a new showcase by putting in a separator that creates a nice visual separation. Let’s use the title again. We’ll call this secondary button. And we’ll give some new instructions. Let’s say this is similar to default button. But select the secondary style option. Very good. And then again, we’ll just go ahead and author the actual components so that we can see it in action. Go ahead, we’ll set this to the authoring guide homepage linked. We’ll hit done. And in this case, we’re going to go to the paintbrush icon, select the secondary style, and there we go. We can see that we are now demonstrating the secondary style in this showcase. And then one more showcase that we want to do was the icon showcase. So let’s create a separator again. Let’s go ahead and add a title. Icon button. And now this one’s a little bit interesting in that we want to show multiple variations maybe with and without a text label. So let’s give it instructions. Add an icon in place of or in addition to a label. A text label is. And because we want to keep the number of overall showcases on the page to a manageable number, we don’t want to make this page super duper long. In this case, we’re actually gonna put two different versions of the same component within this single showcase. So let’s go ahead and author the first one. Link it again to the authoring guide homepage. We’ll add an icon here. Let’s add the home icon. Now we can see we’ve got a case with a button with both the text label and an icon. And we can just add another version directly here and author it right alongside. We can really add as many of these as we want. In this case, we’ll take the label out. We’ll put the home icon in. And now we’re showcasing that version as well. And we can even go ahead and mix and match. Sometimes I like to do that again to keep as many different variations on this page while keeping the overall length of the page manageable. And there we have it. We’ve actually completed every step of creating a live authoring guide. We’ve created our authoring guide homepage, which again, if we go ahead and review, we’ve got just some basic content here. We’ve got our categories and then they lead down to our showcase pages. And we’ve created this all using out of the box components, your existing header and footer, and an empty page template that you can create from within Adobe Experience Manager. Thanks for tuning in.