Advanced Modeling for GraphQL

Transcript

Hello and welcome to the Adobe Experience Manager headless video series. In this video, we’ll take a look at advanced content fragment modeling. Let’s take a look at the learning objectives for this tutorial. We’ll start by looking at nested models. Modeling data in the real world can be complex. So, starting with basic building blocks makes a lot of sense. Once you have a handful of building blocks in place, you can establish relationships between models. There are many benefits to nesting models. First, you can simplify your content modeling. Second, you can reduce overall maintenance costs, and third, you can reuse content and your models. Some of the key concepts we’ll review are, the fragment reference data type, deep linking and embedding JSON in your content models. Before getting started, let’s ensure that content fragment models are enabled for our project. This is done by navigating to tools, then configuration browser.

We can either configure this globally or at the project level. Since we’ll be working with the weekend site in this tutorial, let’s check its configuration. There’s the content private models checkbox, is already selected. Now that we’ve confirmed that content private models are enabled to our project, let’s create a new model by navigating to tools, then assets and then content fragment models. Since we’re working with the weekend site, let’s click through. Two models already provided for us in venture and article. Let’s create a third called contributor. Later in this tutorial, we’ll use this model to create a more complex model. First, let’s start by adding the single line text. Our first property will represent the contributor’s full name. It’s important to know that the property name will be used in subsequent GraphQL queries. Let’s also make this required.

Now let’s add a second data type. We’ll use the multiline text, and we’ll set this to the contributor’s biography.

We’ll add a third data type to represent the contributors profile picture. We’ll use the content reference.

We’ll name this field profile picture. Next, we’ll limit the assets that can be selected by navigating to route path and only allowing the selection of contributors within the weekend site. Let’s apply one more restriction and only allow images to be selected. We’ll add one more data type, we’ll use an enumeration to represent the contributors occupation. We’ll add three options to start. Artist, influencer and photographer. Now let’s click save.

At this point we can say it has three content fragment models, article, adventure and contributor. Now that we have a few content fragment models to work with, let’s start building a complex data model based on our adventure content model and our newly created contributor model. We’ll begin by editing the existing adventure model.

Let’s scroll down and add a fragment reference data type.

The fragment data reference type is critical in building complex models. It allows us to specify one or more content fragment models for use within an existing model. In our example, we’ll use the fragment reference type to represent a list of one or more contributors. We’ll start by changing the render as property to multi-field. This will allow a content editor to select one or more contributors as part of the overall complex data model. Next, we’ll set the field label to contributors.

Let’s look at the allowed content fragment models. This will allow us to define the list of content fragment models that are available for selection. In our case, we’re only interested in contributors. Let’s make this easier for content editors to find contributors within assets. We’ll do this by specifying a route path that points at the contributors root directory.

Lastly, let’s ensure that the allow fragment creation checkbox is enabled. This feature allows content editors while editing an adventure content fragment to also create new contributors in line. Now that we have a nested content fragment model to work with, let’s head over to assets and create a contributor content fragment.

Next, we’ll create a content fragment based on our content fragment model.

We’ll name our content fragment Justin Barr.

Now we’ll quickly fill in the fields and even select an image for Justin Barr’s profile picture.

Before moving on, let’s go ahead and recap what we’ve done so far. We have two content fragment models. The existing adventure content fragment model and the contributor model. We’ve also linked it to with a fragment reference data type. We’ve also just created a content fragment for our contributor. Now let’s head on over to the adventure section in assets. We’ll open an existing content fragment and make use of our new contributor content fragment.

Let’s go ahead and navigate to the contributor section at the bottom. Now we have the ability of adding one or more content contributors to this content fragment, let’s add said Justin Barr.

We also have the option of selecting the plus sign and selecting new content fragment. This is made possible by the allow fragment creation checkbox we checked earlier when updating our adventure model. This feature is useful for creating a new content fragment for contributor that does not already exist in assets. Fragment references are just one way to link data together. Let’s take a look at deep-linking content fragments within the Rich Text Editor. We’ll continue by revisiting our adventure content fragment model. Let’s start by getting the multiline text data type.

We’ll call it related articles.

To allow deep linking, we need to make sure we select the allow fragment references. Then we need to define which content fragments are allowed to be deep linked, let’s select article.

Before moving on, let’s add one more field to make our data bottle a bit more complex and flexible. We’ll use the JSON object. We’ll simply drop this data type on the form and call it additional data. With our content models in place, let’s navigate to content fragments.

Now, let’s revisit our Tahoe Skiing example.

We know have two fields available to us, related articles and additional data. For related articles, let’s put in some text and a content fragment link. Now let’s create a deep link within this Rich Text Editor and we’ll navigate to our assets and select an article to deep link.

Next, let’s take a quick look at additional data. This can be any arbitrary JSON payload based on your business requirements. It’s a great way to supplement data in your data model. Let’s create a very simple JSON object.

Now that we have our JSON and our content fragment link, let’s go ahead and take a look at another feature. We’ll take a look at the side panel and the JSON preview. JSON preview is a great way to get started with your headless use cases. With this tool, you can visualize the JSON data for your content fragments. In today’s tutorial, we created a complex content private model based on smaller content fragment models. Let’s look at some of the key JSON properties we covered today. As you can see, there’s quite a bit of JSON here, as the response is fully hydrated, it contains all the data you did to render this in your headless use case. Let’s scroll down to our contributors property and take a look at that first nested content reference.

As you can see, since our contributors was defined as a multi-field, we have an array in our JSON. And we have our single JSON object to represent Justin Barr. We also can see the fields that we had created, full name, biography, profile picture and occupation.

Another thing to note is the different types of rendering options available. Let’s take a look at biography. We have HTML, markdown and plain text. There’s also a JSON view of your markup if you would prefer to use a regulus editor in your application. Let’s take a look at the additional data that we created with the JSON object data type. As you can see here, we have additional data property with our object where we had promotion code equal to Tahoe. Again, this is a great way to model complex data structures that may not be suited by some of the data types within Adobe Experience Manager.

We also explored deep linking within the Rich Text Editor. Let’s take a look at related articles. Related articles contains the four rendering types, HTML, markdown, plain text and JSON. In the case of HTML, our content fragment is linked using an anchor. We have the similar construct for markdown and for JSON, we can see we have a special note type set to reference with a link to our content fragment.

Well, we hope you enjoyed the quick tour of advanced content modeling. Stay tuned for future videos in this series. - -