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 want 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.

Content type structure.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.

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, Contentstack offers two basic types of content type (Webpage and Content Block), each helping you cater to different needs of your digital property.

Type.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.

Single - Copy.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’, ‘Body’, as seen in the following screenshot:

Developing the news article content type by adding fields.png

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

Note: In a particular content type, you can add at the most 100 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 'Display Name', ‘Placeholder Value’, ‘Instruction Value’, ‘Help Text’, and 'Number of Characters'. 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 that 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 that 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 content types, such as text, images, and videos. It provides several tools for editing and formatting the content entered in the field without using HTML tags (you, however, have the provision to use HTML tags, if needed).

On Oct 26, 2018, we introduced a new version of the RTE field that provides new editing features and bug fixes over the previous version. For stacks created after this date, you will automatically be using the upgraded RTE field. All stacks created before this date will continue to use the same RTE field. But you have the option to switch to the new version (and back to the older version) at any time by editing the properties.

Steps to upgrade the new version of the Rich Text Editor field

If your stacks were created before 26th Oct, 2018, chances are that you using an older version of the RTE in your content types. But you can switch to the new version in a few clicks. Let’s look at the steps to upgrade your old RTE to the new version.

  1. When creating a content type, add the Rich Text Editor field.
  2. Click on the field to edit the field properties.
  3. Under Editor Version, you will see two options: Latest and Old. Select Latest.
    Updated RTE - Select the 'Editor Version'.png
  4. Under Editor Type, you can choose between Basic and Advanced, as per your needs.
    Updated RTE - Select the 'Editor Type'.png
  5. Click Update. Your content type is saved.

When you create entries for this content type, you will see the new RTE as follows:

Updated RTE.png

Note that you can switch back to the older version any time by selecting the 'Old' option under the 'Editor Version' property.

Updated RTE - Select 'Old' to switch back to older version of RTE.png

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. Contentstack uses the ‘Markdown’ flavor for its Markdown field. You can find more details about the Markdown flavor here

This field possesses certain properties that you can change any time as per your needs. The properties that 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.

Select

The ‘Select’ field allows users to choose one or more options from a set of predefined choices. The choices can be selected as radio buttons, checkboxes or dropdown options. This field can be used for a variety of purposes: for example in eCommerce, let someone pick a shirt size from XS, S, M, L, XL.

A user with the ability to create a Content Type can add a ‘Select’ field. When setting up the field, pick between ‘Radio' button, ‘Dropdown' list or ‘Checkbox’.

There are a few parameters you can configure (read more about them in the ‘Field Properties’ section):

  • Selection Type: Choose if the users will be able to select ‘Single’ or ‘Multiple’ choices.
  • Set Limit for Multiple Choices: Define minimum and maximum limit of choices that the user can select.
  • Display Type for Choices: Define how the field will be visualized: ‘Radio button’, ‘Checkboxes’, or ‘Dropdown’.
  • Choice Data Type: Decide if your choices are text or number.
  • Add Choices: Enter values that your content editor can pick from.

01-Select Field.png

Modular Blocks

Modular Blocks is a field that allows content managers to dynamically create and modify components of a page or app on the go.

While creating a new content entry, content managers now have the option to choose from multiple blocks: ‘Banner’ (Single-line Textbox and Image fields), ‘Product Details’ (Title, RTE, and Image fields), or ‘Video’ (File and Multi-line Textbox fields). Content managers can add the required block or multiple blocks from these options, move blocks up or down, remove them, as and when required.

This gives content managers the flexibility to create rich pages without the need to engage a developer for changes in the content type structure.

Let’s learn how developers and content managers can use this field.

Developer

The developer must first add this field to the content type builder. Once added, click the ‘+ New Block’ link, provide a name of your choice for this block (e.g., banner), and click ‘Create’.

You will notice a new block within the field. Now, from the left panel, add fields of your choice into this block. Likewise, you can add multiple blocks (with several fields within each block) into the added Modular Blocks field. You can, at any time, rename or delete the added blocks.

The developer can add a maximum of five ‘Modular Blocks’ fields within a content type, and a maximum of 20 blocks within each Modular Blocks field.

