Document Types

    Data first

    nothing in = nothing out!

    Step 1 of any Umbraco 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 bewildering. A Document Type is a data container in Umbraco where you can add Properties (data fields/attributes) where an editor can input data. Umbraco will output this data to the relevant part of a "Template" (more on these later).

    Document Types are infinitely extendable but usually you’ll add the following common properties:

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

    Each Property has a Data Type - e.g. maybe a text string, 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 top navigation menu. 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 positioned as the first option in the list and is always the starting point for any Umbraco build. Hover over the [Document Types] item and you’ll see three dots [...] , click this to see the menu. Then you'll see four options, click the [Document Type] option - we want a template automatically created for us.

    Using folders can help you organise your Document Types.

    Creating a Document Type

    Enter "HomePage" as the [Name] of our new Document Type - you'll see that an Alias is automatically created for us.

    Enter in the [Description] field "This is our homepage template". This text is used to help the editors choose the correct Document Type when creating new Content Nodes back in the Content Section.

    Click [Save] to store our new Document Type.

    Name your Document Type

    Our new Document Type is now visible as a new item in the Settings Tree under [Document types]. Now we're going to give this Document Type an icon to help our editors when they will be working with multiple Document Types in the Content Tree. Click the white document icon next to the name field, enter "home" into the search field that appears and select the house icon.

    Adding an Icon to Document Type

    Next, click the [Permissions] icon and check [Allow as root]. This will allow us to create a homepage at the root of the Content Tree.

    If none of your Document Types have the [Allow as root] checked, all of them will be allowed to be created at the root level.

    Allow Homepage Document Type As Root

    Next, we go back to the Design screen. Create a new group called "Content".

    Document Types - Adding Our First Content Group

    Now click on the Add property link – this is where we can create the data containers in which the editors can enter the content for the homepage. Enter the [Name] "Page Title". When you move to the next field you’ll see Umbraco has automatically generated the Alias "pageTitle". You should also enter a [Description]. This helps the editor to provide relevant content, so we'll fill this in "The main title of the page (e.g. Welcome to Widgets Ltd)".

    Creating our PageTitle Property

    Now click the [Add editor] link, type "text" in the search box and select the existing editor for the "Textstring" Data Type.

    Selecting Textstring data type

    Ignore the rest of the fields for now and click the green [Submit] button at the bottom right.

    Remember to come back and explore the list of Data Types later - it's a hint to the power of Umbraco.

    Repeat this step to add two more properties:

    NameBody Text
    Group:Content
    Alias:bodyText
    Description:The main content of the page.
    Data Type:Richtext editor (use the search to find this existing editor)
    NameFooter Text
    Group:Footer (you'll have to add this group first!)
    Alias:footerText
    Description:Copyright notice for the footer.
    Data Type:Textstring

    Use the [Add group] link to create a new group called Footer for the Footer Text.

    You should now have a Document Type that looks like this:

    Homepage Document Type with Properties

    Remember to click [Save].

    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 (aka a Content Node) and merges it with a Template – we’ll create our template next.

    Next - Creating Your First Template and Content Node

    How to create your first template and create a Content Node.