Adobe Experience Manager Sites Basics

Transcript

Hello, everyone and welcome. Thank you for joining today’s session of our Adobe Experience Manager Sites Skill Builder Webinar Series.

Content for ANWHERE: Making Omnichannel experiences a reality.

My name is Anu, and I’ll be your host for this session. If you haven’t already, please take a moment to respond to the polling questions on the screen.

Today’s session is approximately 60 minutes and is being recorded for future on-demand viewing.

During the presentation, you may enter your questions at any time in the Q&A pod on the left-hand side of your screen. We will address your questions as we go along and also at the end as time permits.

Joining us today is Luis Duarte, Adobe Certified Architect and Authorized Instructor for AEM. Luis, you now have the floor.

Thanks, Anu, for the introduction. And welcome back, everyone. And welcome the ones who are joining us for the first time, for this type of webinar.

Today, we’re hopping to the third day of the series of AEM Sites Skill Builder authors, Content for ANYWHERE: Making Omnichannel experiences a reality. Today, we’re going to tap into the power of content reusability with an AEM using content fragments and experience fragments, okay? This is the high-level agenda. First, a quick overview of the program, the contents of the day, and then a Q&A session at the end.

If you have questions, please go ahead and post them on the tab.

And at the end, I’ll try to go over most of the questions or the most I can, okay? So this is where we are today, day four. All right. I did say day three at the beginning. So I apologize for that. Today we are on day four of the series.

This is our Omnichannel experiences or making Omnichannel experiences a reality. We’re going to learn how to deliver experiences across many channels using content fragments and experience fragments, how to create those and manage those. Once again, always look at the bottom here. We have other webinars series that you can register for.

Okay, here’s the URL that you can go to for that.

And on our fifth day for the ones who maybe wondering. On our fifth day, we’re going to look at multi-national, multi-lingual sites, how to use the AEM multi-site manager. And we’re also going to look at editable templates on day five. So it’s going to be editable templates and going global with multi-lingual, multi-national sites in AEM with a multi-site managers. Okay. So before we begin with today’s content, a quick recap of what we did on day three. On day three, we learned some very, not some very basic, but some a little bit more advanced operations for authors, starting with the publishing. We learned about author environments and publishing instances, and different kinds of environments. We learned about version pages, moving and deleting, how you were supposed to use the move wizard, or the delete operation.

And there’s workflows that can be used to execute those kinds of more sensitive or impactful operations. We’ve looked at those workflows. We actually did one, where I use the request for activation workflow to show you the workflow functionality and have a page published while going through that workflow. I mentioned that in many cases, we will make publishing of content directly off limits to most authors and make it just something that some offers are able to do the actual publication of content and everyone else has to go through a workflow and start the workflow, okay? That’s one kind of situation, but there’s sort of situations, like I said, impactful operations. And the workflow engine in AEM is very robust, gives you a lot of room to customize and to create your own types of workflow steps and workflow models that you can model your organization’s processes. But as a side note and as an advice, always try to keep it simple, okay? Let’s go to task three, day three, that was looking at the AEM launches. We learned how we can edit two additions of the same page in parallel, okay? with the intention of having the second edition, replace the first edition at some point in time. For that, we use the fictional situation of the We Retail organization, where they have content that has to be tailored for two kinds, two for two seasons, for summer and for winter, okay? And here on the green, we saw how the summer edition was evolving through time and all the while, we had created a winter launch that was being edited in parallel. And some of the content was being inherited back, Oh, sorry, inherited into the winter launch and some of the content of the live site was not being inherited, but rather was being customized specifically for winter. And we saw how then we could merge the result of the current live site here, and by promoting the winter launch, we would get basically, the merged result, okay? The content that was inherited with the content that we created specifically for winter, and we would have a winter release. All right. So without any further ado, let’s hop now into the day four content. We have two tasks in store today. First one involves content fragments. We’re going to look at the Content Fragment Editor, content fragment variations, look at the content fragment components that are used to deliver those content fragments on pages, okay? We’re also going to look at how you can associate content such as assets to content fragments, content fragment models. We’re going to talk about that as well, and elements. And our second task, we’re going to look at experience fragments, okay? The experience fragment editor, all the different ways in which we can edit variations of experience fragments. We will look at building blocks and we will use the experience fragment components as well as learn how experience fragments can be exported to the target. All right. Okay. So these are the main aspects of content fragments.

On our first test, we want to basically create an article that has a full length form.