Note: Nesting of Modular Blocks is not allowed. This means that you cannot add a Modular Blocks field within a Modular Blocks field. Also, you cannot add a Modular Blocks field within a Group field.

Developer_2.png

Content Manager

While creating an entry, the content manager sees the modular block field (or as renamed) and, within it, the links to add the defined blocks (e.g., a banner). By clicking on any of these block links, the relevant block (with all the corresponding fields) will the added in the entry form.

The content managers can add multiple blocks and can also add the same blocks multiple times. They can also sort them, delete them, or add another block above a block using the icons given on right-hand side top corner of a block.

Note: The content manager cannot add more than 30 blocks within a Modular Block field.

Content Manager_3.png

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 that 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 that 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 that 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 lets you upload or use files in your entry. This field provides users with two options: Browse File and Choose from uploads. The Browse File option lets you upload any file from your local system, while the Choose from uploads option allows you to upload a file from the ones stored under the 'Assets' section.

You can set regular parameters for the ‘File’ field such as ‘Display Name’, ‘Unique ID’, ‘Placeholder Value’, ‘Instruction Value’, ‘Help Text’, and ‘Options’. There’s also unique fields including ‘Allow Images Only’, ‘Allowed File Types’ and ‘Image Dimension Validation’. 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 that 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 allows you to create references to entries of the same content type or other content types. It lets you use these entries as an input to your content type.

The process of creating references of other content types is known as ‘Include Referencing’ and creating references of the same content type is known as ‘Self Referencing’.

Let's look at them in detail to understand their differences better.

Include Referencing

In Include Referencing, 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 say you are creating news articles, and you want 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.

Include Referencing.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.

Self Referencing

In Self Referencing, the ‘Reference’ field allows you to create references to entries of the same content type. It lets you use the entries of the same content type as input.

Let's say you are creating an e-commerce app consisting of ‘Category’, ‘Brand’, and ‘Product’ content types. Now, you want to add the functionality to recommend products that are related to the product chosen by a user via the app. For example, if a user buys a mobile phone belonging to XYZ brand, they should get recommendations of headsets, chargers, or mobile phone covers of the same brand.

In this case, you need to add a ‘Reference’ field in the 'Product’ content type of your e-commerce app and select ‘Product’ as the reference, since all the products in the app belong to the same ‘Product’ content type.

To do this, you will first add a ‘Reference’ field in your e-commerce app and rename it as ‘Recommendations’ and select the ‘Product’ content type as the reference. Now, whenever content managers create entries for ‘Product’, they will be able to list all the products that are associated with the entry. Users can select the required recommended products and go ahead with filling the data in other fields.

The ‘Reference’ field possesses certain properties that you can change anytime as per your requirements. The properties that 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.

Additional functionalities

Edit referenced entries

After selecting a reference entry from the list of available entries, you can edit the the referenced entry in a single click.

To go to the referenced entry page from the reference field, click on the ‘Edit’ icon that appears beside the referred entry. This will take you to the entry page where you can view or modify the entry as per your requirement.

Note: Before navigating to the referred entry, make sure to save the parent entry. If the parent entry is not saved, unsaved data may be lost.

Add multiple references

When you mark a specific Reference field of a content type as ‘Multiple’, you will be able to add multiple entries as references in a single field. When entering data for a multiple Reference field, you will see the options: ‘Choose existing entry’ and ‘Create new entry’.

  • Choose existing entry - This option will open the ‘Choose entries from content_type_name content type’ modal that displays all the entries of the referenced content type. Select entries as per your requirement, and click ‘Add selected entries’. This will add all the selected entries as a reference in the given reference field.

    Beside each referenced entry, you will see the ‘Edit’ and the ‘Delete’ icons. Clicking on the ‘Edit’ icon will lead you to the entry page where you can make the necessary changes to the specific entry. The ‘Delete’ icon, as the name suggests, will remove an entry from the list of selected referred entries.

    Create new entry - You can create and add new reference entries on-the-go. While adding references, if you realize that you need to add a new entry that can be used as a reference, you can do it by clicking the ‘Create new entry’ link. After entering the data for the new entry, click on ‘Save’. This will create a new entry for the referred content type and will automatically add it under the Reference field.
  • Note: Before navigating to the new entry page, make sure to save the parent entry. If the parent entry is not saved, unsaved data may be lost.

Choosing reference entries.png

Permissions on reference content type

When a content type is referred in another content type, the type of permissions assigned to the content manager on both these content types play an important role.

Let’s understand this with the help of an example.

Let’s say a content manager needs to create an entry for the ‘News Article’ content type, which has a reference field (named Author) referring to the ‘Authors’ content type. In such a scenario, the type of permissions assigned to the content manager on the ‘Authors’ content type would define what he can do with the entries of the ‘News Article’ content type. There are two possibilities.

  • No ‘Read’ access on the referenced content type:
    While creating a new entry, if the content manager does not have ‘read’ access to the ‘Authors’ content type, he will not be able to view any data under the ‘Author’ field in the ‘News Article’ content type. Consequently, when such an entry is saved, there would be no data for the ‘Author’ field.
    If the content manager, who does not have ‘read’ access to the ‘Authors’ content type, edits and saves an existing entry, then the value that was previously set for the ‘Author’ field will be wiped out.
  • ‘Read’ access but no ‘Publish’ access on the referenced content type:
    If the content manager has ‘read’ access but does not have ‘publish’ access to the ‘Authors’ content type (referenced content type), he will be able to select a value for the ‘Author’ field in the entry, but will not be able to publish the entry.

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 a more detailed page. This can be easily made by using the ‘Group’ field, which includes a profile image, textbox, and link fields.

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

When multiple iterations of a ‘Group’ field is required in a schema, for example, in a news app where we have multiple news articles with the same schema, you need to mark the ‘Group’ field as ‘Multiple’. In such cases, you have the provision to mark any non-multiple ‘Single Line Textbox’, ‘Multi Line Textbox’, ‘Number’, or ‘File’ field as the ‘Group’ title.

Tutorial Video

How the Group Field Works.png

Custom

In order to use this field, you need to first add on or more extensions (custom field logic) to Contentstack. Learn what Extensions are and how they work.

It works as a custom field since it allows you to use any kind of input field in Contentstack.

Add this field to your content type, and click on it to edit properties. In the new dialog that appears, select the extension that you want to use for this field; For example, Color picker (or video selector, code editor, progress bar). The field will then work as the selected extension. Now, when content managers create an entry for this content type, they will see 'Color picker' as a field within it.

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 ‘Number 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 want 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 (uid) is a unique alphanumeric string that is associated with each field. The system identifies each field with its uid. By default, the uid of each field is the same as the display name of the field. However, you can change the uid as per your requirements. It is important to remember that no two fields in a content type should have the same uid.

Note: If you change the uid 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. Also, there are certain restriction when providing a user-defined uid. These restrictions are covered in the ‘Restricted keywords for uids’ section.

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 want to have two fields for First and Last name, you can use placeholder values for both the fields.

Placeholder Value.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.

Instruction Value.png

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.

Help Text.png

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 want 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.

Validation Regex.png

Let’s consider a few examples:

  • Email: If you want 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.

Validation Error Message

This field property lets you define a custom error message that will be displayed to the user if the validation checks specified in the ‘Validation (Regex)’ field do not pass. For example, ‘Please enter a valid email address’ or ‘Enter numeric value’.

If you do not specify any custom error message here (and assuming that you have specified certain rules in ‘Validation (regex)’), the system will use a generic error message in case of errors. The generic error message is ‘The input value is invalid.’

The ‘Validation Error Message’ field property should be used only if you have used the ‘Validations (Regex)’ field property.

Validation Error Message.png

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.

'Mandatory,' 'Unique,' and 'Multiple' options of a field.png

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.

The 'Unique’ option is located right below the 'Mandatory’ option. You can see the ‘Unique’ option in the screenshot provided in the Mandatory section.

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 wants 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.

The 'Multiple’ option is located right below the 'Unique’ option. You can see the ‘Multiple’ option in the screenshot provided in the Mandatory section.

Set maximum limit

