Building first Umbraco 5 website: Nodes

The post you are reading now is a second in a series of four blog posts describing my experience with creating a relatively simple Umbraco 5-based website for a made-up coffee shop.
  1. Building first Umbraco 5 website: Document Types
  2. Building first Umbraco 5 website: Nodes
  3. Building first Umbraco 5 website: Templates
  4. Building first Umbraco 5 website: Partials

The posts are written in a form of beginners’ tutorial and will take you through all the steps necessary for creating the website.

Disclaimer: However, please keep in mind that I am in no way an expert or professional in the field. Therefore I submit to you a description of a learning process rather than an expert tutorial and I ask you to read it as such. More than that, I encourage you to commen,t to point out mistakes or suggest better practices.

So let’s get on with it. In the first post I:

  1. Explained the concept of document types
  2. Analyzed my website from the perspective of document types
  3. Created document types necessary for the website

In this post I will show how one goes about creating pages in Umbraco 5 and filling them in with content.

Step 1: Nodes in Theory

Nodes are elements in your content structure. Most often 1 node equals 1 page but they can also be pieces of content that will be rendered on their parent pages.

To create a node:

  1. Go to back-office
  2. Choose Content from the bottom menu
  3. Right click on the Content in the website structure tree
  4. Click Create
  5. Enter the name and choose document type from the dropdown menu

Creating Nodes in Umbraco 5

When you create the first node, you will have the chance to choose from all previously created document types. But when you create child nodes only document types allowed as children of the parent node will appear in the dropdown.

For example you may recall that Menu document type allowed only child pages of the Menu Section type. Therefore when you try to create a child node you will only be given one choice.

Choosing document type in Umbraco 5

To create child nodes right click on the node you want to be the parent, choose create and the rest of the process is the same.

Once you hit Next you will be taken to the node editing tabs.

The node editing tabs section looks different depending on the document type of the node. For example you might remember that when we created Text Page document type we created two tabs: content and sidebar. We also placed several properties in each of the tabs. Here is how this looks once you create a node with Text Page document type:

Example Node in Umbraco 5

You can see that the tabs you created in document type section become actual tabs in the content section. And properties become input fields (or content/media pickers).

An important tab is the General Properties tab. It is a default tab that contains all meta information about this node. You can always add properties to it, but most of the time it makes more sense to organize your content input fields on separate tabs.

General Properties Tab in Umbraco 5

The particularly interesting field on this tab is the Selected Template dropdown. If your document type allows more than one template you will be able to change it here. Templates are the files containing Html (and possibly some Razor syntax) that govern the display of content and I will write about them in the next post.

The default value here is the template you’ve selected as default for this document type.

Once you change something or fill in some content remember to click on the blue floppy disk on the left side of the top menu to save your changes.

If you have just created a node you will notice that its name in the website content structure window is in gray.

Unpublished Node in Umbraco 5

The reason for this is that the node is not published yet and cannot be accessed through a link. To publish a node, click on the floppy disk and globe icon. Now the name is in black and in the general properties tab you will be able to see the direct link to this node.

Published Node in Umbraco 5

Step 2: Nodes in Practice

Before we will go ahead and create any nodes, we should start with uploading a few images to Umbraco media library so that we can use them as content.

  1. From the bottom menu choose Media
  2. Right click on Media and choose create
  3. Fill in the name and choose image from the dropdown
  4. Upload file
  5. Remember to publish the image by clicking on the floppy disc and globe icon

For the purpose of this tutorial you will need at least one image but the more the merrier.

Now that we know how to create nodes and we have media prepared, we can try this knowledge in practice and create nodes for our website. As you go along with the steps below, enter some content into each of the nodes.

Content Tree in Umbraco 5

You can look back to the previous post to see what document types we created for different pages in our website but I will also repeat it quickly here.

  1. Home node is of type Text Page. It is created as a child of Content and that means that it will be the default page that visitors of the page see when they enter your URL. All other nodes have to be descendants of the Home node.
  2. Events is also Text Page
  3. Baking Workshop, Poetry Reading etc. are of course pages for particular events. They are therefore child nodes for Events node and are of the type Event. You can create as many or as few of these as you wish (but for the purpose of this tutorial it would be best to have at least 3). The names don’t matter either.
  4. Menu is of the type Menu. It does not have any content fields to fill in because it will serve us as a content container. You will learn how to use it in the following posts.
  5. Food, Drink, Desserts etc. are of Menu Section document type and are child nodes of Menu. Feel free to create as many of them as you wish but make sure to have at least 3 (for the purpose of the tutorial)
  6. In each of the Menu Section you can now create child nodes of the type Menu Item. And again it is up to you how many items will there be in every Menu Section.

Menu Sections and Menu Items are separate nodes just like Home or Events. But they will not become separate pages on your website. They will be chunks of content that we will display when user visits the Menu page.

Now that you have created the node structure, remember to fill all the nodes with content and publish them.

At this point you might have tried to navigate to your website in a browser and discovered that the website is completely empty despite the fact that you typed in some content and published the pages. This is because we haven’t actually told the templates to display anything and so they display empty Html documents. In the next post in this series I will discuss how to make templates display your content so stay tuned for that.

5 thoughts on “Building first Umbraco 5 website: Nodes

  1. Pingback: InaBox Design Blog : First website with Umbraco 5: Document Types | InaBox Design Blog

  2. Christian Palm

    Great post and thanks for sharing your experience.

    Should’t you call node a document? (maybe you are confusing newbies)
    I think the term node is a leftover from Umbraco 4, where published Documents are called nodes.

    Reply
    1. Inabox Post author

      Hey Christian,

      Thanks for your comment. I might very well be mixing things up. I was taught that they are nodes. Are they called Documents now? I’ll look into it but for the sake of consistency I will keep calling them “nodes” in the reminding two posts.

      Maria

      Reply
  3. Pingback: InaBox Design Blog : Building first Umbraco 5 website: Templates | InaBox Design Blog

  4. Tim

    Hi Maria,

    Really appreciate the tutorial! I started using Umbraco yesterday and found your blog through searching for child templates in Umbraco 5: just about to read your post…

    Keep it up!
    Tim

    @candygram4mungo

    Reply

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>