And summary edition, as well as a highlight edition of the article that we can then reuse across multiple channels or multiple purposes. And maybe even an iteration of the article, okay? So for these, we’re going to leverage content fragments, and content fragments are meant for situations where you want to manage mostly content, sorry, sorry. Mostly textual content that needs to be channel agnostic.

And if your content also needs to be reused in many channels, many web channels or non-web channels.

And also if you don’t care at the management level and at the editing level, you don’t care about the layout and the presentation, but rather you want to leave that to each channel, to figure out, then you, in that case are tapping into a use case for content fragments, okay? So here is an example, let’s have a look at these. In content fragments, what you have is a centralized hub, which is a Content Fragment Editor, which allows you to edit and create content fragments within the assets module of AEM. So this content fragments exists within the whole AEM Assets structure of content in the hierarchy in AEM, and you edit them via the Content Fragment Editor. And what you do is you can create different variations of that textual content that needs to be presentation and channel agnostic. And you can have these different variations catered to different situations. Like for example, I’m looking here at a variation that I’m using for a mobile application. For example, maybe one that I’m using as a teaser on a carousel over here, all right, which is a highlights edition of this article. And then the full form edition of the article on the page with the article. And then maybe we have a brick and mortar type of use case where we want to display information about the article with the highlights only. So in the case of the mobile app, I would use the summary. For example, in the case of the full page, in-depth probation, I would use the full form of the article. And in all of these cases, what I want to be able to do is manage all of these variations, centrally. Why? Because if everything has been derived from a main article, the main article on mountain biking, for example, in this example, I derived a summary. I derived highlights, a teaser, everything is basically semantically linked to that original article and if I make a change, I edited to make some changes to the article that would warrant a change on all of the variations. Then I can just make those changes on a single place on the Content Fragment Editor, as opposed to having to go to every single location where I am using any of the variations and edit it individually. So basically, by doing this, we are grabbing or we are using the intros of edit once or create once, and deliver, and update everywhere, okay? So that’s the main intros behind content fragments, create once, and edit once, deliver everywhere and update everywhere, all right? So let’s go ahead and look at the content fragments. Let me go here into the sites console. Once again, the sites console, you get there by going through the main navigation, click on the sites icon there. Now you’re on the sites console, let me make sure I have the right size here. Okay. That’s good. We Retail and we’re going to have a look at particular set of pages that we have here under We Retail site, We Retail, language masters, English, under the English edition. Then we have this experience section, okay? Within the experience branch, that’s where we have articles, experience articles and each one of these articles, if we open them for editing, let’s open this one for example, we’ll look at its contents, tapping in Western Australia, we can see that the article itself, if I click on it, there’s a blue frame that surrounds the whole text.

The whole text section here and the blue frame is labeled content fragment, okay? This is because what I’m doing here is using the content fragment component in order to surface on this page, the content fragment camping in Western Australia, which is basically an article. Now I’m going to explain the full form of that article here. And I cannot actually edit the text on the page itself. As you can see, if I try to do anything on the text, there’s no blue frame around the text that comes up. I do have these layer containers in between the paragraphs where I can drag and drop components into an mixed assets and other things, other components with my content fragment on the page that is on the web channel that I am currently editing. But right here, I am not able to edit the content fragment itself. The content fragment is edited centrally, the Content Fragment Editor. All I have here, if I select the parent of this whole thing, which is a content fragment component, all I have is the ability to point the content fragment component to our particular content fragment, okay? So I need to get to this content fragment in order to edit. And as I said before, content fragments exist within the confines of the AEM Assets module. So I’m going to go back here into the sites console so I can switch over to the assets console, all right. Assets files, that’s where we have all of the assets under files and then go to in this case, English experiences, Western Australia by camper van. And here I have that content fragment that I am referencing from the page, all right? So I can also see that by selecting the content fragment like that, and then going here into references and see if there are any references, there’s site references, 14 site references, and here, you can see all of the different pages where I am referencing these content fragment, okay? I’m going to go ahead and select it by clicking on the thumbnail. And right-click on edit. This will open up the Content Fragment Editor. So what I want you to notice it on, what I just did is that this another essentially this is under the assets console, so when I open edit, it gives me a different type of editor, then if I were to edit that particular asset, okay? In this case, you get the content fragment editor. With content fragment, the first thing that I want you to notice is that we have variations, okay? In this case, I have a master variation and a teaser variation. Content fragments are essentially textural context, content, sorry, textural content.

And the textural content is held within content fragment elements, okay? In this particular content fragment, we have a single element, which is the story element, okay? Doesn’t mean that we couldn’t have more, but in these particular content fragment based on the content fragment model that is based on, you have a single content fragment element, which in this case, story and happens to be a rich text, a rich text element.