For fields marked as ‘Multiple’, you have the provision to set a maximum limit to the number of instances that can be created for that field. When a field is marked as ‘Multiple’, the 'Set maximum limit' parameter appears below which lets you set the maximum allowed instances for fields. Once you set the maximum instance limit for a field, users will not be able to create instances of the field beyond the set limit.

Consider for example that you have added a Single Line Textbox field in your content type, marked it as ‘Multiple’, and set its maximum limit to ‘3’. Now, when the content manager enters values for this field, after creating three instances of the field, the plus (+) sign beside the field disappears and an error message (provided in the ‘Custom error message’ parameter) will be displayed that will inform you that you have reached the maximum limit.

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.

Allowed file type(s)

The ‘Allowed file type(s)’ parameter allows you to specify the file types that the user can upload using the ‘File’ field. Once you set the permitted file types for a field, users will not be able to upload any other file types apart from the ones mentioned in this parameter. Setting this option will validate every file that will be uploaded by the user.

Let’s say if you set the values for this parameter as ‘pdf, png, md’, the user will only be able to upload files PDF documents, PNG graphic images, and Markdown files.

File size limit

The ‘File size limit’ parameter allows you to set size limitations on the files that are being uploaded using the ‘File’ field. Once you set file size limits for a field, users will not be able to upload files that have sizes that do not fall within the mentioned range. Using the Minimum and Maximum options, you can set the minimum and maximum file size limit for a field, respectively:

Minimum

This option allows you to set the minimum size for the file that can be uploaded.

Maximum

This option allows you to set the maximum size for the file that can be uploaded.

Set date range

The ‘Set date range’ parameter allows you to enter a range of date that the user will be allowed to select from. Setting this parameter enables the user to select a time period that will fall within the specified date range.

The start and end dates of the selected period are entered within the ‘Start Date’ and ‘End Date’ suboptions, respectively.

Start date

This option allows you to set the start date for the date range.

End date

This option allows you to set the end date for the date range.

Mark as Group title

This property appears in the properties window of any non-multiple ‘Single Line Textbox’, ‘Multi Line Textbox’, ‘Number’, or ‘File’ field within a ‘Group’ field, only when the ‘Group’ field is marked as ‘Multiple’. It lets you assign the value of a specific field as the title of a particular ‘Group’ field. For example, when you create a news app, you have multiple news stories with the same schema. So, in order to distinguish between multiple stories, you can set the field assigned for ‘Headline’ as the title of the group.

Mark as Group title.png

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.

Selection Type

Use the ‘Selection Type’ to define if the field is ‘single’ or ‘multiple choice’.

If ‘Selection Type’ is set to ‘Single’, the user creating the entry will be able to select only one option from the given choices. In this case, you can render the choices in either ‘Radio’ or ‘Dropdown’ options.

If ‘Selection Type’ is set to ‘Multiple’, the user creating the entry will be able to select one or more options. You can then define the minimum and the maximum number of choices the user can select and has the flexibility to render the choices in either Dropdown’ format or ‘Checkbox’ options.

Selection Type.png

Limit for Multiple Choices

Set the minimum and/or maximum of selections.

Limit for Multiple Choices.png

Display Type

The ‘Display Type’ parameter lets the developer to define how to render the list of choices. Pick between 'Radio' button, 'Dropdown' list, and 'Checkbox'. Depending on how you set up your field, these options may be limited.

If the ‘Selection Type’ is set to ‘Single’, the options available under ‘Display Type' are ‘Radio’ button and ‘Dropdown’. If the ‘Selection Type’ is set to ‘Multiple’, the options available under ‘Display Type’ are ‘Dropdown’ and ‘Checkbox’.

Display Type.png

Choice Data Type

The ‘Choice Data Type’ parameter lets you specify a format for the ‘Add Choices’ parameter. Select between ‘Text’ and ‘Number’.

Choice Data Type.png

Add Choices

Under ‘Add Choices’, enter the options that will be visible to the content editor as choices to select from. You can add several choices at once by separating the options with a new line.

Make things easy for your content editors by selecting a default option or drag and drop your options into the best order.

Add Choices.png

It is important to note that if you change the data type after entering the choices, the values added as choices may be lost.

Note: You can add up to 100 options that are up to 100 characters long.

