FLEXIBLE CONTENT STRUCTURE

Because Umbraco is built on such a loosely coupled design, you, as the administrator and developer, are provided with an endless combination of variations for structuring your site. As a result, thinking about what your sitemap should look like before you dig in is extra important. As a general rule, try to design the first two to three levels of your site before you start building out your document types.

Although the flexibility of Umbraco is great, knowing what level of control you should provide to the site's editors is important. The following sections describe how you can limit and control this structure intimately, providing a user-friendly experience for the end user and a proper setup for search engine optimization (SEO) purposes.

Creating a Document Type

To start, go over the interface used to maintain your document types. Navigate to the Settings section and click the Document Types node in the left pane. If you followed the installation steps outlined in Chapter 1, you should see several document types listed already, as shown in Figure 3-2. Figure 3-3 shows how the document type management section is made up of four tabs. These tabs are located in the right pane when you click a document type under the Document Types node. Table 3-1 provides a description of each tab and field.

FIGURE 3-2

FIGURE 3-3

TABLE 3-1: Document Type Tabs and Fields

Creating a new document type takes just a few steps:

1. Right-click Document Types, and then click the Create menu item.
2. In the Create pop-up dialog that appears, as shown in Figure 3-4, leave the Master Document Type value as None and type in Press Release as the name of your new document type. Leave the Create matching template check box selected, because you use this template in the next chapter to output the content from this document type. This selection simply creates a new blank template in the Templates node, also located in the Settings section.

   FIGURE 3-4

   

3. Click the Create button. The right-hand pane refreshes and you will now see, as described in Table 3-1, the Info tab selected.

   See how the Alias value was automatically concatenated to remove any spaces from the name? This is intentional, because it will be the value used to name these nodes in the XML cache and also how you will target the newly created document type later on in your XSLT and .NET macros.

4. Select the Doc Pic icon in the Icon drop-down menu and choose docWithImage.png as the Thumbnail. Provide a short overview of what this document type does in the Description field.

   Because you elected to create the matching template automatically in step 2, Umbraco pre-selects the Press Release template and sets it up as the default for you.

5. Navigate to the Tabs tab and create a tab called Press Release Details.
6. Save the document type to avoid losing changes.
7. Navigate to the Generic Properties tab and create the properties listed in Table 3-2, as shown in Figure 3-5, clicking the Save icon after creating each property.

TABLE 3-2: Properties for the Press Release Content Type

FIGURE 3-5

Several notes concerning these properties:

• Alias: Umbraco automatically fills in the Alias for you, removing special characters and creating a camel-cased value. If you want your alias to be different than the autogenerated value, feel free to change it.
• Validation: What's with the validation value for the Press Contact Phone? It's a regular expression, and yes, it looks cryptic to say the least. Regular expressions allow you to check strings against a defined pattern. Luckily, Umbraco has a built-in regular expression library for common validations like phone numbers, e-mail addresses, numeric values, currency, and much more. To utilize this feature, simply click on Search for a regular expression. As shown in Figure 3-6, simply use keywords to search for a matching expression and select the one that you need by clicking on the title. Search results are retrieved from www.regexlib.com.
• Hide from Menus?: The alias of the Hide from Menus field is a bit of a special Umbraco property. The name of this property has become a standard in the community and is used in XSLT templates as well.

FIGURE 3-6

Restricting the Type of Content

You have now created a document type with the necessary settings and properties. However, if you tried to add a press release to your site you would see no option to do so yet—other than adding the press release as a new root node to the content tree. Umbraco is set up this way so that various types of content can be restricted as to where it lives within the content tree. This feature is helpful for a number of reasons. The most notable and clear example is in the case of a press release. Chances are that the website you're working on will have different authors for different types of content. In the example here, a PR person may be dedicated to writing press releases. Wouldn't it be nice if you could restrict the type of content that he or she can create? Well now you can.

To complete the example, create a press release container where your PR person can post all the press releases as shown in these steps:

1. Repeat steps 1–3 from the Creating a Document Type section earlier in the chapter to create a new document type, and name it Press Release Area.
2. Leave folder.gif selected for the Icon. Similarly, leave folder.png selected for the Thumbnail.
3. In the Structure tab, select Press Release in the Allowed child nodetypes list.
4. In the Tabs tab, create a tab called Press Contact.
5. In the Generic Properties tab, add the properties in Table 3-3, clicking the Save icon after creating each property.