Now, before I go into the actual variation content, let me point out that here on the left hand side, where we have several tabs, I can click here on the I icon, the metadata icon. And this will give me the form with the metadata, which is customizable. You can customize this form to show you or give you the metadata that you will need and give you the information. Like I said, about the article, about the content fragment in this case, it’s not to become conflicted with the actual content fragment content, which is held within the variations. When I click cancel, like I just did there, then I didn’t save. That means that if I had done any changes, then those would have, would be locked. So I have to go back here, select, click on the thumbnail, edit again and all the time, regardless of where you are, you are going to see these two buttons cancel or save, so be sure that you tend to save what you’re doing, click on save or you click cancel, it’s going to take you back out into the assets console. All right. Now, into the actual variation. So let’s have a look at the math variation. Basically, these are full form article with rich text editor, but what I’m going to do is create that summary edition, which is the first part of the back one here, create a summary for our article.

This is maybe ideal for mobile apps.

There you can’t come up with your own suggestions there, and there we have it. When we have an experience fragments variation, I can see that initially it will have the same value for the element, for the story element as the master, okay? And if I work to make a change on the master, I can use the actions to sync the current element in the currently selector element with its corresponding element on the master, okay? But what I want to do is actually have a look right now, what the different options that I have to get here with the Content Fragment Editor. This is basically, a rich text editor because of the type of element that we’re looking at, where we can work on the fonts and make them different sizes, we can bold them, italicize them. We can use the underlining. You can align to left right center, bullet points. Label is available there as well, a numbered bullet points and indenting and outdenting of lines and paragraphs, we can also do that here. I can open this in full screen mode by clicking on these buttons, once again, there’s these buttons over here, click on that, full screen mode. All right. And what I can do now with see the full breadth of all the different functions that I have here for the rich text editor under content fragment, under the content fragment editor. Okay. So you also have the ability to add hyperlinks, okay? And make them be targeted to different tab, or at the same tab, or a new tab. You can specify the tab, it can be either external or internal within the AEM.

You can break also the hyperlinks as well. You have the ability to paste text from elsewhere. Put it here, okay. You have pasting, you can get some text from word and paste it over here and add it to your content fragment.

We can also paste the text directly on the rich text editor as well. Here, this is the paragraph and heading selector, so you select that particular part of the text and you can change its type of heading, for example, make it heading two, instead of heading one, for example.

You can also add inline media using these buttons over here. Make sure I put my cursor where I would like to have the image output, okay? So over here I’ll pick some image, the activity, something about surfing, just to show you.

So basically some inline media, in some cases, like I said, this is for mostly textural content, but there may be cases where a particular image or illustration is always linked to that particular piece of text and you have to want to always have it together and you could put it right here, okay? What else do we have? So we have the ability to search, a search and replace, spell checking, okay? So checking, adding annotations, highlighting pieces of the text and adding an annotation over here.

And then you have an annotation there on the text. What else do you have? You have the ability to help detecting different formats. Right now we’re using rich text format, which basically outputs, whatever you put here in HTML.

Okay, this is, will be output in HTML with particular styling space on the rich text editor.

But it is very generic. So makes everything basically up to a content channel to produce they don’t care about the types of HTML elements that are added and how to deal with things such as headings, for example, things like that and how to add a hyperlink. All those things have our correspondence in HTML as you know, so these will allow to do HTML. That is a rich text editor, but then you have also the markdown editor Which allows you to format your content, your text in markdown, which is a popular documentation format.

Used a lot by the development community.

You also can use a plain text editor as well, all right? You have a texts statistics where we can see as statistics about the article in this case, you can do a synchronization with the master for the article here, as well as importing text content as well from your screen. And then you have to summarize text option to who where I want it to get to, okay? So I want to be able to summarize this article, So to make it no more than 250 words long. So I’m going to use this as a target amount of words we can start and who’s going to, who’s going to leverage AI, artificial intelligence and in order to produce a summary for this article that we have just seen here, I can preview that and we can see the summarized edition next to the full length article, okay? Then I can just click on summarize and these will apply the summary. And now I have a summary here.

All right. So I have my second variation. Well, third, if you count the piece that was already there, but now I want to add another one, the highlights variation. So I want to have a highlight variation for this article. So I’ll create another variation like highlights, you know, teasers.

Okay.

