Part 1: Adding a blank custom section

Umbraco by default lists each of the sections in the administration panel (Content, Users, Media etc . . .) from the umbracoApp database table that is created automatically when Umbraco is installed. The following shows the umbracoApp table in versions 3 and 4:

The umbracoApp table

Umbraco 3: umbracoApp table
Click to enlarge . . .

Umbraco 4: umbracoApp table
Click to enlarge . . .

The highlighted sections in the images above show the records I have manually inserted into SQL Management Studio. Heres a quick explaination of each of the fields so you know what to do when inserting your own section:

• sortOrder: The order in which the icons are displayed in the Umbraco Admin.
• appAlias: A unique identifier to allow Umbraco to distinguish between the different sections. Must be unique to the other secitons in the table.
• appIcon: The appIcon field is used to determine what image to display in the Umbraco admin. Umbraco 3 and Umbraco 4 use this field in two separate ways:
  • Umbraco 3: In Umbraco 3 the appIcon field is used to store an image filename that can be retrieved from a specific folder (\umbraco\images\tray\umbraco\). For example: customSection.jpg.
  • Umbraco 4: In Umbraco 4 the appIcon field is used to store the name of a CSS class which loads the image from a single image which holds all the icons. For example: .customSection.
• appName: This is a simple text field that holds the name of the section.
• appInitWithTreeAlias: This field is not used in this tutorial and should be left at NULL

After creating a new record in the umbracoApp table (take note of the appAlias for this section) we must now add an entry into the umbracoAppTree table. This will place a top level node onto the navigation tree in the custom section.

The umbracoAppTree table

Umbraco 3: umbracoAppTree table
Click to enlarge . . .

Umbraco 4: umbracoAppTree table
Click to enlarge . . .

The highlighted sections in the images above show the records I have manually inserted into SQL Management Studio. Heres a quick explaination of each of the fields so you know what to do when inserting your own tree node:

• treeSilent: This determines if the tree node is shown on the navigations tree in the Umbraco Admin. This should be set to False.
• treeInitalize: This field determines wether the node is initialised when the tree is rendered or if it is used for other navigation purposes, but for tree nodes such as in this example it is set to True (the scope of this tutorial doesn't cover using this feature for anything other than simple node viewing).
• treeSortOrder: The order in which the tree nodes are displayed in the Navigation panel.
• appAlias: The appAlias refers to the Section which this node will be under as taken from the umbracoApp table
• treeAlias: A unique identifier to allow Umbraco to distinguish between the different tree nodes. Must be unique to the other nodes in the table
• treeTitle: This is a simple text field that holds the name of the tree node.
• treeIconClosed & treeIconOpen: these fields relates to the icon representing the node on the navigation panel
  • Umbraco 3: In Umbraco 3 the treeIconClosed & treeIconOpen fields are used to store the image filenames that can be retrieved from a specific folder (\umbraco\images\tree\umbraco\). For example: folder.jpg and folder_o.jpg.
  • Umbraco 4: In Umbraco 4 the treeIconClosed & treeIconOpen fields are used to store the name of the CSS classes which loads the images from a single image which holds all the icons. For example: .sprTreeFolder and .sprTreeFolder_o. Note that the Umbraco 4 table can also handle direct images as well.
• treeHandlerAssembly: This field holds the name of the Assembly (or DLL in this case) that the sub nodes of the current node will be loaded. We will revisit this field in Part 3 (Coming Soon) when we create our own Assembly Library to create our own menu. For the moment it can be populated with 'umbraco'.
• treeHandlerType: This field holds the name of the type/method used in the DLL that populates the menu. Again we will revisit this field in Part 3 (Coming Soon). For the moment this field can be populated with one of the other treeHandlerType fields.
• action: This field is used to call a function when the node is selected. For this tutorial it will remain at NULL

After entering a new record into the umbracoTreeApp table the next step is to give the Umbraco administrator access to the new section. There are two ways of performing this task:

1. Allow the Umbraco Administrator access to use this section under the umbracoUser2App table using the custom sections appAlias or
2. The Administrator could be given access from the 'Users' section in the Umbraco admin as shown in the image on the right. (Recommended)

Once the appropriate users (Administrator in this case) has been given access to the custom section the 'Sections' panel contains a new listed item. Since we have not configured the images or the CSS for the custom section it will either show as an image error or partial image depending on which Umbraco version and browser you are using.

End of Part 1

OK, thats the end of Part 1 of the Umbraco Custom Sections Tutorial. The next tutorial post invloves adding the images and editing the CSS for the custom section's icon.

I hope this tutorial has helped and please feel free to contact me or leave a comment with any questions regarding the tutorial.

Part 2: Image Icons and CSS »

« Return Umbraco Custom Section Tutorial Menu