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. The editor user can then 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 now (as of v7.4) positioned as the first option in the list and is 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 you'll get three options, click Document Type option - we want a template automatically created for us. Using folders can help you organise your Document Types.

    Creating a Document Type

    Figure 7 - Creating a Document Type

    Give our new Document Type the Name = "HomePage" you'll see that an alias is created for us.

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

    Click Save to store our new DocumentType.

    Name your Document Type

    Figure 8 – Name your Document Type

    Umbraco now adds a Document Type to the tree under the node. Now we're going to give this Document Type an icon to help our editors in the Content tree later. 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

    Figure 9 - 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.

    Allow Homepage Document Type As Root

    Figure 9a - Allow Homepage Document Type As Root

    Next, we go back to the Design screen. Create a new tab called "Contents" remembering to click Save after).

    Document Types - Adding Our First Content Tab

    Figure 10 - Document Types - Adding Our First Content Tab

    Now click on the Add property link – this is where we can create each of the necessary data containers in which the editors can enter the necessary content for the homepage. Enter the Name "Page Title". When you move to the next field you’ll see Umbraco helpfully gives you the alias "pageTitle". Click the Add editor link and you'll see a long list of editors. Select the "Textbox" (come back and explore this list of data types later - it's a hint to the power of Umbraco).

    Selecting Textbox Data Type

    Figure 11 - Selecting the Textbox Data Type

    Umbraco will generate a long name for the Data type - ignore this for now and select Submit.

    Now you can enter a Description, again helps the editor provide relevant content 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 Submit button at the bottom right.

    Repeat this step, clicking the Add property at the bottom of the Content tab and create the following properties (use the Add another tab link to create a new tab called Footer for the Footer Text):

    NameBody Text
    Type:Richtext editor (use the search to help you find this, leave all the options as default and click Submit)
    Description:The main content of the page.
    NameFooter Text
    Tab:Footer (remember to add this!)
    Description:Copyright notice for the footer.

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

    Homepage Document Type with Properties

    Figure 12 - Homepage Document Type with Properties

    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 create our template next.

    Next - Creating Your First Template and Content Node

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