Add it. Okay. Like I said, original and originally is going to have the same value as the master, okay? That’s what I want to do is replace this with some highlights that I derived from the text. Now, in this case, I do have the ability to actually automatically derive highlights from the text that I can, I have already make up, made up some of my own. So I’m just going to replace them here. And I did this basically by going to the summary and getting a highlight from every paragraph in the summary. And that’s how I got my highlights, okay? But that was done manually. So I’m going to go ahead and replace these whole thing with the highlights.

I might want to actually leave the author maybe and the title, so there you go. Now we have a highlight of this, let me save it. When the moment I click save right now, then I will have an experience with these four variations.

But before I do actually want to show you a couple of things more before I leave the editor, okay? And always make sure we don’t click cancel here.

And what I’m going to do now is I’m going to go into the associated content tab, which is this folder icon over here, which allows me to associate content, the way in which you associate content is by associating collections. What are collections? If you’re going through the, you sign up for the, register for the AEM artists webinar series, you will learn a little bit more about those, but essentially collections are collections of assets, which basically you collect from multiple locations within the asset hierarchy and collect them within a single central light location, our collection, which is basically just a list of references to the actual locations of those assets. So the collection basically, giving you access to a set of assets, which are scattered throughout your directory structure for assets, but that you cherry pick for a particular purpose, okay? So in this case, I can say I’m going to cherry pick some assets that I want to be always associated to this piece of text which would content fragments. So I’m going to click here the associate content, and I have already taken the liberty to create a collection. So I’m going to just choose the collection of assets and associate it. So now I have some assets that will always be linked to its content fragment when I’m editing pages or experience fragments with the editors that correspond right there. Okay. So now that I have associated content, all the variations that I want as well, I will now click save, okay? And this will save finally, my content fragment. Next thing I want to do is actually use the content fragment the way I want it. So I’m going to go ahead and go back into that page that we’re looking at when we’re using the content fragment, which was experience camping in Western Australia, edit it again.

And this time I’m going to make a slight change over here.

So make sure that I open select this and notice that I actually had it already pointing to summary. The moment I created that summary, it started working with the summary because that was already stored there from a previous reviews configuration that I had done of the content fragment component. But I can now choose, for example, go back to the master variation and that will get once again the long form of the article. So once again, what I’m doing is I am editing, the content fragment component, okay? Content fragment component is an AEM core component, it comes out of the box with AEM, which allows you and allows you to deliver content fragments by pointing or referencing them from it, okay? So what are the options that you get here? You can point to either a single element, which is the case for us here, because we only have the story element. And then on that element, you can pick which variation of that content fragment elements you want to use. For example, I could now go to the highlight creation for example and see that over here. All right. So let me set it back to the long form, because that’s the purpose in this case. All right? Master.

Okay. Additionally, you can go to paragraph control and specify a range of paragraphs that you want to display using the format that you get when you hover over the I, the information icon. Okay. Let me go back here to select all, because I want to display all of the paragraphs the check mark and not have the full article again. Okay. So that’s one thing that I wanted to show you about content fragments, but there’s another one, which is the fact that content fragments are based on content fragment models.

And content fragment models, determine what the content fragment elements are going to be. For instance, if I go to the about us page and open that one for editing. Now you’ll notice that we have a particular thing here. I have a tab component. And on the tab component, I have the different store locations for We Retail. Each store location is basically text scroll content. But in this case, I don’t want to edit it directly on the page. Maybe I want to reuse these store locations on multiple channels and not just on the about us page, maybe on a mobile application or any other situation where I may want to display information about store locations. And these textual data, it is particularly special because it is a more structured than the one that we were looking at before. The one that we were looking at before, it was pretty much, abstructured an article that rich text article, and that was it. In this case, we have multiple text elements and each element may have a different type of data, in some cases. In this particular case, most of these is going to be textual data, but we’re going to actually look at the content from it and inspect, okay? Well, let’s go ahead and have a look at the content fragment that is behind this. Once again, I go here, look at the information. This is under the We Retail AEM Stores, We Retail store in New York. So I’m going to go over there. Once again, here, the sides console into open the assets, files, We Retail, English, Stores.

Here I have several stores. Okay. And if I open New York, for example, and open it for editing, now you will notice that we have not just a single element, but multiple elements, okay? And each element has a different type. These are different type of field. For example, it’s just a text field, these are rich text, this is a number field, okay. So you can put up a number, cell phone number. You can put another rich text here in this case, the table, a description with some text area or something like that. So these are different kinds of text fields, that will determine different data types, in some cases.

