Content Types

Content type lets you define the structure or blueprint of a page or a section of your web or mobile property.

For instance, if you wish to post news articles on your site, you will have to first create a content type by adding title, date, body, author, and location fields to it. You (or content managers) can then add data to these fields to the actual news article.

1_mockup-img-3.png

So, here, the structure of the news article page that you create is a content type, and the actual news article created by entering data in the fields of the content type is called an entry.

The entries created using a content type are similar in nature. So, the News content type will let you create news articles. However, it cannot be used to create a home page, primarily because a home page has a different structure (for example, banner, quick links, testimonials, and so on). For creating a home page, you will have to create a different content type. Accordingly, you need to create different content types for all different components of your website, such as Home, Contact Us, Products, and About Us.

In essence, creating a content type is like creating a mold or cast that lets you create several objects (entries) of the same nature and pattern.

Content types, however, should be created after you model your content appropriately.

Content Modeling

Creating just the right content type that suits your content needs undoubtedly cannot happen without determining what your content needs are. This is where content modeling comes into play. Content modeling means defining the structure of your content at a granular level. It involves:

  • Analyzing requirement - Determining what kind of content you need
  • Identifying structure - Deciding how it should be structured in Built.io Contentstack
  • Developing content type - Defining the required content type and fields

The process of modeling content in Built.io Contentstack begins as soon as the designs (or even design wireframes) are finalized. Based on the designs, site managers/developers need to identify the structure of content type that needs to be created in Built.io Contentstack. Developers can then start with actually creating the content type by adding relevant fields.  

Since the process of content modeling begins at design stage, any minor (and certainly, major) error made while modeling will be reflected on the actual structure of your web/app page. It is therefore recommended that content modeling should not be skipped, and should be done accurately.

Each section/component of your website or mobile app should have an appropriate content model in place. Content types, and thus the actual content, should then be created accordingly for each component. In the next section, we will understand the process of creating a robust content model, and look at an example of creating one.  

Let’s look at each of the steps briefly.

  1. Analyzing requirement - Determining what kind of content you need
  2. Content modeling begins with this stage. Here, the rough designs or wireframes are shared with the site managers or developers. Content managers can analyze how content will fit in, and whether or not any changes are required in the designs as well as the content plan.

  1. Identifying structure - Deciding how it should be structured in Built.io Contentstack
  2. Based on the finalized designs, developers identify the kind of content type to be created and the fields that will be included within the content type. In this step, fields need to be identified in a way that makes the content type more optimized and reusable.

  1. Developing content type - Defining the required content type and fields
  2. Now that the structure of the content is ready, it’s time to start creating your content type. Creating a content type is a two-step process:

  1. Select the type of content type: You need to select if the content type should be a ‘Webpage’ or a ‘Content Block’. If the required content is a web page (such as home page, about us, and so on), create a Webpage content type. Alternatively, if the required content id for mobile application or for partials of a website (header, footer, navigation, menu), select Content Block.
  2. Then, based on the number of entries you wish to create, select if the content type should be Single or Multiple. The former allows you to create a single entry, while the latter lets you create multiple entries. Learn more about the types of content type.

  3. Add fields: Fields are the building blocks for structured content. Fields give you the flexibility to add various types of data into the database. You can also modify the behaviour of the fields by editing their properties. Learn more about fields and field properties here.


Example of content modeling

We will look at an example to understand content modeling better. Let’s assume that you own a new website, and wish to post new articles to it regularly. We will follow the steps given above to develop a content model for the news article page. 

Step 1. Analyzing requirement 

The news article page should contain a headline, date, location, image, body text, and author’s name. Let’s assume that the structure of the news article that you have in mind is similar to the article given below:

2_real-article-2.png


Step 2. Identify structure

Let’s identify the fields that should be used to build a content type for creating the page shown in the above step.

2_article-mockup-8.png


Step 3. Develop content type 

Since the news article piece is a web page, we will set the content type as Webpage. Also, this content type will be used to create multiple new articles. Hence, the content type should be of Multiple type. 

