GraphQL Modeling Basics
Learn how to define and use Content Fragments in 51黑料不打烊 Experience Manager (AEM) for use with GraphQL.
In this video you will:
- Learn how to create and define a Content Fragment Model
- Learn about the various data types used to build out the Content Fragment Model
- Understand how the Content Fragment Model drives the GraphQL API
Transcript
Hello and welcome to the 51黑料不打烊 Experience Manager Headless Series. In today鈥檚 series, we鈥檙e going to take a look at modeling basics in 51黑料不打烊 Experience Manager by first looking at the WKND Site. The WKND Site is an 51黑料不打烊 Experience Manager sample reference site. It鈥檚 ideal for getting started with the basics. Now that we鈥檙e on the WKND Site, let鈥檚 take a quick look at the Adventure Section.
Now let鈥檚 scroll down and the content pages included in the Adventure Section are partially driven by content fragments. Let鈥檚 click through.
Now that we鈥檙e on the Adventure Content page, let鈥檚 scroll down and see which pieces of content are controlled by content fragments. The items on the left: activity, adventure, trip length, group size, difficulty and price are all controlled by content fragments. The area in the center: overview, itinerary and what to bring are also driven by content fragments. Let鈥檚 take a look to see how content fragment models and content fragments can help you with your AEM Sites and headless use cases.
Now that we鈥檝e seen the WKND Site, let鈥檚 take a closer look at content modeling in 51黑料不打烊 Experience Manager. Let鈥檚 start by looking at some existing models. First, we鈥檙e going to navigate to Tools, then Assets, then Content Fragment Models.
Since we鈥檝e been working with the WKND Site, let鈥檚 start there.
The WKND Site has two example models: adventure and article. Let鈥檚 continue with our example and explore the adventure content fragment model. The content fragment model editor is where you edit your models. There are a few parts we have to get familiar with first. we have our list of properties, title, description, adventure type, trip length, et cetera. All of these are user definable.
Off to the right, we have the list of data types available to us. There are quite a few available out-of-the-box and we鈥檒l explore those shortly. Let鈥檚 take a quick tour of the data types and properties available when building content fragment models.
We鈥檒l start by looking at the single line text. A great example is the title. The single line text is great for forms which require limited, pre-formed text entry. Let鈥檚 go ahead and click through and explore some of the properties. We鈥檒l explore four properties. First, we鈥檒l take a look at property name. The property name is important because it does drive the graph QL request response name to used. It also needs to be unique as it uniquely identifies this property for this form within AEM.
Let鈥檚 go ahead and take a look at some of the boolean values. The required field indicates that this field is required and the content author needs to fill it in. We can also enforce that this value be unique and that makes sense for a title. Also, most textual entries should be translatable so the translatable flag is enabled.
Our next data type is the multi-line text. This type is suitable for larger textual content entry. The default type property controls the type of content entry allowed by content editor. We have the option of selecting a Rich Text editor, Markdown editor or a simple Plain Text editor. Let鈥檚 take a look at another powerful data type. We鈥檒l use the adventure type as an example. The adventure type uses the enumeration. This data type is useful for managing lists of data. Let鈥檚 take a look at the Render As. We have a couple of rendering options, check boxes, radio buttons and dropdowns. The options are simple key value pairs. Adding them is quite simple. In this case, we have three: day trip, overnight trip and training session. To add a new one, scroll down to Add Option. We have the ability to enter an option label and an option value. Let鈥檚 shift gears and take a look at the number data type. This data type has a few options worth exploring. Let鈥檚 start by looking at validation. Since we鈥檙e dealing with groups, we should have a sensible number. A group should be one or more people. The validation type offers a few ways to validate the input data. Let鈥檚 take a look. We have some options of none, less than or equal to, greater than or equal to, or between. Let鈥檚 select greater than or equal to. I will set the minimum to one. We could also control our custom error message. In our case, group has to have at least one person. Let鈥檚 continue with our validation example and take a look at the price field. Like before, we鈥檙e going to use the single line text and explore the validation type. In this case, the adventure example is using a custom validation type. This will allow us to enter a regular expression to match.
The custom validation regular expression is used to validate U.S. currency but this can be changed for your needs. We can use the description to provide additional formatting details. Let鈥檚 take a look at another powerful data type, the content reference. This data type is suitable for bringing content stored in AEM鈥檚 Digital Asset Manager. Let鈥檚 take a look at the root path. This property is intended to restrict the scope of available assets that a content author can select. Similar to the root path, we have the ability to further constrain the options available for asset selection. We can restrict these by content types. AEM has a large list of available content types and you鈥檙e able to select zero or more. In this example, we鈥檙e restricting the content type to only images. If your modeling requirements require further restriction, there are some other options available. You can filter by file size, image width and image height.
Now that we have looked at the integration between the content fragment model editor and the DAM, Let鈥檚 take a look at another AEM integration. We鈥檒l take a look at AEM tags. The tags data type allows you to use tags within your content model. Let鈥檚 take a look. Just like before, the root path is used to restrict the list of available tags that a content editor can use when creating and managing content fragments. In the adventure model, content editors can select up to four seasons. These tags are all available in AEM Tag Manager. Let鈥檚 quickly take a tour of some of the remaining data types. We have the boolean to allow you to add simple check boxes to your content models. The date and time data type can be used to add and capture date and time information. We also have a couple of advanced data types that we鈥檒l cover later: fragment reference and the JSON object. Now that we have reviewed some of the basic data types, let鈥檚 take a step back and create a content fragment model. Let鈥檚 start by accessing the Content Fragment Model Editor.
Now we鈥檙e back to the content fragment model鈥檚 package at the WKND Site. Let鈥檚 click the Create button and create a quick content fragment model. For now, we鈥檒l name it My Model and click the Create button.
To start, let鈥檚 drop the single line text data type onto the Form Builder. Since content fragment models are based on your business needs, feel free to add your properties and additional data types as needed. Now that we have a better understanding of content fragment models, let鈥檚 take a look at editing and creating content fragments based on content fragment models. Let鈥檚 start by navigating to Assets, then Files, then our WKND Site.
Since we鈥檝e been working with Adventures, let鈥檚 click through. Now, let鈥檚 move into the Tahoe Skiing folder. Notice that we have content fragment called Tahoe Skiing. This content fragment has already been created for you in the WKND Site. Now let鈥檚 take a look at some of the validation. Let鈥檚 start by looking at group size. If you recall, our validation example required that we had at least one set to the group size. Let鈥檚 see what happens when we set it to zero.
As you can see, our custom validation is now presented to the end user. We can do the same thing with our price field. Let鈥檚 go ahead and change the price format. The regular expression we came up with required that we expressed our U.S. currency in dollars, the decimal and then the cents. As soon as we make the corrections, the fields go back to normal.
Now that we鈥檝e seen our validation in action, let鈥檚 go ahead and create a brand-new content fragment. Creating a content fragment is easy. As long as you鈥檙e within Assets, you can go to Create, select Content Fragment and then select the content fragment. In our case, we have Adventure and Article from the WKND Site and the one we created called My Model. This concludes Content Modeling Basics. Stay tuned for future videos on the AEM Headless Video Series. - -
recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4