How To Add Dynamic Fields And Page Information To An Umbraco Template

This is the fourth article in 'Creating Your First Umbraco Page' series.  So far we've split a very boring HTML page into a master layout, header component, footer component and a homepage template.  So far the page is all hard coded and content editors can't update any of the text.  In today;s guide, we're going to change that and add several properties that will put the power in the content editors hands. Every web page in your websites will have shared data, like a page title for instance, as well as unique properties, like a homepage welcome banner.  This means we need to add global properties to the master template and the unique properties to each individual template. umbraco_add_properties_to_templates_1 To get started, open up the master document type we created in the second tutorial.  If you're just joining now, this process works with any layout, or, template. umbraco_add_properties_to_templates_2 When you load the page you should be presented with a page similar to the above.  This page is the properties builder.  The first thing you can do is create'tabs'.  Each tab that you create here will be a tab the content editors see when they create to try and create a page using the template.  Some standard tabs tat get created on most projects include: Metadata:  A tab to store all your pages meta-data properties, e.g. page title, meta keyword etc.. Settings: A tab for page, related settings, these types of settings could include things like 'include in breadcrumb', 'exclude for search results/do not index', 'exclude from sitemap' etc.. Main: Properties related to a pages main bits of content. The names you want to call your tabs is completely up to you, however, one common mistake I see on a lot of projects is that developers don't spend that much time thinking about names that make sense to the content editors who will be using the site.  If you find yourself in this situation, my advice is to always ask the people who will be using the system, what names and tabs they find best.  In some instances it might not make sense to you, but, in all likelihood, you won't be the person updating content! umbraco_add_properties_to_templates_4 As we want to create a page title, a good tab for this would be 'Metadata'.  In the 'Metadata' tab, you should see a giant 'Add Properties' button as seen above. umbraco_add_properties_to_templates_3   Clicking on 'Add Properties' will open up the 'Property Settings' dialog.  As we want to create a property for the page title, we add the appropriate title and description.  Since every page needs a title we also need to tick the 'Field is mandatory' checkbox. umbraco_add_properties_to_templates_5 Lastly, we need to define the type of element the content editor can use to enter in the data, this is done by clicking the 'Add editor' link.  Clicking on this will load the dialog above.  For a page title, we only need a string to represent the page name, but we could use rich-text, a date, an image etc.. you can even create and add custom ones you build yourself, but, that's definitely something for a later date. umbraco_add_properties_to_templates_6 After defining the page property, click the 'Save' button, in the bottom left-hand side.  Now we have a property defined, the next step is to render it within a template. umbraco_add_properties_to_templates_7 Open your 'master' template and in my example, I replace the tex within the <title> tag with this:

<pre><code>@Umbraco.Field("pageTitle")

Obviously, the field name needs to match the property we created.  After saving the template with your latest changes, it's time to go and test it. umbraco_add_properties_to_templates_8 In the 'content' section, open your 'homepage' and you should now see a tab called 'metadata' with a property called 'page title'.  Add some text, mines called 'Jons website', original I know :P.  Save and publish your change. umbraco_add_properties_to_templates_9 When we browse the website and do a view source, we should see the page title being dynamically populated!  Following on from this process you can now add properties to your master layout, or page template.  In the next lesson, I'll focus on creating a dynamic menu.  


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


Back to top