Over the next couple of days, I'll go through some of the essential umbraco concepts:
- Document Types
- Templates
- Macros
umbraco is a bit different from other CMS's as it's more generic and not based on modules. While a module based system might give you some functionality very fast, it's very doubtful that it's actually the functionality you really need and whether you can tailor it to your needs is often a combination of luck and hacking.
umbraco works in another way as it provides a uniformed way to create web based functionality. It's a bit like a toolbox or a collection of Lego bricks which doesn't do anything straight out of the box, but gives you access to loads of things very fast and with just enough flexibility. If we stick to the Lego analogy you could say that
- The .NET Framework is Lego Technic. Anything is possible, but it can also be hard to start and very time consuming. At the same time you almost don't have any constrains at all which might make it hard to focus
- A module based CMS is Lego Duplo. This is the complete opposite of Technic - if you need a car, take the Car brick, if you need a plane, well go get the plane. Which is brilliant if it does exactly what you want - you're up and running in no time. But if you need customizing however, you might ended in a blind alley and if there's no brick that does the job - just too bad, the choice is down to convincing someone to build that brick.
- With umbraco we're trying to be just plain old ordinary Lego. Making most things possible with a well defined set of standard building bricks. The trick for living and working happily with umbraco is to know and understand those bricks. If you try to use umbraco like a module based CMS, you'll hit the wall sooner or later and you might even end frustrated. So it might take a little while to learn, but it'll be worth the effort. If you're one of those who still lives in the last century and believes that comparing CMS by module charts is the right path, then you'll need to open your mind in this tutorial. In return you'll have a chance for an eye opener that will change the way you work and never want to make you look back :-)
BEFORE YOU START:
This tutorial assumes that you have a completely clean install of umbraco without any starter kits installed. To see a large edition of the screendumps used in this tutorial, simply click them.
What is a Document Type
A document type is one of the three essential bricks necessary to get a site up and running. Without a Document Type, you can't create content. See, a Document Type is a bit like having a table in a database - it defines the fields that can be edited on a page. Well, in fact it can be even more generic and flexible than this, but for now we'll treat Documents as pages. Later on I'll show you how to treat Documents as true objects for maximum flexibility.
Let's create our first Document Type and examine the way Document Types are edited. Go to the "Settings" section and Right Click "Document Types" and choose Create:
In the dialog box give your Document Type a name - say "Home Page" and also check the box saying "Create Matching Template" and click the Create button:
Congratulations, you've just created your first Document Type - it wasn't that hard was it?
Now, go to the content section, right click the content node and choose Create. As you can see we now have the choice of your newly created "Home Page" Document Type. So go ahead and create your first Document:
When you click create, a new Document is created and you're instantly in editing mode. If you look at the Document in the tree, it's dimmed because it's not published.
As you can see, there's not much we can edit on our "Home Page" document type apart from a couple of standard meta data fields like the name of the Document and some release/expire date information. Time to add some Tabs and some "Generic Properties".
Document Properties
Now that the Document Type has been created, it's time to add some Tabs and Generic Properties so we have some editable fields on our Document. A property is very similar to a column in a table, but when you add columns to tables you usually think in types of data like "dates", "nvarchar" or "blob". With properties in umbraco, you should think how an editor would edit the property - like a "Rich text Editor", "An upload field" or "Date chooser".
It's very easy to add, remove and sort properties on a Document Type as there's a full web based ui. No editing of config files and no lines of code needed. To make it even easier for the user to edit properties we have the option of dividing them into separate tabs. So we'll start by adding some tabs called "Content" and "Meta data". Go to Settings, open your "Home Page" Document Type and click the "Tabs" tab. Then type "Content" in the textbox and click the "New Tab" button. Do the same for the meta data tab:
Now that we got the tabs, we can add some properties. Click the "Generic Properties" tab and then click the "Click here to add a new property" label:
In the form that opens, start by adding "Content" as the name and "bodyText" as the alias. Next we'll have to select a type. Now the type is the way the editor should edit our property and umbraco ships with twenty different types from Date Choosers a Richtext Editor:
For this property we'll use the "Rich text editor" which gives us a full WYSIWYG editor that makes it easy to edit content while ensuring that the markup is valid XHTML Strict - quite a nice combo for both editors and developers who appreciate web standards. In the tab combo, choose "Content" and then click the Save icon in the toolbar.
Repeat the step above to create a "Textstring" on the tab "Meta data" with the name "Site name" and the alias "sitename" and a "Textbox multiple" on the tab "Meta data" with the name "Description" and the alias "description". Remember to save in between by clicking the little save icon in the toolbar.
Now you should have a screen looking like this:
Go back to your content and try to edit your Home Page. As you can see we have our two tabs and a completely integrated WYSIWYG editor for our disposal:
Try clicking the different tabs and add values. As you can see it's really easy to create Document Types and adding fields and your editors will love the simple user-friendly interface.
Tomorrow we'll add some additional Document Types and see how they can be linked together to create a site hierarchy.
Hoped you liked it so far and remember to add comments below if you like.