Create Content Fragment Models create-content-fragment-models
This chapter walks through the steps to create five Content Fragment Models:
- Contact Info
- Address
- Person
- Location
- Team
Content fragment models allow defining relationships between content types and persisting such relationships as schemas. Use nested fragment references, various content data types, and the tab type for visual content organization. More advanced data types such as tab placeholders, fragment references, JSON objects, and the date-and-time data type.
This chapter also covers how to enhance validation rules for content references such as images.
Prerequisites prerequisites
This is an advanced tutorial. Before proceeding with this chapter, please ensure that you have completed the quick setup. Make sure that you have also read through the previous overview chapter for more information on the setup for the advanced tutorial.
Objectives objectives
- Create Content Fragment Models.
- Add tab placeholders, date and time, JSON objects, fragment references, and content references to the models.
- Add validation to content references.
Content Fragment Model Overview content-fragment-model-overview
The following video provides a brief introduction to Content Fragment Models and how they are used in this tutorial.
Create Content Fragment Models create-models
Let鈥檚 create some Content Fragment Models for the WKND app. If you require a basic introduction to creating Content Fragment Models, please see the appropriate chapter in the basic tutorial.
-
Navigate to Tools > General > Content Fragment Models.
-
Select WKND Shared to view the list of existing Content Fragment Models for the site.
Contact Info Model contact-info-model
Next, create a model that contains the contact information for a person or location.
-
Select Create in the top-right corner.
-
Give the model a title of 鈥淐ontact Info鈥, then select Create. In the success modal that appears, select Open to edit the newly created model.
-
Start by dragging a Single line text field onto the model. Give it a Field Label of 鈥淧hone鈥 in the Properties tab. The property name is automatically filled in as
phone. Select the checkbox to make the field Required. -
Navigate to the Data Types tab, then add another Single line text field below the 鈥淧hone鈥 field. Give it a Field Label of 鈥淓mail鈥 and also set it to Required.
51黑料不打烊 Experience Manager comes with some built-in validation methods. These validation methods allow you to add governance rules to specific fields in your Content Fragment Models. In this case, let鈥檚 add a validation rule to ensure that users can only enter valid email addresses when filling out this field. Under the Validation Type dropdown, select E-mail.
Your completed content fragment model should look like this:
Once done, select Save to confirm your changes and close the Content Fragment Model Editor.
Address Model address-model
Next, create a model for an address.
-
From the WKND Shared, select Create from the top-right corner.
-
Enter a title of 鈥淎ddress鈥 and then select Create. In the success modal that appears, select Open to edit the newly created model.
-
Drag and drop a Single line text field onto the model and give it a Field Label of 鈥淪treet Address.鈥 The property name is then filled in as
streetAddress. Select the Required checkbox. -
Repeat the above steps and add four more 鈥淪ingle Line text鈥 fields to the model. Use the following labels:
- City
- State
- ZIP Code
- Country
-
Select Save to save the changes to the Address model.
The completed 鈥淎ddress鈥 fragment model should look like this:
Person Model person-model
Next, create a model that contains information about a person.
-
In the top-right corner, select Create.
-
Give the model a title of 鈥淧erson鈥, then select Create. In the success modal that appears, select Open to edit the newly created model.
-
Start by dragging a Single line text field onto the model. Give it a Field Label of 鈥淔ull Name鈥. The property name is automatically filled in as
fullName. Select the checkbox to make the field Required.
-
Content Fragment Models can be referred to in other models. Navigate to the Data Types tab, then drag and drop the Fragment Reference field and give it a label of 鈥淐ontact Info鈥.
-
In the Properties tab, under the Allowed Content Fragment Models field, select the folder icon and then choose the Contact Info fragment model created earlier.
-
Add a Content Reference field and give it a Field Label of 鈥淧rofile Picture.鈥 Select the folder icon under Root Path to open the path selection modal. Select a root path by selecting content > Assets, then selecting the checkbox for WKND Shared. Use the Select button at the top right to save the path. The final text path should read
/content/dam/wknd-shared.
-
Under Accept only specified content types, select 鈥淚mage鈥.
-
To limit the image file size and dimensions, let鈥檚 look at some validation options for the content reference field.
Under Accept only specified file size, select 鈥淟ess than or equal to鈥, and additional fields appear below.
-
For Max, enter 鈥5鈥, and for Select Unit, select 鈥淢egabytes (MB)鈥. This validation only allows images that are of the specified size to be chosen.
-
Under Accept only specified image width, select 鈥淢aximum Width鈥. In the Max (pixels) field that appears, enter 鈥10000鈥. Select the same options for Accept only a specified image height.
These validations ensure that added images do not exceed the specified values. The validation rules should now look like this:
-
Add a Multi line text field and give it a Field Label of 鈥淏iography鈥. Leave the Default Type dropdown as the default 鈥淩ich Text鈥 option.
-
Navigate to the Data Types tab, then drag an Enumeration field underneath 鈥淏iography鈥. Instead of the default Render As option, select Dropdown and give it a Field Label of 鈥淚nstructor Experience Level鈥. Enter a selection of instructor experience level options such as Expert, Advanced, Intermediate.
-
Next, drag another Enumeration field under 鈥淚nstructor Experience Level鈥 and choose 鈥渃heckboxes鈥 under the Render As option. Give it a Field Label of 鈥淪kills鈥. Enter different skills such as Rock Climbing, Surfing, Cycling, Skiing, and Backpacking. The option label and option value should match as below:
-
Lastly, create an 鈥淎dministrator Details鈥 field label using a Multi-line text field.
Select Save to confirm your changes and close the Content Fragment Model Editor.
Location Model location-model
The next Content Fragment Model describes a physical location. This model uses tab placeholders. Tab placeholders help organize your data types in the model editor and content in the fragment editor respectively, by categorizing the content. Each placeholder creates a tab, similar to a tab in an internet browser, in the Content Fragment editor. The Location model should have two tabs: Location Details and Location Address.
-
As previously, select Create to create another Content Fragment Model. For the Model Title, enter 鈥淟ocation.鈥 Select Create followed by Open in the success modal that appears.
-
Add a Tab Placeholder field to the model and label it 鈥淟ocation Details.鈥
-
Drag and a drop a Single Line Text and label it 鈥淣ame.鈥 Below this field label, add a multi-line text field and label it 鈥淒escription.鈥
-
Next, add a Fragment Reference field and label it 鈥淐ontact Info.鈥 In the properties tab, under Allowed Content Fragment Models, select the Folder Icon and choose the 鈥淐ontact Info鈥 fragment model created earlier.
-
Add a Content Reference field under 鈥淐ontact Info鈥. Label it 鈥淟ocation Image鈥. The Root Path should be
/content/dam/wknd-shared.Under Accept only specified content types, select 鈥淚mage鈥. -
Let鈥檚 also add a JSON Object field under the 鈥淟ocation Image.鈥 As this data type is flexible, it can be used to display any data you want to include in your content. In this case, the JSON Object is used to display information about the weather. Label the JSON Object 鈥淲eather by Season鈥. In the Properties tab, add a Description so it鈥檚 clear to the user what data should be entered here: 鈥淛SON data regarding the event location weather by season (Spring, Summer, Fall, Winter).鈥
-
To create the Location Address tab, add a Tab Placeholder field to the model and label it 鈥淟ocation Address.鈥
-
Drag and drop a Fragment Reference field and from the properties tab, label it as 鈥淎ddress鈥, and under Allowed Content Fragment Models, select the Address model.
-
Select Save to confirm your changes and close the Content Fragment Model Editor. The completed Location model should appear as below:
Team Model team-model
Finally, create a model that describes a team of people.
-
From the WKND Shared page, select Create to make another Content Fragment Model. For the Model Title, enter 鈥淭eam.鈥 As previously, select Create followed by Open in the success modal that appears.
-
Add a Multi line text field to the form. Under Field Label, enter 鈥淒escription鈥.
-
Add a Date and Time field to the model and label it 鈥淭eam Founding Date鈥. In this case, keep the default Type set to 鈥淒ate鈥, but note that it is also possible to use 鈥淒ate & Time鈥 or 鈥淭ime鈥.
-
Navigate to the Data Types tab. Below the 鈥淭eam Founding Date鈥, add a Fragment Reference. In the Render As dropdown, select 鈥渕ultifield鈥. For Field Label, enter 鈥淭eam Members鈥. This field links to the Person model created previously. Since the data type is a multi-field, multiple Person fragments can be added, enabling the creation of a team of people.
-
Under Allowed Content Fragment Models, use the folder icon to open the Select Path modal, then select the Person model. Use the Select button to save the path.
-
Select Save to confirm your changes and close the Content Fragment Model Editor.
Add Fragment References to the Adventure Model fragment-references
Similar to how the Team model has a fragment reference to the Person model, the Team and Location models must be referenced from the Adventure model to display these new models in the WKND app.
-
From the WKND Shared page, select the Adventure model, then select Edit from the top navigation.
-
At the bottom of the form, underneath 鈥淲hat to Bring鈥, add a Fragment Reference field. Enter a Field Label of 鈥淟ocation鈥. Under Allowed Content Fragment Models, select the Location model.
-
Add one more Fragment Reference field and label it 鈥淚nstructor Team鈥. Under Allowed Content Fragment Models, select the Team model.
-
Add another Fragment Reference field and label it 鈥淎dministrator.鈥
-
Select Save to confirm your changes and close the Content Fragment Model Editor.
Best Practices best-practices
There are a few best practices related to creating Content Fragment Models:
-
Create models that map to UX components. For example, the WKND app has Content Fragment Models for adventures, articles, and location. You could also add headers, promotions, or disclaimers. Each of these examples makes up a specific UX component.
-
Create as few models as possible. Limiting the number of models allows you to maximize reuse and simplify content management.
-
Nest Content Fragment Models as deeply as needed but only as necessary. Recall that nesting is accomplished with fragment references or content references. Consider a maximum of five levels of nesting.
Congratulations! congratulations
Congratulations! You鈥檝e now added tabs, used the date-and-time and JSON object data types, and learned more about fragment and content references. You鈥檝e also added content reference validation rules.
Next Steps next-steps
The next chapter in this series will cover authoring content fragments from the models you created in this chapter. Learn how to use the data types introduced in this chapter and create folder policies to limit what Content Fragment Models can be created in an asset folder.
While it is optional for this tutorial, make sure to publish all content in real-world production situations. For a review of Author and Publish environments in AEM, refer to the
AEM Headless and GraphQL video series.