In this case, I have tags here at the bottom, as you can see that I have put here as well. Now this is driven by an underlying content fragment model. So the article content fragment had its own content fragment model, which determined that there was going to be a single content fragment element of our rich text type. In this case, the content fragment model is determined that we have more than one. We have all of these content fragment elements and we determine which types of fields they are on the content fragment model. The content fragment model itself has an editing UI or a managing admin, administration of the content fragment model itself. So that’s something that you’re going to also do within the confines of AEM. Okay. So let me cancel this one. And if you were to create a new one, create content fragment, the next thing that you’re presented is, which content fragment model do you want to pick from, so originally call it template here, but essentially is our content fragment model, all right? I’m going to select We Retail Store info, content fragment model. And click next, scroll these ones, for example, P San Diego, sample, give it a title.

Now we’re done, click open. And now I have my San Diego content fragment. All right. Maybe cancel that. All right. So what are the main take away here with the content fragment is they are mostly textual that the idea is to have it, you use them for mostly textual content, of course, there are some cases where you mix inline media, like I showed you, but it has to be pieces where the illustration or the image is inextricably linked to a text all the time. So that would be that case, okay? Now you also have the idea here of reusing our cross multiple channels and updating it once and applying it everywhere. So we updated centrally on the Content Fragment Editor. You can have different editions or variations of the same texts. So basically if you have one content fragment element, then every variations that you create is going to have that same content fragment element and you can edit it to cater for that specific variation. But if you have five elements, the five elements will be in every variation. So you have to edit it for every variation, okay? Every variation will have all of the elements.

Then you have, but of course, as we saw with the content fragment component, you can choose which elements to show, okay? Then you have the content fragment model, which is what content fragments are based on, it determines what elements are going to be there, what types of elements they will be, which text fields, rich text, enumerations, states, those kinds of things. The editor gives us a form like or data collection form like anything experienced, okay? Which makes it a little easier to train, maybe a subject matter expert that maybe less inclined to working in AEM using the full fledged page offering and knowing all of the ins and outs of the page, enter and the outside consoles. They just maybe want to be able to put some texting and you can use content fragment editor for life, pretty simple, okay? So you can simplify the tasks for a subject matter expert that doesn’t care too much about knowing too much about AEM, but they are an expert on some other field, and they can or maybe their assistance, they can work on the content fragment editor, then you have the layout and presentation and you take it left to each content channel. This is very important. I always stress this very strongly, lay out the presentation, the content fragment has to be left over for the channel, okay? Associated assets to make the assets that you want to be able, that you want to have authors use with your text is another option here, I showed you how you could associate a collection of assets. And then on the page editor, you can actually get access to the code, to the actual associated collection or associated assets. And use those specifically along with the text, we’re actually going to do it right now and edit the experience fragment, okay? So these are we just went through.

Let me now go over to the second task. Okay. So now we’re going to work with experience fragments. Okay. What we’re going to do is create an experience fragments with two variations. One variation, which will have an image to the left of the highlight creation of the content fragment that we just created.

And then give you a kind of a teaser, right? We were going through also a different layout for that teaser, where the text will be to the left and the image to the right, okay? So we’re basically going to combine two components, the content fragment component, and an image component right here. And we’re going to lay them out differently on different content experience fragment variations.

And we’re going to use these two variations on the home page and on the women page of the We Retail site.

Okay. Experience fragments are weighing, which you can create an assembly of components, configured them in a particular way. And by that, I mean, associate different content or edit the content of each one of those components specifically, as you may want, and then you combine them with other components, laid them out in a particular way. So I do assemble them in the way that you want to have an experience created, okay? And then you use that assembly on multiple web pages across your site or across different sites that you may have posted on AEM. By referencing those experience fragment variations from the experience fragment component that you put on every page. So reference experience fragments across all those pages and you leverage API as well in order to get access to that. And you can get access to content experience fragments, plain HTML or JSON. In the case of these pages, basically we’re using plain HTML, but there are some use cases where JSON may be warranted.

You can also post or create experience fragments that you want to post to your Facebook page, for example, or your Pinterest page.

Let me go by here and let’s go ahead and have a look at these experience fragments. Okay. Now, experience fragments in AEM they get their own console. If I click on here, you hit the experience fragments console. If I go further to We Retail where we know our experience fragments, we have here at Western Australia by Van. All right. And you have multiple experience fragment variations that I have created here. If I select these and edit, okay? These are all of the different, let me wait for me to finish, okay here it is. This is the side panel. As you can see, the experience fragment editor is very similar to a page editor, okay? Then the experience as an author is pretty much the same in most of the cases, you’re dragging and dropping components onto layer containers, and then laying out those components the way you want configuring them that with the content that you want to show and that’s it. Now, but if you look at here, we have some extra things, when compared to a standard page editor. Here, we have the variation chooser, where you can pick within, from the different variations that you have already created or create new variations.

