How To Create A Document Type In Umbraco and create a page with it

One of the most basic building blocks on any CMS build is providing a structure to allow content editors to do tasks such as create pages, add images and files, apply metadata as well as a whole heap of other features. Having a website where you couldn’t add content wouldn’t be very useful at all.  In Umbraco land, a ‘document type’ is the name of the mechanism to achieve this.

A ‘document type’, can be thought of in same terms as C# class.  A class contains properties that we, as developers, can define to allow any data we want to be saved against it.  A ‘document type’ is the Umbraco way to allow content editors to be able to store data against a page.  This data can be anything you like such as text, dates, URLs’ and numbers.

After the user creates a page with a selected document type, we can then use a template (for the HTML) combined with the data stored against the ‘Document Type’ to display a page on the website with useful information displayed.

Where Do Document Types Live in Umbraco?

After you log into the Umbraco back-end, in the sections menu on the left hand side, go to ‘Settings’ and you will see an option labelled ‘Document types’.  If you expand this, you should see a list of pre-installed ‘document types’ as seen below:

Umbraco_document_types

From this screen, you can either have a look at any previously installed document types or create a new one.  If you look at an existing type by clicking on it, in the left-hand panel you should a list of properties load up.  On the screen that loads, you will see four tabs that will let you configure and create properties within your document type, Info, Structure, Generic properties and Tabs.

Umbraco_document_type_tabs

Creating A Document Type

To create a document type, go to the document types folder, click on the ellipse on the right-hand side menu and select ‘Create’, the document type tab should open, select ‘New Document Type’.  You can choose whether to create a matching template or not and choose a master document type.

Umbraco_creating_a_document_type

Document Inheritance

Now we have created a very basic empty document type, it is probably a good time to talk about a cool feature that Umbraco gives us, when working with ‘document types’ and that is… inheritance.  If you create a document type under another document type, all the parents properties will be inherited by any child document type.

Let’s say we create a single root document type called ‘Master’.  In Master, we create tabs that anything below it will inherit.  One common thing you need to do on any page is set the HTML meta-data settings.  In Master, we can create a custom tab called ‘MetaData’.  In the meta-data tab, we can add in three custom properties, a string property called ‘Meta Name’, another called ‘Meta Description’ and another one called ‘Author’.

Any document type we create under Master will automatically have this tab applied, meaning we don’t have to copy these global settings on every new document type we set-up.

Creating A Tab With Some Properties

First, we will create a custom tab, on the document type we created in step one, select the ‘Tabs’ tab.

Umbraco_creating_a_tab

In the tabs section, create a new tab calling it whatever, like ‘SEO’ for example. After the custom tab has been created, click on the ‘Generic Properties’ tab to create a custom property.

Umbraco_document_type_custom_property

Click on the ‘Click here to add a new property’ button to add a custom property, make sure you select the tab we created in the previous step to associate it your property to the tab.

Umbraco_allowed_child_types

Before you can use your document type to create ages with it, you first need to set where it is allowed to be created.  This can be done in the ‘Structure’ tab.  If you want the page to be available at the root level of the content tree, e.g. you want to make it your home page, then select the ‘Allow at root’ and save the page.

If you want to create something like a content page under the homepage, in the document types, go to the homepage type, select the ‘Structure’ tab and then in ‘Allowed child node type’s select your new document type and save the page.

Creating A Page

Now we can finally create a page in the CMS.  On the sections tab on the left-hand side, select the ‘Content’ section.  In my example, I have created my content page to only be allowed to be created under the homepage. When I click on the ellipse to the right of the Hompage tab, my document type now shows under the ‘Create Item’ selector.

Umbraco_creating_page_type

Conclusion

In this guide, we have covered quite a lot about getting started creating content in Umbraco.  We’ve talked about what a document type is in Umbraco 7 and how they are used as the basic building blocks of creating your Umbraco sites.  We’ve discussed where you can find any pre-installed document types in your website and how to create a new one.

We’ve talked about how to use a few of the basic out of the box features, like creating a custom tab, creating custom properties and how to set where your page is allowed to be created within the content tree.  Stay tuned for more Umbraco goodness.

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

More Posts

4 replies

Trackbacks & Pingbacks

  1. […] How To Create A Document Type In Umbraco and create a page with it I explained about document types.  On most projects, you will usually create one controller for […]

  2. […] I wrote about ‘Document Types’ and how to create them in Umbraco, in How To Create A Document Type In Umbraco and create a page with it.  We can create containers that content editors can use to create a hierarchy of pages but, as of […]

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *