Document Types

Data first

nothing in = nothing out!

Step 1 of any site is to create a "Document Type" – after a few installations you’ll become familiar with this terminology but at the start it might be a little bit bewildering. A Document Type is a data container in Umbraco where you can add data fields / attributes where the editor user can input data and Umbraco can use it to output it in the relevant part of a "template" (more on these later).

Document Types are infinitely extendable but usually you’ll add data fields something like the following:

  • Page title
  • Sub Heading
  • Body Text
  • Meta Title
  • Meta Description
  • ...

Each Data Field has a type - e.g. a text string or a number or rich text body... we’ll come to this later.

Creating your first Document Type

Right, let’s get busy. Go to the Settings menu in Umbraco. This is the third button on the left hand black menu with the spanner. Then you’ll see a long list of settings – don’t worry about these yet, we’ll introduce them as we need them.

Document Types is strangely positioned as the last option in the list yet it’s always the starting point for any Umbraco build. Hover over the Document Types node and you’ll see three dots ... , click this to see the menu. Then click + Create button.

Creating a Document Type

Figure 7 - Creating a Document Type

Ignore the Master Document Type drop down for now. Give our new Document Type the Name = "HomePage" and ensure the Create matching template checkbox is checked. Click Create.

Name your Document Type

Figure 8 – Name your Document Type

Umbraco now adds a Document Type to the tree under the node. You’ll see four tabs Info,Structure, Generic properties, Tabs. Click Info (should already be selected) and then the Choose... link next to the Icon label. Enter "home" into the search and you'll have a house icon – this will help our editors in the Content tree later.

Adding an Icon to Document Type

Figure 9 - Adding an Icon to Document Type

Enter in the Description field "This is our homepage template". This text is used to help the user select the correct document type later.

Next click the Structure tab and check Allow at root. This will allow us to create a homepage at the root (simple huh?).

Next we go to the Tabs tab. Create a new tab called "Contents" and then another called "Footer" (enter the name and click the New tab button remembering to click Save after).

Document Types - Adding Tabs

Figure 10 - Document Types - Adding Tabs

Now go to the Generic properties – this tab is where we create the data containers that the homepage will need and use. Click on the link Click here to add a new property. Enter the Name "Page Title". When you move to the next field you’ll see Umbraco helpfully gives you the alias "pageTitle". The Type is defaulted to "Textstring" and Tab = "Contents" (remember, we just created that!). Description again helps the editor so we'll fill this in "The main title of the page (e.g. Welcome to Widgets Ltd). "

Creating our PageTitle Data Type

Figure 11 - Creating our pageTitle Data Type

Ignore the rest of the fields for now and click the green Save button at the top right.

Repeat this step, clicking the Click here to add a new property link at the top of the Generic Properties tab and create these (remembering to click Save each time):

NameBody Text
Type:Richtext editor (click the arrow on the Type field!)
Description:The main content of the page.
NameFooter Text
Tab:Footer (remember to change this!)
Description:Copyright notice for the footer.

You should now have a Generic Properties tab that looks like this:

Generic Properties Tab of your Homepage Document Type

Figure 12 - Generic Properties Tab of your Homepage Document Type

We’ve now created our first Document Type – Umbraco needs three things to create a webpage and this is the first and most important. It takes the data inside an instance of the Document Type and merges it with a template – we’ll edit our template next.

Next - Creating Your First Template and Content Node

How to create your first template and create a content node.