Image Dimension Validation

This property lets you set a filter or validation on the dimension of the images that you upload using the file field. Set minimum, maximum, min/max range, or exact height and/or width (in pixels) of the image you upload. While any image file format can be uploaded using the file field, the dimension validation can be done only on a few image file formats. These formats are JPG, GIF, PNG, WebP, BMP, TIFF, SVG, and PSD.

Image Dimension Validation.png

Click on the ‘Width’ or ‘Height’ (or both) options in the 'Image Dimension Validation' property and enter the number of pixels. For example, if you select ‘Height’ and ‘min’, and enter 100px, your content manager will not be able to upload any images that are less than 100 pixels in height.

In order to use this property, you must first check off the ‘Allow Images Only’ property.

02.png

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 Contentstack autogenerate the URL.

urlp.png

However, before diving deep into this, let’s understand how URLs work in Contentstack.

Understanding URLs

In 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.

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 want 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, 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:
  • 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

Check out the Content Modeling section to understand 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 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:
    cct.png
  3. 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.
  4. 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.
    Single.png
  5. Provide a Description (optional), and click on Create and Add fields.
    CCT full.png

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.

Note: If you want to add fields via a JSON file instead of through the user interface, you need to create a JSON file that contains the content type schema, and use the ‘Import content type’ link in the product. You can refer the JSON schema for creating a content type document to know how you can add/update fields in your content type through API.

Let’s look at the steps to add each of the the fields:

  1. Adding the Title field:
  2. 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.

  3. Adding the Date field:
  4. 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.

  5. Adding the Location field:
  6. 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.

  7. Adding the Body field:
  8. 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.

  9. Adding the Author field:
  10. 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:

Final News content type.png

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

Create and Apply labels.png

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

Manage Labels.png

Restricted keywords for uids

When providing user-defined unique IDs (uids) for content types and entries, there are certain keywords that cannot be included in the uids. Here are the keywords that cannot be used as uids for Content Types and Entries.

Restricted keywords for uids for Content Type

The following set of keywords cannot be used as the uid of a Content Type:

  • built_io_application_user
  • built_io_application_user_role
  • built_io_installation_data
  • built_io_upload
  • built_io_label
  • built_io_audit_log
  • built_io_publish_queue
  • built_io_language
  • built_io_environment

Restricted keywords for uids for Fields

The following set of keywords cannot be used as the uid of a Field:

  • uid
  • created_at
  • deleted_at
  • updated_at
  • tags_array
  • klass_id
  • applikation_id
  • *_ids
  • id
  • _id
  • ACL
  • SYS_ACL
  • DEFAULT_ACL
  • app_user_object_uid
  • built_io_upload
  • __loc
  • tags
  • _owner
  • _version
  • toJSON
  • save
  • update
  • domain
  • shard_account
  • shard_app
  • shard_random
  • hook
  • __indexes
  • __meta
  • created_by
  • updated_by
  • inbuilt_class
  • tenant_id
  • isSystemUser
  • isApplicationUser
  • isNew
  • _shouldLean
  • _shouldFilter
  • options
  • _version
  • __v
  • locale
  • publish_details

Note: Fields cannot have uid ending with '_ids'.

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 tab at the top to view the list of available content types.
  2. When you hover on the content type that you want to edit, on the extreme right side, you will see the 'More Options' icon (three vertical dots). Click on this icon and select Edit Content Type to open the Content Type Builder page.
  3. Here, you can make the required changes to your content type schema. To make changes to the properties of the content type, click on the 'Edit' (pencil) icon beside the name of the Content Type.
    Edit Content Type icon.png
    This will open the 'Edit Content Type' form that appears while creating a new content type. Here, you can update the 'Name' and 'Description' for your content type, or change the type from 'Single' to 'Multiple'.
  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.

Editing a Content Type.png

Copying a Content Type

If you are working on something that has a content structure which is similar to the 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 want 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.

Copy a Content Type.png

Exporting a Content Type

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 want 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.

Export a Content Type.png

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.

Import a Content Type.png

Deleting a Content Type

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

  1. Hover on the content type that you want 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.

Delete a Content Type.png
Was this article helpful?
top-arrow