You also have the other tab, just like with the page editor, you can drag and drop components, the building blocks, which were both through using a moment and the associated content, which did it there because of the fact that we were using the Western Australia by camper van content fragment and happens to have associate content, and this is also there on the page editor, the content tree, allows you to see the components that are on the page right now. All right. Let me go back here and show you the different variations that you have in this case, for instance, we have an image at the top, the highlight here at the bottom, I have now a male experience as well for these teaser, a guy here surfing to the left and the text to the right. Female experience, a girl here, down here to the left. And then we have here the text to the right and what we’re going to be doing in creating our own experience fragment with these types of experience. One to the right, one to the left, in terms of the image, with respect to the text, okay? And these are all going to come from an original master variation, which is these one that has this image and these content fragments.

Now, before I go into that, just a couple of notes here, we have the Facebook post variation, and the Pinterest post variation. Now these are based on an experience fragment variation template that caters to do Facebook posts, and also Pinterest posts. And then if you have your AEM already hooked up with Facebook or Pinterest, you can just go ahead and do our social posts by clicking here, then you will be posting that experience, that variation of the experience fragment. Okay, let’s now go into experience fragments console and create an experience fragment. So I’m going to make that experience fragment, we edit to, or create your on the We Retail their webinar experience fragments, create experience fragments. Next thing all I ask for is a template, okay? This is the experience fragment variations template, this will be the template that the master variation will have, okay? So I’m going to pick the experience fragments, web variation. This is basically a variation that will be basically, empty texts, an empty experience fragment with just a layout container where I can drag and drop components into. Let me just create that already, when we come down so we can see it next to the other one. Here, we have it. Let me now select this and click the edit button. Okay. Before I do that, I want you to notice something when you select it and look at the content you already have the master experienced fragment variation, okay? I’m going to select now for editing. Click on edit.

All right. And did this, what I got from that template that I chose basically, a layout container where I can drag and drop components into, okay? So I’m going to go ahead and pick the components that I want, I want an image component, right? And I also want a content fragment component. And now I’m going to associate the content fragment component with the Western Australia, by camper van, content fragment, We Retail, in variances, and the Western Australia, camper van, select. And once again, I am presented with the option to either use multiple elements or a single element. I’m going to use a single element story, I want to pick the highlights, right? Trademark, so now I have my highlights and next I’m going to add an image here. So but not, I’m going to do this by taking into consideration, the intention of whoever created the content fragment. So they had the intention of making the authors use a certain set of assets, not just any assets here, along with their texts.

So that’s why I’m going to use the associated content tab. Now the associated content tab that you see here, if you’re using our content fragment with associated content, this time is going to come up, not just here on the experience fragment variation editor, but also on the page editor so that you can always pick the associated assets to a content fragment. Of course, if you have more than one fragment on the page or experience fragment variation, then you’re going to get a multiplicity here of collections.

That’s why we have the ability to choose here. I can say I want to only see the ones from Western Australia by camper van, okay? And if I have multiple collections there, then I can choose specific ones as well. So I can filter that out as well. What I’m going to do is I’m going to use one of the images here, one for example, right? And next time I’m going to, now that I have the two components laid out, okay, this is the master, just up the image of the dock that take at the bottom. What I want to do is now create two variations. I’m going to create the one that text the image to the left and in the deck to the right. And the one that is going to be the opposite, okay? So I’m going to click here on create and select create variation. Next, I’m going to pick a template.

This is just, when we were first clearing the experienced fragment that we have to pick a template. Only that time it was for the template of the matter variation, in this case, it is the templates for these new variations that we are creating, okay? Environment web variation, I’m going to use the same template as the master.

And this is going to be image to the left, text to the right, check mark, right? It’s already been created. Now, I have it as an empty experience fragments variation. Now I could go ahead and start dragging and dropping components all over again. But since I know that I’m going to use the exact same image, the exact same content fragment, maybe I’m going to reuse it, reuse that combination across multiple variations. I can do something special here, I can’t go back here to experience fragment master, to experience fragment master variation. And what I’m going to do now is go, call creating a building block. So I’m going to select one of these, press command or control so I can group it with the content fragment components. I’m selecting the image and grouping it with the content fragment component. So both are selected. And now, while both are selected, the experience fragment variation editor gives me this option, which is converting a set of selected content fragments into a building block. When I click on that, okay. I can want to call it something that I can relate in terms of, so these will be image plus content.