Then, add all the required fields to the content type. The fields names can be changed by editing their properties. 

  • Title: The 'Title' field will hold the headline of the news article. The headline is mostly short and simple. Probably, a simple textbox will be a great choice.
  • Date: Below the 'Title' field, we’ll need the 'Date' field that will display the current date of the articles. We need to set this date such that when we enter a news article, this field will be auto-populated.
  • Location: Under the 'Date' field, we will add the 'Location' field. This field will display the location where the news article is based on. We will use a single-line textbox field and rename it as location.
  • Body: The body of the news article is the most important part of your content. You need a special field that’ll allow you to enter a rich variety of content, such as text, images, and so on. So, we will use rich-text editor field and rename it as 'Body'.
  • Author: For ‘Author’, the ‘Reference’ field has been used. The 'Reference' field helps you refer to entries of other content type. On the backend side, a new content type called ‘Authors’ is developed (with fields name, image, and designation), and entries for all existing authors have been created. So, in the 'Author' field here, instead of entering all the details manually, you can simply select an entry of the ‘Authors’ content type. Read more about Reference here.

2_article-cms-2.jpg

You can learn more about the fields and their properties in the Fields and Field Properties sections below.

Types – Webpage and Content Block

A content type lets you create the structure of a page or a section of your digital property. However, the structure of a website home page differs from that of a mobile app’s start screen. Similarly, the footer section of a website may be structurally different from a ‘Contact Us’ page.

Hence, Built.io Contentstack offers two basic types of content type (Webpage and Content Block), each helping you cater to different needs of your digital property.

CT2.png

Let’s take a look at these two types in detail.

Webpage

The Webpage content type allows you to create web pages (Home, Contact Us, and so on) for your website. Using the Webpage content type (and by adding relevant fields), you can create entries that can be directly used as web pages. 

The Webpage content type, by default, contains the Title and URL fields. The Title field accepts a user-defined title, while the URL field accepts a relative path of your web page (for example, /home and /projects/new-project). You can then add fields to the content type to build the structure of your content type. 

Content Block

The Content Block content type, on the other hand, allows you to create chunks of data that are not web pages. It is essentially used to create pages of a mobile application as well as partials of a web site, such as header, footer, or menu. 

Unlike the Webpage format, Content Block provides only the Title field by default. You can then add relevant fields of your choice.

Single vs Multiple

Irrespective of the type of content type (Webpage or Content Block) you are creating, you should mark it as either Single or Multiple. ‘Single’ lets you create a single entry using the content type, while ‘Multiple’ lets you create more than one entry of the same structure.

image011.png

Single

You should mark a content type as Single if you want to create one-off pages that have unique content structure. So, for instance, to create a homepage of a website, you will create a 'Webpage' content type, and mark it as 'Single'. This is because a website only has one homepage. Other examples would be: 

  • About Us
  • Contact Us

To create a header of a website, you need to create a Content Block content type, and mark it as ‘Single’. Other examples of Single Content Block content type would be:

  • Footer
  • Navigation menu

Multiple

Marking a content type as Multiple enables you to create multiple entries using the same content type. It can be used to create streams of similar content. So, for instance, if you create a News content type, you can create multiple news entries for your site using the same content type. 

To understand this concept clearly, let’s consider two examples. In a website, the Home, About Us, Career, and other such pages have different structures. Each of these pages are unique, that is, we do not have multiple instances of the Home or the Contact Us pages. Such pages should be made using a content type that is marked as ‘Single’. 

However, if we consider a blog, there are several blog posts of the same structure: header, title, body, and footer. Hence, you will need to create several instances. This can be created by marking the content type as ‘Multiple’.

Fields

After selecting the format and category of a content type, the next step is to add fields. Fields are the building blocks for structured content. The type and order of the fields that you add to a content type decides how the content will be finally presented. For instance, while creating a content type for a news article page, you may add fields such as Title, URL, Date, and Body, as seen in the following screenshot:

All the content that you will be adding to create an entry actually goes into fields.

Fields are of various types, designed to handle the most common content input needs. Each field type determines the type of data it can store. An example of a simple field type is a Number field type, which accepts only numeric characters. Similarly, there are several other types of fields you can use in a content type. We will look at each field type in detail later in this section.

