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. 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. 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! 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. 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. 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. 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. 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. 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. 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.