Ă۶ąĘÓƵ

Transcript

Let’s take a look at how Ă۶ąĘÓƵ Experience Manager lets you augment a remote spa to include developer specified areas or zones that are authorable by users in AEM using Spa Editor. Before we get started, let’s quickly take a look at the spa we’ll be enhancing. We’ll be using a spa that promotes weekend adventures. While the spa does consume adventure data from AEM over AEM’s GraphQL APIs, there’s nothing inherent that makes this an AEM spa. For the sake of this exercise, we can pretend that the spa pulls our adventure data from any GraphQL endpoint. The spa’s home view displays a list of adventures and clicking into them loads the adventure’s details via a dynamic route. So clicking on Bali Surf Camp pulls up the adventure details for that specific adventure. Likewise, clicking into other adventures pulls up their details. As you learn about integrating AEM Spa Editor into the spa, we’ll be using the term remote spa a lot. This is simply meant to be a way to make spa a more accessible and accessible experience. The developer in the spa is intended to run anywhere and does not need to be hosted by AEM. Rather, it’s hosted remotely on the platform of your choosing, but integrates with AEM to support content authoring and consumption. So the primary focus will be to take a look at how we can make developer defined areas in the spa editable by authors in AEM. We’ll take a look at how to replace required hardcoded text in the spa with fixed editable components, meaning the developer adds a specific editable spa component to the view and authors can then edit its content but cannot remove or move it. Next, we’ll look at how developers can add editable container components to the home view. Container components placed in the spa by developers provide areas that authors in AEM using Spa Editor can drag and drop allowed editable components into. Authors can then edit these components, either creating new or reusing existing content in AEM. Keep in mind, only components that have counterparts as AEM enabled spa components will work here, and we’ll explore the details of what these look like as well. We’ll also briefly explore how AEM’s responsive grid can be used in these containers, allowing authors to resize and arrange components. Lastly, we’ll look at how these concepts can be applied to dynamic, or parameterized, routes in the spa. For this, we’ll look at how to add editable components to the adventure detailed routes, which are defined in the spa with a prefix of adventure, and parameterized with the adventure’s ID, which in our case is the adventure’s content fragment path in AEM. We’ll learn what’s required to create dynamic mappings between editable components and these routes. Okay, I hope this gives you a taste of what you’ll learn, and I hope you have fun integrating a remote spa with AEM Spa Editor.