Thursday, December 06, 2007 by Niels Hartvig

In the last tutorial we learned that Document Types are essential in an umbraco implementation - without Document Types, no content can be created. So we learned that creating Document Types is a very easy point and click process and we can add an unlimited number of properties to a Document Type. That means we can build our data model to fit our needs without any limitations and without writing any code - we even get a beautiful UI for our end-users automatically.

We started off by creating a simple Home Page Document Type and added some properties. Now it's time to add a Text Page Document Type and allow Text Pages to be created below our Home Page. We'll create the Text Page Document Type in the Settings section of umbraco using what we learned in the last tutorial. First go to settings:

dec3-settings

Then right-click the Document Types and choose create:

dec3-create

In the pop-up dialog type "Text page" as the name, remember to check the "Create matching template" box and click the "Create" button:

dec6-create

As you can see a new Document Type has been created named "Text Page":

dec6-done

Again we'll want to add a tab and properties to our Document, this time we'll add a tab called "Content" and a property of a Rich text editor type named "Content" with the alias "bodyText". If in doubt consult the previous lesson, but the final result should look like this:

dec6-textpage

Customizing the looks of the Document Types

So far we've learned about adding tabs and properties to a Document Type, but we can also modify the visual appearance of the Document Type in both the Create dialog and in the tree view. It's done on the "Info" tab where we can choose an icon for the tree in the "Icon" dropdown, as well as a thumbnail and a description to be shown in the "Create Dialog". For the textpage we'll choose the "doc.gif" as the icon and "docWithImage.png" as the thumbnail. In the description we'll write "A text page offers a simple way to add content to the website by using a WYSIWYG editor" (or something else if you prefer):

dec6-info

Now remember to click the "Save" icon in the toolbar.

 

Defining the type structure

So now that we got a Home Page type and a Text Page type, we're ready to add site content. The only thing we need to do now, is to allow the "Text Page" type to be created below the "Home Page" type, so that our Authors can start creating content. It's done on the "Structure" tab when editing a Document Type.

So open the "Home Page" Document Type, click on the "Structure" tab and check the box next to "Text Page". As you can see a Document Type can be allowed below itself making it possible to create hierarchies of unlimited depth:

 dec6-structure

Again, remember to save and then edit the "Text Page" Document Type and do the same; allow the "Text Page" Document Type to be created under neath if self, by checking the box next to "Text Page" on the Structure tab.

 

Adding pages to our site

Now that we got our simple yet powerful structure in place, we can finally create our site hierarchy. So head over to the "Content" section, right click the "Home Page" created in the last tutorial and choose Create:

dec6-about

As you can see the Create Dialog uses our Description and Thumbnail we choose and you can even add your own real thumbnail screenshots to this dialog by copying them into the "/umbraco/images/thumbnails" folder, which will give the authors a nice well-known visual metaphor and make the whole backoffice seem much more tailored for them.

Now go create a couple of pages so we'll have something to play with when I'll see you tomorrow for a tutorial on Templates:

dec6-sitemap

If your pages are dimmed in the tree view, it's because they aren't published. You can either right click a Document and choose Publish or click the "Save and Publish" button in the toolbar when editing a Document.

0 comment(s) for “Dec 6: Document Types part II”

    Leave comment:

    Comments are disabled for older posts