Each field possesses certain properties, such as Display Name, Unique ID, Default Value, Help Text, Mandatory, and so on. These properties are editable, providing flexibility to customize the nature of the field. You can learn more about these properties in the Field Properties section.

In the following section, we'll look at all the fields that that you can use to create a content type.

Title

By default, the Title field is available for all content types created. It accepts single-line text, and does not provide any formatting options or line-breaks. The value entered in this field while creating an entry is taken as the title of the entry.

The Title field possesses certain properties that you can change any time as per your needs. The properties that can be modified are Placeholder Value, Instruction Value, and Help Text. Read more about these properties in the Field Properties section.

URL

The URL field accepts a relative path of your webpage (for example, /home and /projects/new-project). This field comes by default when you create a 'Webpage' content type. You can edit the field properties and set a default pattern for the URLs of the entries of a specific content type. Learn more about how URLs work and how to set a default pattern in the Default URL Pattern section.

Single Line Textbox

The Single Line Textbox field accepts single-line arbitrary text. This field supports only plain text and does not provide any formatting options and line-breaks. This field is often used when the expected input value is some short text, for example, a name or an address line.

This field possesses certain properties that you can change any time as per your needs. The properties can be modified are Display Name, Unique ID, Placeholder Value, Instruction Value, Help Text, Number of Characters, Default Value, and Options. Read more about these properties in the Field Properties section.

Multi Line Textbox

The Multi Line Textbox field accepts multi-line arbitrary text, and does not provide any formatting options. This field can be used to enter a large chunk of data, for example, an address.

This field possesses certain properties that you can change any time as per your needs. The properties can be modified are Display Name, Unique ID, Placeholder Value, Instruction Value, Help Text, Number of Characters, Default Value, and Options. Read more about these properties in the Field Properties section.

Rich Text Editor

The Rich Text Editor field accepts a variety of data type, such as text, images, and videos. It also provides several tools for formatting the content entered in the field without using HTML tags (however, you have the provision to use HTML tags if needed). This editor is essentially a WYSIWYG (What You See Is What You Get) type of editor.

This field possesses certain properties that you can change any time as per your needs. The properties can be modified are Display Name, Unique ID, Placeholder Value, Instruction Value, Help Text, Editor Type, and Options. Read more about these properties in the Field Properties section.

Markdown

The Markdown field accepts text in markdown format. Markdown text is essentially easy-to-read text that is marked with certain tags or formatting instructions. This field also provides a 'Preview' option that lets you preview the formatted HTML text in real time.

This field possesses certain properties that you can change any time as per your needs. The properties can be modified are Display Name, Unique ID, Placeholder Value, Instruction Value, Help Text, and Options. Read more about these properties in the Field Properties section.

Number

The Number input field accepts numeric data. This is basically used to enter any kind of numbers such as phone number or zip code.

This field possesses certain properties that you can change any time as per your needs. The properties can be modified are Display Name, Unique ID, Placeholder Value, Instruction Value, Help Text, Range, Default Value, and Options. Read more about these properties in the Field Properties section.

Boolean

The Boolean input field accepts a true or false value. When added to a content type, it reflects as a checkbox while creating an entry.

This field possesses certain properties that you can change any time as per your needs. The properties can be modified are Display Name, Unique ID, Placeholder Value, Instruction Value, Help Text, and Default Value. Read more about these properties in the Field Properties section.

Date

The Date field accepts date in the ISO format. This option renders a calendar that allows the user to select a date and time. However, the time field can be deactivated using the Hide Time option under its properties.

This field possesses certain properties that you can change any time as per your needs. The properties can be modified are Display Name, Unique ID, Placeholder Value, Instruction Value, Help Text, Default Value, and Options. Read more about these properties in the Field Properties section.

File

The File field accepts files. This option provides you with two options: Browse File and Choose from uploads. The Browse File option lets you upload any file from the local system, while the Choose from uploads option allows you to upload a file from the ones stored under the Assets section.

This field possesses certain properties that you can change any time as per your needs. The properties can be modified are Display Name, Unique ID, Placeholder Value, Instruction Value, Help Text, and Options. Read more about these properties in the Field Properties section.

