Join us live as we unveil the all new Hygraph Studio!

Hygraph
Docs

1.3 Build your content models

#Overview

Before we dive into content model creation, let's differentiate between the models we create and system models.

We can create regular models to determine the structure of our content. We can create, name, edit and delete them. We can add fields to them, which will house our content.

Every Hygraph project comes with two system models: Asset & Query. The Asset model will contain our e-commerce images, and the Query model will include a remote source that we will use to fetch remote data into our project.

Similarly to our schema containing system models, our models have system fields. However, while you cannot modify system fields, you can edit system models - by adding fields to them.

Let's look into the Asset model before creating regular models in our project.

#Asset Model

Assets is a system model that is available in all Hygraph projects. It works out of the box, but we can edit it to contain metadata that our front end can use. We want our product images to have Alt Text and a caption, so let's add that to our model.

We'll open the Asset model in our schema by clicking on it on the sidebar, and we'll add a Single line text field to it using the following information:

TabFieldInput
SettingsDisplay nameAlt text
SettingsAPI IDaltText
SettingsDescriptionAdd alternative text for the image here
SettingsLocalize fieldSelect checkbox

We'll click Add to save.

We'll repeat this process, again adding a Single line text field, this time for our caption:

TabFieldInput
SettingsDisplay nameCaption
SettingsAPI IDcaption
SettingsDescriptionAdd image caption here
SettingsLocalize fieldSelect checkbox

We'll click Add to save.

Your Asset model should look like this:

Your Asset modelYour Asset model

Would you like to know more?

Here's a video on adding alt text data to a Hygraph Asset:

#Creating content models

We sketched our content model in the previous lesson and now know what we want it to look like. It's time to get to work and create those models.

We will start by creating the basic content models and adding more complex things during the following lessons.

#Product

Our Product model will hold the information for product listings on our e-commerce. Let's create a model by clicking on +Add next to Models in our Schema and filling in this information:

FieldInput
Display NameProduct
API IDProduct
Plural API IDProducts
DescriptionTutorial project Product model

We'll click Add Model to save.

We've just created our first model, but it's empty. Let's add some fields to it.

We want our product listings to have a title, so we'll add a Single line text field by selecting it from the right sidebar. We'll use the following information:

TabFieldInput
SettingsDisplay nameProduct name
SettingsAPI IDThis field is autocompleted when you type in a display name. Leave it as it is.
SettingsUse as title fieldSelect checkbox
SettingsLocalize fieldSelect checkbox
ValidationsMake field requiredSelect checkbox
ValidationsSet field as uniqueSelect checkbox

We can now save the field. It's now saved into our Product model with all the characteristics that we selected for it.

Next, we'll add a Slug field, which you'll find in the String section of the right sidebar. We'll use the following information:

TabFieldInput
SettingsDisplay nameProduct Slug
SettingsLowercaseLeave this checkbox selected
ValidationsMake field requiredSelect checkbox. This ensures that all our product listings contain a slug.
ValidationsSet field as uniqueSelect checkbox, and then select Slug from the dropdown, which will autofill the field next to it with a regular expression.
ValidationsMatch a specific patternSelect checkbox
ValidationsCustom error message"Input value does not match the expected format."

We'll click Add to save the field.

We want our product listings to contain images, so let's add an Asset picker field from the right sidebar. We'll use the following information:

TabFieldInput
SettingsDisplay nameProduct image
SettingsAllow multiple assetsSelect checkbox. This will let us add more than one product image per listing.

We'll click Add to save the field.

We will also add a Rich Text field, which we can later use for product descriptions. You'll find it in the Text section of the right sidebar. We'll use the following information:

TabFieldInput
SettingsDisplay nameProduct description
SettingsAPI IDThis field is autocompleted when you type in a display name. Leave it as it is.
SettingsEnable embeddingSelect checkbox and use the dropdown to select the Asset and Product models. Doing this ensures we can use content from the three models in our embeds later.
SettingsLocalize fieldSelect checkbox

We'll click Add to save the field in our model.

Finally, we'll add a Float field for the product price. We'll use the following information:

TabFieldInput
SettingsDisplay nameProduct price
SettingsAPI IDThis field is autocompleted when you type in a display name. Leave it as it is.

We'll click Add to save the field in our model. The resulting Product model should look like this:

Your Product model so farYour Product model so far

We still have some work to do on this model, but we must create other things first, so we'll come back to this later.

#Product category

We will create a Product category model so we can then relate our products to different categories later on. We'll repeat steps we followed for the Product model, using this information:

Product category model detailsProduct category model details

FieldInput
Display NameProduct category
API IDProductCategory
Plural API IDProductCategories
DescriptionSelect a product category

We'll click Add Model to save. Now, it's time to add fields to this model.

Let's start by adding a Single line text field. We'll use the following information:

TabFieldInput
SettingsDisplay nameCategory name
SettingsUse as title fieldSelect checkbox
SettingsLocalize fieldSelect checkbox
ValidationsMake field requiredSelect checkbox
ValidationsSet field as uniqueSelect checkbox

We'll click Add to save the field in our model.

Next, we'll add a Slug field. We'll use the following information:

TabFieldInput
SettingsDisplay nameSlug
SettingsLowercaseLeave this checkbox selected
ValidationsMake field requiredSelect checkbox. This ensures that all our product listings contain a slug.
ValidationsSet field as uniqueSelect checkbox, and then select Slug from the dropdown, which will autofill the field next to it with a regular expression.
ValidationsMatch a specific patternSelect checkbox
ValidationsCustom error message"Input value does not match the expected format."

