How To Create A Custom Template in Umbraco 7 with MVC

Previously, 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 yet, we have no way of rendering that data on a website.  In order to do that, we must create a template. In today’s guide, we’re going to cover how to create a template in Umbraco and creating a matching MVC view to render the HTML.

Templates

Like ‘Document Types’, you can see the installed templates within your Umbraco website in the Settings section, which can be found in the left-hand section panel, under ‘Settings’ -> Templates.

umbraco_templates

In here you can create a new template definition by selecting the ellipse next to the templates folder and selecting create.
umbraco_templates_creating

Create a name when you get presented.  After you have created the template, you should see a text editor that will allow you to add in HTML and CSS.  In here you can add in any HTML that you want.

umbraco_templates_editing_html

The HTML looks like this:

@inherits UmbracoTemplatePage
@{
Layout = null;
}
<html>
<head>
</head>
<body>Text
</body>
</html>

When you create a template, a matching view will be created, in the ‘Views’ folder in your websites webroot.

umbraco_templates_views_created

The view name will be named after the alias you set in the templates properties:

umbraco_templates_alias

Assigning A Template To A Document Type

So, now we have a very basic template defined in Umbraco, the next step is to attach it to a ‘Document Type’.  Go to the ‘Document Type’ section, select the document type you want to assign the template to and look in the ‘Info’ type

umbraco_templates_assiging_a_template

In here you have the ‘Allowed Templates’ column.  If you have set your template up correctly then you should see your template in here, select it.  Underneath it, you also have the ‘Default Template’ tab.  The template that is set here is the one that is automatically associated with a page whenever a content editor creates a new one.

If you go to the content section and create a new page using the document type you assigned the template to, then after you publish the page, when you view the page you should see your new template displayed:

umbraco_templates_view

Changing An Existing Pages Template

If you want to change the template on an existing page, go to the ‘Content’ section in the Section menu and select the page you want to update

umbraco_templates_homepage_setting

Navigate to the ‘Properties’ tab and go to the ‘Template’ section at the bottom.  If you have set everything up correctly for your document type, you should see the template you want to select in the ‘Template’ drop down.  After selecting the one you want to, hit the ‘Save and Publish’ button.  Your template should now be ready to be used.

Things to note

        If your view does not get automatically created, you can always go into Visual Studio and create it yourself.  You will know if a view doesn’t exist, as you’ll see an error along the lines of ‘No physical template file was found for template umbTextPage’ when you try and browse the page

No_physical_template_error

        When you create a template in Umbraco, the view that gets created in your webroots View folder will not automatically be attached in your Visual Studio Solution file, so you will manually have to attach it.  In Visual Studio, if you are unable to see it, you need to select ‘Show All Files’ in ‘Solution Explorer’, go to the Views folder click on the view and possibly hit ‘refresh’ in the top solution explorer menu, right-click on the view and select ‘Include in project’ to include it.
        To check if your website is set to run with web forms or MVC, open the umbracoSettings.config file in configs and go to the defaultRenderingEngine setting. You should see something like this:
<templates>
<!-- To switch the default rendering engine to MVC, change this value from WebForms to Mvc -->
<defaultRenderingEngine>Mvc</defaultRenderingEngine>
</templates>

Switch your preference accordingly.

      In my installation, I received this error when I tried to modify an existing sample site template, ‘Sections must only appear once per config file.’  To fix it I had to open a web.config file in the ‘Views’ folder, find the line that was causing the error and delete it.

Conclusion

In today’s guide, we’ve covered how to create Templates with-in Umbraco 7.  In Umbraco, templates are used to display HTML and CSS on the front-end.  You can create templates directly within Umbraco, using the setting section.  After you create a template you can assign it to any document type you want.  A document type can be associated to as many templates as you want, so content editors don’t have to be limited to a single view when they create content.

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

0 replies

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 *