Content Fragment preview

Transcript

In this video, we’ll take a look at how authors can have a in-app preview experience while authoring content fragments. We’ll be using the Weekend app, which is a simple React app that connects to AM over the AM headless GraphQL APIs and displays weekend adventures, which are modeled by content fragments in AM created from the adventure content fragment model. What we’ll do is configure AM to pull up this view of any weekend adventure based on the weekend adventure that is being authored. It’s worth noting that for in order this to work, you need to have a version of your application deployed that can connect to the AM author service since this is where content authoring happens. Here I’ve deployed a version of the app to preview.app.weekend.site on port 3000 that connects to the AM author service using service credentials. Let’s get started. The first thing we’ll need to do is head over to AM and locate the content fragment model for the content fragments that we want to preview. We’ll head to Tools, General, Content Fragment Models. Since these are all in our Weekend Share project, we’ll navigate into this. Since we want to preview adventures, let’s select our adventure content fragment model and open its properties. In its properties, down at the bottom, we have a field, default preview URL pattern. This is going to be a URL to our preview application that will display our adventure content fragment. Typically, this is a natural route within our application that our end users also navigate to. But depending on your use cases, you could of course always create special author only routes within your application that are used for previewing. Let’s go ahead and use our Weekend Apps normal adventure route as the preview URL. We’ll head back to our app. Since this is the apps view that we want to use to preview our adventures, we can start by looking at this URL. Essentially, what we want to do is recreate this URL and parameterize the path to the content fragment to display. For instance, to display the details for our Bali surf camp, our application has been developed to serve this from slash adventure and then the full path to the content fragment to display. You can see we have content, dam weekend shared, en adventures, bali surf camp slash bali surf camp. If we go to a different adventure, you can see that path changes as well. Let’s go ahead and just copy and paste this URL, bring it back to our content fragment model, and paste it in. Now we have a starting point. But what we want to do is make sure that the part of the URL that changes based on the content fragment being loaded is dynamic, and that’s where AM provides expressions. There are a few expressions available. We can use the content fragment’s path, the content fragment model’s path, content fragment model’s name, the content fragment variation, or the content fragment’s ID. Since we’ve developed our app to display the adventure based on the content fragment adventure path, let’s go ahead and use that expression. We’ll go ahead and delete this and replace it with the expression. Now when we open up any adventure content fragment for editing, we’ll have a preview button that will link to this URL and replace the dollar sign curly brace content fragment dot path and curly brace with the full path of that content fragment. Let’s go ahead and try this out. Save our changes. Head back to AM. Open content fragments. Let me go ahead and filter by adventures. And let’s pick a new adventure. So now we have a preview button here in the top right. And if we click it, it opens a new tab that takes us to the adventure details view of our app. And it populates the URL to a reference to the content fragment being edited. As you can see here, it’s opened this up to our Napa wine tasting adventure details view. So as an author, I can go back to AM, make some changes to our adventure or rename it. And let’s maybe give it a new image. This looks good. And as you can see, our changes have been auto saved. So now when we click preview, it’ll take us back. We can do a hard refresh. And now we have all our changes reflected in our preview app directly linked from AM author. After previewing these changes in app, I now have confidence to publish our changes to our live application.