We'll click Add to save the field.

Let's also add a Rich text field. This will be our optional description field. We'll use the following information:

TabFieldInput
SettingsDisplay nameDescription
SettingsLocalize fieldSelect checkbox

We'll click Add to save the field in our model. The resulting Product category model should look like this:

Your Product category model so farYour Product category model so far

There is one more thing we need to do here. Schema building is not necessarily a linear task, because schema elements are sometimes interconnected. We want to have our product descriptions to also allow embedding from this model, but since we created the Product model first, this model was not available to select.

Now that we have a Product category model, we'll go into the Product model again, edit the Rich text field we added earlier as "Product description", and select the Product category model from the dropdown. This will add it to the ones we initially selected.

Product category in Rich Text embedsProduct category in Rich Text embeds

#Blog post

We will create a Blog Post model so we can later create articles about products we want to promote. We'll use the following information to create the model:

Add model screenAdd model screen

FieldInput
Display NameBlog Post
API IDBlogPost
Plural API IDBlogPosts
DescriptionArticles to promote our products

We'll click Add Model to save. Our Blog Post model will contain a title, a slug, and a body.

Let's start by adding a Single line text field. We'll use the following information to create it:

TabFieldInput
SettingsDisplay nameTitle
SettingsUse as title fieldSelect checkbox
SettingsLocalize fieldSelect checkbox
ValidationsMake field requiredSelect checkbox
ValidationsSet field as uniqueSelect checkbox

We can now save the field.

Next, we'll add a Slug field. We'll use the following information to create it:

TabFieldInput
SettingsDisplay nameSlug
SettingsGenerate slug from templateSelect checkbox
SettingsSlug template{title}
SettingsLowercaseSelect checkbox
ValidationsMatch a specific patterSelect checkbox and select Slug from the dropdown. Leave the regex by default as is.
ValidationsCustom error messageInput value does not match the expected format.

We can now save the field.

Let's also add a Rich text field for our blog posts body. Use the following information to create it:

TabFieldInput
SettingsDisplay nameBody
SettingsLocalize fieldSelect checkbox
SettingsEnable embeddingSelect checkbox and use the dropdown menu to select the Blog Post, Product, and Product category models.

We'll learn more about the Hygraph Rich Text editor and embeds later.

We can now save the field. The result should look like this:

Blog post model fieldsBlog post model fields

#Seller information

We will create a Seller Information model, which we will later use to add our seller information to other models through relations. We'll use the following information to create the model:

Seller information model detailsSeller information model details

FieldInput
Display NameSeller information
API IDSellerInformation
Plural API IDSellerInformations

We'll click Add Model to save. Our Seller information model will contain a business name, a slug, a business logo, and a business description.

Let's start by adding a Single line text field. We'll use the following information:

TabFieldInput
SettingsDisplay nameBusiness name
SettingsUse as title fieldSelect checkbox
SettingsLocalize fieldSelect checkbox
ValidationsMake field requiredSelect checkbox

We can now save the field.

Next, we'll add a Slug field. We'll use the following information to create it:

TabFieldInput
SettingsDisplay nameSlug
SettingsLowercaseLeave this checkbox selected
ValidationsMake field requiredSelect checkbox
ValidationsSet field as uniqueSelect checkbox
ValidationsMatch a specific patternSelect checkbox and select Slug from the dropdown. Leave the regex by default as is.
ValidationsCustom error messageInput value does not match the expected format.

We can now save the field.

We want our seller information to display our business logo, so we'll add an Asset picker field. We'll use the following information:

TabFieldInput
SettingsDisplay nameBusiness logo

We'll click Add to save the field.

Finally, we want to add some information about us here, so we will also add a Rich Text field. We'll use the following information to create it:

TabFieldInput
SettingsDisplay nameBusiness description
SettingsAPI IDThis field is autocompleted when you type in a display name. Leave it as it is.
SettingsLocalize fieldSelect checkbox

We can now save the field.

#Landing page

The last model we'll add is our Landing page, which will contain a lot of information coming from other models. This model will allow us to create pages such as our homepage and others.

Let's create the model using this information:

FieldInput
Display NameLanding page
API IDLandingPage
Plural API IDLandingPages

We'll click Add Model to save.

Now, we need to add fields to the model. We'll start by adding a Single line text field. We'll use the following information:

TabFieldInput
SettingsDisplay nameLanding page title
SettingsUse as title fieldSelect checkbox
SettingsLocalize fieldSelect checkbox

We can now save the field.

Next, we'll add a Slug field. We'll use the following information to create it:

TabFieldInput
SettingsDisplay name“Link”
SettingsAPI IDThis field is autocompleted when you type in a display name. Leave it as it is.
SettingsGenerate slug from templateSelect checkbox
SettingsSlug template{landingPageTitle}
SettingsLowercaseLeave this checkbox selected
ValidationsSet field as uniqueSelect checkbox
ValidationsMatch a specific patternSelect checkbox and select Custom from the dropdown. We'll type in the following regex:
^[a-z0-9\/]+(?:[-\/][a-z0-9]+)*$
ValidationsCustom error messageInput value does not match the expected format.

We can now save the field.

This is all we can add to this model at this point. We'll revisit it in the References lesson.

Our project includes the Navigation model from the start. While we will only cover the navigation links creation in the tutorial, let's see the contents of this model at this point:

  • Nav ID: This is a slug field that will serve as our navigation identifier.

As you can imagine, this model is unfinished, as it still needs to provide a way to add the navigation links. We will be modifying it to add this option in a later lesson.