Document types, compositions and templates in Umbraco

The three building blocks

• A document type defines a kind of page and its fields, for example "Content Page" with a title and body text.
• A data type defines how one field is edited, for example a Textstring, a Rich Text Editor or a Media Picker.
• A template is the Razor view that turns a page into HTML.

Step 1: Create a document type with a template

1. Go to Settings › Document Types, hover over the folder, and click +.
2. Choose Document Type with Template.
3. Name it Content Page. The alias becomes contentPage.
4. Click Add group, name it Content, then click Add property:

• Title, alias title, editor Textstring
• Body text, alias bodyText, editor Rich Text Editor

1. In the Structure view, turn on Allow at root so you can create it at the top of the content tree.
2. Click Save.

Step 2: Create a page

Go to Content, click + next to Content, choose Content Page, fill in the fields, and click Save and publish.

Step 3: Render it in the template

Umbraco created Views/ContentPage.cshtml for you. Open it under Settings › Templates or in your editor:

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<ContentModels.ContentPage>
@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;
@{
    Layout = "Master.cshtml";
}
<article>
    <h1>@Model.Title</h1>
    @Model.BodyText
</article>

@Model.Title uses the strongly typed model that Models Builder generates for you. See Models Builder. Without Models Builder, read values by alias instead:

<h1>@Model.Value("title")</h1>
@Model.Value("bodyText")

Rich text is already safe HTML, so output it directly. Don't wrap it in Html.Raw.

Step 4: Share fields with compositions

Most pages need the same fields, such as a meta description or a "hide from navigation" switch. Instead of adding them to every document type, put them in a composition:

1. Create a Document Type with no template, for example SEO, with properties metaTitle and metaDescription.
2. Open Content Page, click Compositions, and tick SEO.
3. Save. Every Content Page now has the SEO fields, and you can add the same composition to any other type.

Step 5: A layout for every page

Create Views/Master.cshtml so all templates share the same <head>, header and footer:

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@Model.Name</title>
    <link rel="stylesheet" href="/css/site.css">
</head>
<body>
    @await Html.PartialAsync("Navigation")
    <main>@RenderBody()</main>
</body>
</html>

Common gotchas

• "No template" when you view a page: the document type has no allowed template, or none is selected on the page's Info tab.
• A field shows nothing: check the alias matches exactly. Aliases are case-sensitive in code.
• You can't create a page under another: allow it under the parent's Structure › Allowed child node types.