Right. Okay. Great, okay. Notice that now I have a wrapping dotted line through surrounding the two components. So both are now within the building block. So that means that I can now reuse that building block on other variations. So I’m going to go back to my image, to the left text, to the right variation. And I’m going to go to the building block tab, and here I have it, my particular building block. Notice also that here I have options to filter, why is that? Because I may have created more than one building block and what I’m seeing here is just as local building blocks, that is the building blocks that have been defined locally within these content fragment. But if I select, all, I can see the building block, a building block that was created on the other content fragment that I was showing you before. So I can do that as well, but I’m going to go local only. So I can use the ones that are only here and now I’m going to drag and drop these building block over here, now I have it there. And as I said, I want to be able to change the layout here. So the images to the left and the text to the right. But before I do that, I want you to notice something, if I click over any one of these two components, I don’t get the ability to add, okay? Notice the toolbar among the actions, I don’t have the range icon in order to open the dialogue to edit this. That is because these components are part of a building block. And I can notice that that if I select this and go to the parent or surrounding frame, blue frame here, you can see that we have these options here. It says, cancel inheritance, this would basically take the two components out of the building block, or I could create new building blocks as well. But what I want to do now is show you how you can change the layout. So I’m going to select this notice, this is the only thing that I can do for this component, basically we change the layout, okay? And that’s it. I cannot even change their position here, but I can change the layout. I can go here and now I can just move these over here. All right. And make it take just half of the width of the grid, of the responsive grid, okay? And make this one also pages just half of the responsive grid, all right? Okay. So now I have my first variation there. The second one is going to be the opposite, okay? Text to her left and image to the right. Let me go back now for, to the master variation. What I want you to notice now is that if I make any changes here on the master variation, in terms of content, that will be immediately reflected on those variations that are using the building block, okay? Like for example, if I can go ahead and say, I don’t want to use this image, but I want to use this other image or maybe actually this other image, okay? So if I go to the building block to the other variation, you will see that the image has changed. So content will change along with the building block, okay? If I go by here, I also can change the positions of the components over here. Like maybe make this one drag it from here in place it on top of this one.

So I have the text at the top and the image at the bottom. If I go to the variation that didn’t affect the variation at all, okay? So in terms of the configurations of the components, that is the content that they are supposed to show, the building blocks will reflect whatever has the master with the building block, whatever you have on the building block source.

But if you make changes to a layout, that will not have any effect on the variations where you have made your own layout. So I’m going to do now is create the second variation, which is going to be also based on that same template, fragment web components, all right? Title it, this is text to the right, image to the left. It is empty, but once again, I’m going to use the building block.

Drag and drop it over here. And now that I have the text at the top, I can very easily just go ahead and change the layout here, make it take up half the width of the responsive grid. And this one will also take up half and as I show you on our second webinar, this will float up because it has enough room float up to the upper row. So now we’re ready with our experience fragment and its variations. Now it’s time for us to use it, okay? Before I start using the experience fragment, the last thing I want you to notice is the experience fragment itself is just a place holder, basically a folder that contains variations, okay? That means you have to actually take a variation on the channels that you want to use the experience fragment and the actual variations themselves in the background and under the cool I would say technically, they are essentially AEM pages. So for technical people, you can think of all of the implications of that. These are basically pages, all right? So what I’m going to do is I’m going to start using these pages that I have created here, which are actually experienced fragment variations, which are tiny assemblies of content that’s sent off on their own. And I’m going to reuse them in some other locations. So I’m going to go to the homepage in We Retail and use the homepage, is the experience fragment variation here that I want to use with the image to the left and the text to the right. So I’m going to put it right. Oh, I already have one here, but I want to remove this one.

Okay. Let me start from scratch here and add one.

Above, Our Top Stories, okay? Or maybe even above these one. So click on this, content fragment, there we go. We have a content fragment components, not yet configured. So it’s just a place holder. I have to point it to an actual content fragment. Sorry, a content fragment, I made a mistake. Supposed to be the experience fragment, sorry about that. We’re talking about experience fragments right now, and I’m going to add the experience fragment component. Once again, you saw one of the components that comes out of the box with AEM. Now I’m going to open a dialogue so I can pick an experience fragments variation to display. So I going to We Retail webinar experience fragments, experience fragments webinar. I’m going to pick the image to the left, and text to the right variations which have the highlights additional, of the fragment right here.

And now I can go to the other page where I want to reuse this, which is women, right? Edit it.

All right. And here, tab, click on the plus icon there to add a components, by the way, I’m just going to go ahead and drag and drop. So for the people that are joining us for the first time they get to see, you can also do it this way. Okay, drag and drop the component and this one will go to the other, the opposite variation. Which have the text to the right image, to the left.

Now we have it done.

We’re ready with that. And if I were to make any changes to experience fragment variations, I go back here to the a variation, like I say, no, maybe I want to actually use the other image that I had before. So I’m going to once again, pick that one and not here, but rather to refresh this and pick this one, want to use the other image.

And the idea here is that this image that I am putting here now should be shown on both pages. If I go to experience, here on the homepage.

There you have it. And also on the woman page. So edit once and update once, and sorry, edit once, update everywhere. Okay, there you have it.

So as I said, there’s the ability to post to create experience fragments and post to Facebook and Pinterest, this is out of the box. Okay. Then if you want to make for other types of social media, you have to create your custom templates and also integrate those with those social media outlets. And then you have the target integration, which allows you to post an experience fragment to Adobe Target. So if I go here to the experience fragment console, is that here? Sorry. Back to the console. Close this, go back to experience fragment console. And you can pick an experience fragment variation, and you could export to Adobe Target, if you have Adobe Target integrated.

So it will become an Adobe Target offer that you can tap into while working on Adobe Target or with Adobe Target. So you can personalize using that experience fragment variation.

Also, you can expose the contents of the experience fragments from HTML, HTML Five.

Would you basically go at what the experience, running component that we are using is tapping into, right? We’re getting the HTML and you can also expose them as JSON.

All right. So highlights here. The experience fragments are meant for creating rich experiences or enriching experiences with these assemblies of components that stand up on their own. These are layout and presentation, sorry, the layout and the presentation here is important. We want to be able to manage the layout and the presentation of these experience fragments. Want to use them across multiple channels with the intros of update once and apply everywhere experience fragments. You are supposed to hold one or more experience fragment variations, like we just saw. And we are based on experience fragment variation templates. Each variation is based on a template, which is basically, technically at a page template in AEM.

They brought the base layout. But then it’s up to the author to combine the components and configure them with the content that they want. They can be an empty template, a Pinterest template, Facebook template, et cetera. You can export to Adobe Target as an offer. Experience fragment variations as offers. The editor between fragment has pretty much the same capabilities of the page editor with some additional ones that are specifically catered for experienced fragment variations. The building blocks that we saw allow us to reuse the same components with the same configurations across multiple variations.

But we are able to change the layouts of those, reuse it, that we’re doing all the building block across multiple variations so we can change the layout there, but the configurations and the components are being used that come from the building block are remained the same as with the master.

Also you can create your experience fragment variations at live copies of another experience fragment variation. That means a live copy is basically a copy, these are pages, like I said, these are essentially in the backend. These are pages to correct, you create a live copy, we’re going to learn more about live copies in our next webinar, but basically live copies, are copy that keeps a live relationship with its source. You make a change to a source, the copy will carry that change. The difference with a building block here would be that with live copies, you can individually, cherry pick which components for which components you want to undo the inheritance. With the building blocks, you basically take all of the components out of the building block at once, or keep them altogether within the building blocks. So that’s pretty much it, for Q&A. then we have a look at, we are almost at the top of the hour, we’re over the top of the hour. So let me see if I can check out some of these questions.

Thank you. So yes, we do have a couple of questions in the Q&A pod.

Are there any future plans for AI to produce highlights automatically? Sorry. I honestly, I don’t, I don’t know if there is a plan for that.

So I don’t think so, I don’t think so. How to get source codes so that I can run these codes on my local host.

So basically where everything that I’ve been using here is part of the reference, the We Retail reference site, which taps into the AEM core components.

So if you have an AEM instance, you can look at the source of all of those components right there. You just go to the apps, We Retail project and follow the code, okay? So what else do we have here? Ling is new to the series. So Joseph had suggested that we explained the difference between, yes. Oh yeah. Thanks Joseph for the point there. Yeah, definitely. The main difference you have to think about is what you are using. Content fragment you’re using text, mostly text. Sometimes you combine it with inline media, but it’s essentially texts that you want to reuse across multiple channels.

With experienced fragment, what we are using is an assembly of components that you configure in a particular way. That’s the main difference in that assembly of components, you do have the ability to change the look and feel with the template that you use for the experience fragment, you have the ability to also to play it out in a different way, combined it with different components. So basically, presentation and layout is important in experience fragments, but not on the content fragments on the content fragment it is up to a channel, okay? Oh, doesn’t have already found the bell ringing.

You were, you were answering some of the questions, thanks.

Perfect. So Louis, thank you for a great presentation. Folks, we do have a couple of resources available for you to view and as well as the link for other upcoming sessions. -