The Link field accepts a valid static or relative URL and a title. This field possesses two subfields, Title and Link, which allow you to specify a title and a corresponding static or relative URL (relative to the sites root URL), respectively.

This field possesses certain properties that you can change any time as per your needs. The properties can be modified are Display Name, Unique ID, Placeholder Value, Instruction Value, Help Text, Default Value, and Options. Read more about these properties in the Field Properties section.

Reference

The Reference field allows you to create references to entries of other content types. It lets you use entries of other content types as input. Let’s look at an example to understand this better.

Let’s say you are creating news articles, and you wish to add author details (profile image, name, and designation) to each news article. In this case, instead of adding a fields for author, you can add a ‘Reference’ field in your ‘News Article’ content type. This Reference field points to entries of another content type.

fields.png

To do this, you will first create another content type (Content Block) called ‘Authors’, and add ‘Single Line Textbox’ field for name, another Single Line Textbox field for designation, and image field for profile image. Then, create entries for all authors.

Then, in your 'News Article' content type, add a reference field and rename it as ‘Author’, and select the ‘Authors’ content type as reference. Now, whenever content managers create entries for ‘News Article’, they will be able to see the list of all authors under the ‘Author’ field. They can select the required author, and go ahead with filling data in other fields. This field possesses certain properties that you can change any time as per your needs. The properties can be modified are Display Name, Unique ID, Placeholder Value, Instruction Value, Help Text, Options, and Content Type. Read more about these properties in the Field Properties section.

Tutorial Video

Now, let's look at how the Reference field works

video-thumb


Group

This input field allows you to create a group of multiple fields. For example, when creating a banner, you would need a background image, some textbox, and a link to more detailed page. This can be easily made by using the 'Group' field, which includes profile image, textbox, and link fields.

This field possesses certain properties that you can change any time as per your needs. The properties can be modified are Display Name, Unique ID, Placeholder Value, Instruction Value, Help Text, and Options. Read more about these properties in the Field Properties section.

Tutorial Video

Now, let's look at how the Group field works

video-thumb

Field Properties

Fields have properties. These properties define the nature and behavior of the field. Some examples of field properties are Display Name, Unique ID, Default Value, Help Text, and Maximum/Minimum (length of characters). You can edit these properties and customize the behavior of the given field.

To edit the properties of a field, simply click on the field. It opens the Edit Properties window that displays all the editable properties of the field. Let’s look at all available properties in detail.

Display Name

By default, each field has a predefined name such as Single Line Textbox, Date, Boolean, and Group. However, you can change this default name and give it a custom name.

For example, you wish to create a Contact Us page for a website, and you need Name, Email, and Body fields in the form. To achieve this, you need to add a couple of ‘Single Line Textbox’ fields, and a ‘Multi Line Textbox’ to your content type. Now, click on the ‘Single Line Textbox’ field, and in Display Name, change the existing value to Name. You can do the same for the remaining two fields.

Unique ID

A Unique ID is a unique alphanumeric string that is associated with each field. The system identifies each field with its unique ID. By default, the unique ID of each field is the same as the display name of the field. However, you can change the unique ID as per your requirements. It is important to remember that no two fields in a content type should have the same unique ID.

Note:If you change the unique ID after an entry has been saved under a content type, the data for this field will be lost and will have to be entered again.

Placeholder Value

This property gives you the provision to display a simple short hint about the value that needs to be entered in an input field. The placeholder value is seen inside the input area, and disappears once the user starts typing in the field.

For example, if under the Name heading, you wish to have two fields for First and Last name, you can use placeholder values as shown in the following image.

field1.png

Instruction Value

This property allows you to add instructions or more information for the content manager regarding the value that is expected in the given field. The instructional value, once entered, will be visible right below the input field. Let’s say, your content type has a ‘Name’ field, and you want to instruct users that they are required to enter their first as well as last names in the field. For this, you can add something like ‘Enter your full name here.’

Help Text

This property gives you the provision to add additional help text to a field. In order to enable this parameter, you need to enter a description under it. When enabled, a Help text icon (a question mark, ‘?’) appears beside the field name. When the user hovers over this icon, the description appears as a tool tip.

