Content Fragment Variations

Transcript

Hello and welcome to the Adobe Experience Manager Headless series. In this video, we will explore fragment variations. Before getting started, let’s take a quick look at our learning objectives for this video. Starting with an overview of fragment variations, variations allow you to vary one or more fields for a given content fragment. They also allow you to provide alternate data views for your various content channels, consumers, devices, and to reduce maintenance costs. Variations allow you to use common fields and only override fields that differ or vary. Variations are ideal for solving a number of real-world use cases, such as omnichannel content delivery. By overriding a subset of fields that vary, you can deliver the same content fragment with subtle differences for the web, mobile, and other channels. Similarly, variations can provide alternate data points for different device types. For example, content can be tailored for desktop and mobile rendering. Comparable content, such as seasonal promotions, is also possible. By the end of this video, you should have a good understanding of these core concepts. How to create, query, and apply variations for your particular use cases. Let’s start with a practical example and assume that we want to reuse our AEM site’s content for social media. Platforms like Twitter enforce a maximum character length. With variations, we can provide an alternate description designed to work within these constraints and allow for content differences. We will explore this example by navigating to content fragments. We will use the downhill skiing content as an example under the Weekend Share project. Now that we are in the content fragment editor, let’s review the variations in the side panel. By default, every content fragment is created with a main variation. This variation cannot be deleted and serves as the parent content. Now let’s click the variations button and create an alternate view of the data for social terms, called social. It’s important that the variation names are created consistently under content fragments as they are not associated at the model level. For example, if we wish to query for the social variation across all content, we must ensure that the same variation name is used on each content fragment. Now click create. Notice that a new variation is in the active state. We can also switch back to the main or other variations simply by clicking on the desired variation name in the side panel. So, notice that our content fragment is pre-populated with data from main. This makes it simple to only change the fields that vary from main and to support content’s thinking. Now let’s change the value of the description for use on a social post. We’ll use a shorter copy and add a few hashtags. With the variation created, we are ready to explore some GraphQL queries. Let’s begin by creating a GraphQL query to return the list of all the available variations for the adventure content fragment. AEM includes an auto-generated field called underscore variations for every content fragment. Let’s add this field to our query and then execute it. Notice that each fragment has a variations field with an array of zero or more values. If we scroll down a bit, we can see that our downhill skiing sample has a variation called social. Now let’s copy the fragment path and modify our query to look at the downhill skiing content by path. This requires a few minor modifications, such as changing the query type, adding a path parameter, and changing items to item. Let’s also remove the variation field and add the title and description fields. Next, let’s execute the query. Pay close attention to the adventure description. This is the description for main. Let’s make one more change to our query and add a second parameter called variation. We’ll set the variation name to social. Now let’s execute our query once more. It’s important to know two things. First, our description now contains the shortened version. And second, we’re getting the fallback title for main since we did not change the title field. Now that the basics are under our belt, let’s take a moment and revisit the adventure list query. Notice that although we specified a variation, we are still getting all the results. Variations do not change the filtering or results for our query. They simply return the variation values if they exist and the fallback value for main if they don’t. We can filter results using variations. Simply add a filter argument to the adventure list query type and specify a filter expression that matches the underscore variation field value. Now let’s execute the query. As you can see, we are both filtering results based on the variation and getting the appropriate variation of the content. Now let’s take a look at another real world query. Recall that our adventure model references the contributor model. Let’s add the contributor reference to our query. Let’s add the full name, biography and variation field. Once executed, notice that the contributor reference contains the fallback value from main. Let’s switch back to content fragments. Navigate to the contributor content under the weekend shared site and create a variation called social. We will make a simple change to the biography for this variation. With our changes in place, let’s go back to graphical and re-execute our query. As you can see, nested fragments can also make use of variations. This concludes the fragment variations tutorial. Thank you for joining us and stay tuned for future videos in the headless series.