TABLE 3-3: Press Release Container Document Type

Now you have a contained structure where only the Press Release document type nodes can be created under the Press Release Area, and nothing else. So, when your PR person logs in and sees the Press Releases node in the content tree, all he or she can add are press releases. To finish this setup, you must do one last thing, which is to allow the Press Release Area document type to be created under the Runway Homepage document type (so you can create the container for the PR person to access later). The steps involved in finishing up this setup are as follows:

1. Navigate to the Settings section in the Umbraco backoffice.
2. Expand the Document Types node and click the Runway Homepage document type.
3. Select the Structure tab by clicking it in the top of the right-hand pane.
4. Select Press Release Area document type as shown in Figure 3-7.
5. Save the Runway Homepage document type.

FIGURE 3-7

Using Parent Document Types

Parent document types allow you to share fields among multiple different document types. In fact, the previous exercise could have been structured in this fashion to share the Press Contact Name and Press Contact Phone fields among the Press Release Area and Press Release document types, removing the requirement to re-add the same properties to multiple document types. In that case, however, doing it for two separate document types isn't too difficult. However, this section looks at another case where this functionality makes more sense.

You want to add additional content to your site in the form of events, news, and clients. All of these would have at the very least some page content, and as with other content nodes, you may also want to be able to hide them from the navigation. The Runway Textpage document type already contains these fields, so why not use that as your base?

In the following exercise, you can see how leveraging the power of master document types to create additional ones saves you from duplicating common properties such as the ones covered earlier. Events can consist of many properties, but for the purposes of this example the properties in Table 3-4 will suffice.

TABLE 3-4: Master Document Types

Here are the steps for using master document types:

1. Right-click the Document Types node, and then click the Create menu item.
2. In the resulting Create pop-up dialog, select Runway Textpage in the Master Document Type.

   You cannot change the designation of master document types after the document type has been created. You must delete the document type and start over if you did not mean to assign a master. This is due to the enforced relationship of parent/child properties in the database.

3. Type in Event as the name of your new document type and leave the Create matching template check box selected.
4. Click the Create button to continue. Notice that the tree in the left pane refreshes, and the Runway Textpage has an arrow next to it, indicating that the Event document type was created as a child node, as illustrated in Figure 3-8.
5. Create a new tab called Event Details.
6. Add the properties shown in Table 3-5 to the Event document type, clicking the Save icon after you create each property.

   FIGURE 3-8

   

   The Generic Properties and Tabs tabs provide a reminder saying that you must edit master document type properties on the related master document type itself, as shown in Figure 3-9.

   TABLE 3-5: Properties to add to the Event Document Type

   PROPERTY NAME	PROPERTY DETAILS
   Event Title	Name: Event Title Alias: eventTitle Type: Textstring Tab: Event Details Mandatory: Yes (select) Validation: Leave this value blank for this field. Description: Leave this value blank, as it is obvious what it's for.
   Event Summary	Name: Event Summary Alias: eventSummary Type: Simple Editor Tab: Event Details Mandatory: Yes (select) Validation: Leave this value blank for this field. Description: Leave this value blank, as it is obvious what it' for.
   Event Start Date/Time	Name: Event Start Date/Time Alias: eventStartDateTime Type: Date Picker with Time Tab: Event Details Mandatory: Yes (select) Validation: Leave this value blank for this field. Description: Leave this value blank, as it is obvious what it's for.
   Event End Date/Time	Name: Event End Date/Time Alias: eventEndDateTime Type: Date Picker with Time Tab: Event Details Mandatory: Yes (select) Validation: Leave this value blank for this field. Description: Leave this value blank, as it is obvious what it's for.

   FIGURE 3-9

   

7. Allow the new Event document type as a child node of the Runway Homepage, just like you did with the Press Release Area earlier in this chapter, by navigating to the Runway Homepage document type, clicking the Structure tab, selecting Event, and clicking the Save icon.

So far, this is all theoretical as you have not seen the results of your careful planning and labor. Chapter 8 deals with creating content where all this work will come together. For now, Figure 3-10 shows a preview of what the content editing UI looks like. You can see the Content tab, just like in a Runway Textpage node, and the addition of the Event Details tab and associated fields.

FIGURE 3-10