Default Value

This parameter gives you the provision to provide a default value for a field. Once you set a default value, this field will contain the specified value by default whenever you create a new entry. This parameter comes quite in handy when you do not wish to enter a constant data every time across multiple pages.

Consider, for example, you're a news writer assigned to work in a particular location. Now, every time you write an article, you would need to enter a constant data for all your articles under the Location field. This can be a time-consuming and tedious approach. Instead, you can use the Default Value property for the Location field.

It is important to remember that the default value can be changed if required while creating an entry.

Validation (Regex)

The 'Validation' field property helps you define a set of validation options for a given field. In general, this field property is used to perform validation checks (format, length, etc.) on the value entered in the given field by the user. If the user enters a value that does not pass these checks, it will throw an error.

Validation rules can be defined by specifying custom validation regular expressions in the 'Validation' field.

Regex_correct.png

Let’s consider a few examples:

  • Email: If you wish to check if the user has entered a valid email address in the email field, you can specify the following regex code in the 'Validation' field:
    [a-z0-9!#$%&'*+=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?
  • URL: To check whether a URL entered by a user is valid, you can use the following regex code in the 'Validation' field:
    ^(http(?:s)?\:\/\/[a-zA-Z0-9]+(?:(?:\.|\-)[a-zA-Z0-9]+)+(?:\:\d+)?(?:\/[\w\-]+)*(?:\/?|\/\w+\.[a-zA-Z]{2,4}(?:\?[\w]+\=[\w\-]+)?)?(?:\&[\w]+\=[\w\-]+)*)$<br>
  • Date: You can define rules to check whether the date entered by a user is in valid format by using the following regex code. The following code will check if the entered value is in one of the ‘dd/mm/yyyy’, ‘dd-mm-yyyy’, or ‘dd.mm.yyyy’ formats. It will also validate leap years.
    ^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$

Note:The ‘Validation’ field property is available only for single-line and multi-line text box fields.

Learn more about regular expressions here.


Multiple

This property allows you enable a field to accept more than one value. For fields with their Multiple checkboxes selected, you get the provision to add multiple instances of the same field. When a field is marked Multiple, a plus (+) sign appears beside it. Clicking on this sign adds another input area for the field.

Consider for example, if you create a field named Languages and you want the content manager to input the languages they are familiar with. In this scenario, you can use a 'Single Line Textbox' in your content type and mark it Multiple. Now, when the content manager wishes to enter the languages they are familiar with, they can simply click on the plus (+) sign, create as many multiple instances of the field, and start entering values into it.

Mandatory

This property helps you mark a field as Mandatory, which means that the field cannot be left blank when creating an entry. Fields marked as mandatory are represented by an asterisk (*) sign that appear beside the field name. Content managers will not be able to save entries if 'Mandatory' fields are left blank.

Unique

This checkbox prevents the duplication of entered content across entries in a content type. If you set a field as Unique, every time a user enters an already entered value, they will be prompted to change the duplicate value.

Number of Characters

Sometimes, you may want to limit the maximum or minimum number of characters a user can input to a field. For example, you want to create a Create Password field in your website and you want to set a minimum and maximum limit to the cell. This is when Number of Characters field comes into the picture. Using the Minimum and Maximum options, you can set the minimum and maximum character limit of a field, respectively:

Minimum

This option allows you to set the minimum number of characters that can be entered for the field.

Maximum

This option allows you to set the maximum number of characters that can be entered for the field.

Allow images only

This option appears just in the File field, and it will allow you to upload only image file type instead of any file types.

Once you enter the required fields for your content type, and edit properties according to your preference, click on Save and Close. With this, your content type is ready for use.

Default URL Pattern

While a URL can be used for any type of content delivery medium, it's a prerequisite for creating pages for a website.

While creating an entry for a web page, you are required to enter a URL for the entry. You can either input the URL manually or use the Default URL Pattern to let Built.io Contentstack autogenerate the URL. However, before diving deep into this, let’s understand how URLs work in Built.io Contentstack.

Understanding URLs

In Built.io Contentstack, a URL is typically made up of two parts: Base URL and Relative URL. The Base URL is the consistent part of your site’s web address. So, for instance, http://www.YourDomain.com is the base URL, and any path given after the base URL is the relative URL, for example, /contact_us, /seo/blog/new_post.

The relative URL can again be split into two: the path where the entry resides (for example, /seo/blog), and the URL that is specific to the entry (for example, /my-first-page or 2014/04/30/my-first-page). The latter is the entry-specific URL, while the former is the prefix URL.

Let’s look at an example to understand this well.

  • Absolute URL: www.yourdomain.com/blog/seo/my-first-page
  • Base URL: www.yourdomain.com
  • Relative URL:
    • Prefix URL: /blog/seo
    • Entry-specific URL: /my-first page

The Default URL Pattern feature lets you set a URL pattern that's common for all the entries of a content type. Once this feature is set, this will be followed in all instances of URLs. For example, consider that you wish to identify URL hits received through blogs. Now, you can modify the settings of the URL field of your blog content type by adding a prefix (say, 'blog') in your URL, such that when you receive a hit you can identify it using the URL.

It first lets you define a URL pattern for your entries. Once this is defined, it auto-generates the URL whenever you create a new entry. So, for instance, if the title of your entry is My first page, and you define the URL pattern to be Title, Built.io Contentstack will automatically generate the URL of your entry as www.yourdomain.com/my-first-page. This eliminates the need to manually enter long, complex URLs every time you create an entry.

Though the URLs are generated automatically using this feature, you can edit or change these URLs, if needed. This gives you the flexibility to generate more meaningful, descriptive, and SEO-friendly URLs, thereby improving your site's performance in search results.

Using Default URL Pattern

Now that we know the basics of Default URL Pattern, let's learn how to use it.

When you create a 'Webpage' content type, the URL field is present by default. Click on the URL field once to open the field properties dialog box. There, you will notice a few dynamic variables represented by colon-prefixed keywords, using which you can create a default URL pattern of your choice. The default selected style for the URLs is /:title, which uses the title of the entry as the relative path for the URL. Let's understand what other keywords mean as follows.

URL Pattern: This shows an example of the structure of your URL. The prefix URL is a part of the URL that defines the path where the entry resides (for example, /blog and /articles/news). Enter the prefix URL in the given space. This may differ from case to case, as different entries may belong to different categories or content types.

Then, choose a pattern for the entry-specific part of the URL from the following options.

  • Title: If you select the /:title option, it will automatically take the title (value entered in the Title field) as the entry's relative URL. The text will be hyphenated and in lower case. This is selected as the default pattern of the URLs of your pages. Let’s consider an example to understand this concept in more detail:
  • Example:

    • Title: My first page
    • Default URL Pattern: baseURL/prefixURL/:title

    The auto-generated URL will be www.examplesite.com/my-first-page

  • Date and Title: The Date and title option attaches the date of creation (YYYY/MM/DD) as well as the title of the entry to the URL.
  • Example:

    • Title: My first page
    • Created_at: 04 April 2016
    • Default URL Pattern: baseURL/prefixURL/:created_at[YYYY/MM/DD]/:title

    The auto-generated URL will be www.examplesite.com/2016/04/30/my-first-page

  • Month and Title: This option adds the year/month of creation (YYYY/MM) and the title of the entry to the URL.
  • Example:

    • Title: My first page
    • Created_at date: 04 April 2016
    • Default URL Pattern: baseURL/prefixURL/:created_at[YYYY/MM]/:title

    The auto-generated URL will be www.examplesite.com/2016/04/my-first-page

  • Custom: This option lets you set a custom pattern for the URLs by using available variables or custom text, or a combination of both. The variables available for custom pattern field are given as follows:
    • :title: Displays the title of the entry in the URL (for example, www.examplesite.com/my-first-page)
    • :unique_uid: Displays the unique ID of the entry in the URL (for example, www.examplesite.com/abcd1234)
    • :year: Displays the year of creation (numeric) in the URL (for example, www.examplesite.com/2016)
    • :year_short: Displays the short version of the year of creation (numeric) in the URL (for example, www.examplesite.com/16)
    • :month: Displays the month of creation (numeric) in the URL (for example, www.examplesite.com/05)
    • :monthname: Displays the name of the month of creation in the URL (for example, www.examplesite.com/january)
    • :monthname_short: Displays the short version of the month name in the URL (for example, www.examplesite.com/jan)
    • :day: Displays the day (numeric) of the creation in the URL(for example, www.examplesite.com/30)
    • :year-:month-:day: Displays the year/month/date of creation (for example, www.examplesite.com/2016-04-30
  • Disable: If you select Disable, the relative path will be kept blank by default. You can then enter your own URL while creating the entry.

You can choose a combination of any of these variables for your URL.

Example 1: If you use /:title/:created_at[MM] /:created_at[DD] in the custom field, your URL will look like this: www.examplesite.com/my-first-page/04/30

You can also enter custom text in the URL along with the variables.

Example 2: If you use /home/:title/blog/:created_at[MM] /:created_at[DD] in the custom field, your URL will look like this: www.examplesite.com/home/my-first-page/blog/04/30

Note:It is important to note that setting a URL pattern simply generates the URL for the entry and populates it in the URL field. You can edit or change the URL anytime while creating or edit the entry.

Creating a Content Type

In the Content Modeling section, we’d saw how the content model of a News content type should look. Let’s use the same case to create a content type for News. 

We’ll create the News content type such that it can be used to add multiple news articles, and should have the following fields:

  • Title
  • Date
  • Location
  • Body
  • Author

All entries for the News section of the website will be created using the News content type, and hence, all of them will share the same attributes but different content. Now, let’s begin performing the following steps to start creating our content type:

  1. Firstly, after logging into Built.io Contentstack, you will be led to the Stack repository. Click on the stack that will hold your content type.
  2. Click on the + New Content Type button, and you will be led to the Create New Content Type form, as shown in the following screenshot:

News1.jpg

  1. For our content type, we’ll be selecting the Webpage content type, since the news article that we will create is a web page. Provide a suitable name for your content type as shown in the following screenshot.
  2. Next, based on the nature of the content type, we’ll select an option that best suits our needs. Since, we will create multiple entries (news articles) using this content type, we’ll select Multiple. This will enable us to add multiple entries using the same content type.

News2.jpg

  1. Provide a Description (optional), and click on Create and Add fields.

image021.jpg

Now that you have selected the kind and type of your content type, it’s now time to to add fields and modify its properties as per your requirements. 

Adding Fields and Field Properties

Since, we have selected the Webpage content type, the Title and URL fields are added by default to the content type. However, along with these fields, we’ll add additional fields, such as Date, Location, Body, and Author.

To add fields to your content type, either click on the field option or drag and drop the fields from the ADD FIELDS list displayed at the right-hand side. Let’s look at the steps to add each of the the fields:

  1. Adding the Title field:

We’ll be adding the Title field that will display the headline of the news articles. So, drag the SINGLE LINE TEXTBOX field below the URL field. .

To modify the properties of the field, click on the SINGLE LINE TEXTBOX field and the EDIT PROPERTIES form opens up. 

You can add some additional details through properties such as Instructional Value, Placeholder Value, Help Text, or Default Value as per your choice.

Also, check the Mandatory option to make it a compulsory field.

  1. Adding the Date field:

We’ll be adding the Date field that will display the current date of the articles. So, drag the DATE field below the Title field.

Since the DATE field displays the time too by default, we will check the Hide Time option when editing the properties of this field.

Also, check the Mandatory option to make it a compulsory field.

  1. Adding the Location field:

Then, below the Date field, we will add the Location field. To do so, add the SINGLE LINE TEXTBOX field and rename it to ‘Location’.

You can add some additional details through properties such as Instructional Value, Placeholder Value, Help Text, or Default Value as per your choice.

Check the Mandatory option to make it a compulsory field.

  1. Adding the Body field:

We’ll now add the body of the news article. For this, we’ll use the RICH TEXT EDITOR field and rename it to Body.

Add additional properties as discussed for the Location field.

Finally, check the Mandatory option to make it a compulsory field.

  1. Adding the Author field:

For adding the author name, we’ll be using the LINK field that will display the name of the author (TITLE) and at the same time provide a link to author’s website or maybe to the published works (URL). Rename this field to Author

Check the Mandatory option to make it a compulsory field.

Finally, click on either Save or Save and Close.

The final structure of the News content type is shown in the following screenshot:

image023.jpg

Creating and Managing Labels

You can create and use labels to categorize or organize the available content types in your stack. Labels are like folders, but with more flexibility. You can apply labels to one or more content types, and group them together for easy access.

Create and Apply Labels

When you create or edit a content type, the Content Type Builder page displays an Apply Label link at the top-right corner. The existing labels, if any, will be displayed when you click on this link. If no labels are visible, click on Create Label to add new labels. In the new dialog box that appears, enter a suitable Name for the label. You can also nest this new label under an existing label.

Tutorial Video

video-thumb


Manage labels

To manage labels, sort content types by Labels instead of the Alphabetical manner. Then, click on the Manage Labels link that appears on the right. This will display the list of all labels created for content types, along with the Edit and Delete options.

Tutorial Video

video-thumb

More Actions on Content Types

After successfully creating a content type, there are some additional actions that can be performed on it. Let’s discuss these actions in detail in the following sections.

Editing a Content Type

Once created, a content type can be edited any time without restrictions. However, keep in mind that removing a field, modifying its data type, or toggling the 'multiple' attribute may result in data loss.

Let’s look at the step-by-step process of editing a content type:

  1. Click on the Content link in the top navigation to view the list of available content types.
  2. When you hover on the content type that you wish to edit, on the extreme right side, you will notice three vertical dots which is the More Options icon.
  3. Click on this icon and select Edit Content Type to make the required changes to your content type.
  4. Finally, click on Save or Save and Close.

The following video will give you a visual representation of this process:

Tutorial Video

Let’s edit the News Articles content type we created in the earlier step, and add some text to its description.

video-thumb


Copying a Content Type

If you are working on something that has a content structure which is similar to one you created previously , then in this case, it’s best to reuse your content types. You can create a duplicate copy of an existing content type in a few clicks. To do so, perform the following steps:

  1. Click on the Content link in the top navigation to view the list of available content types.
  2. When you hover on the content type that you wish to copy, on the extreme right side, you will notice three vertical dots which is the More Options icon.
  3. Click on this icon and select Copy Content Type.
  4. Now, a new window named Copy Content Type {your_content_type_name} appears. Here you can change the properties of your content type.
  5. Finally, click on Create and Add fields to make a copy of your content type.

The following video will give you a visual representation of this process:

Tutorial Video

In the video given below, we will create a copy of the News Articles content type.

video-thumb


Exporting a Content Type

Built.io Contentstack allows you to export the JSON file of any existing content types in  your stack. 

To export an existing content type, perform the following steps:

  1. Click on the Content link in the top navigation to view the list of available content types.
  2. When you hover on the content type that you wish to export, on the extreme right side, you will notice three vertical dots which is the More Options icon.
  3. Click on this icon and select Export Content Type from the available options to save the JSON file of the content type to your local storage system. Any changes made to this JSON file will be retained when importing.

Tutorial Video

Let’s export the News Articles content type that we just created, and save the JSON file into our system.

video-thumb


Importing a Content Type

You can import the JSON file of a content type into a stack. To import a content type, perform the following steps:

  1. Click on the Content link in the top navigation.
  2. On the top right corner, you will notice the Import tab. Click on it.
  3. Now, the Import Content Type window opens. Here, upload the JSON file you want to import.
  4. Finally, click on the Import button to import the content type.

Tutorial Video

In this video, we will show how to import a Home content type. We assume that you already have a JSON file containing all the details of the Home content type.

video-thumb


Deleting a Content Type

The process of deleting a content type is quick and easy. 

  1. Hover on the content type that you wish to delete. 
  2. On the right hand side, you will notice three vertical dots which is the More Options icon. 
  3. Click on it, select Delete, and confirm. 

This will permanently delete the content type along with all the entries within it.

Tutorial Video

Let's delete the Copy of News Articles content type that we created earlier.

video-thumb

arrow-up