Nibble

Adding a new/custom section to umbraco, sample project

Simon Justesen, has a great post describing how to add new sections and trees inside umbraco (part 1, part 2).

To make it easier to get started, I thought I would provide some starter sourcecode for a demo custom section.

You can download the sourcecode here

Steps to get this running on your umbraco installation:

- Copy the assembly (CustomUmbracoSection.dll) to the \bin directory

- Copy the file custom.gif to \umbraco\images\tray\ directory

- Make a ‘custom’ directory in \umbraco and copy the editCustom.aspx page to \umbraco\custom directory

- Insert a new row in the umbracoApp table

INSERT INTO [umbracoApp]
           ([sortOrder]
           ,[appAlias]
           ,[appIcon]
           ,[appName])
     VALUES
           (9
           ,‘custom’
           ,‘custom.gif’
           ,‘custom’)

- Insert a new row in to umbracoAppTree table

INSERT INTO [umbracoAppTree]
           ([treeSilent]
           ,[treeInitialize]
           ,[treeSortOrder]
           ,[appAlias]
           ,[treeAlias]
           ,[treeTitle]
           ,[treeIconClosed]
           ,[treeIconOpen]
           ,[treeHandlerAssembly]
           ,[treeHandlerType])
     VALUES
           (0
           ,1
           ,0
           ,‘custom’
           ,‘custom’
           ,‘custom’
           ,‘.sprTreeFolder’
           ,‘.sprTreeFolder_o’
           ,‘CustomUmbracoSection’
           ,‘Trees.LoadCustomTree’)

- Update the \umbraco\config\create\UI.xml file, add:

  <nodeType alias=”initcustom”>
      <header>Custom</header>
      <usercontrol>/create/simple.ascx</usercontrol>
      <tasks>
        <create assembly=”CustomUmbracoSection” type=”Tasks.CustomTasks” />
        <delete assembly=”CustomUmbracoSection” type=”Tasks.CustomTasks” />
      </tasks>
  </nodeType>

After these steps are completed you will have to enable the new section for your user.

image

Then it should show up as the last icon in the sections (called custom, with a HAL’s camera eye icon).

image

In the custom section you’ll find this:

image

So just a sample node that will open a demo edit page.

9 Comments so far

  1. Rasmus on March 8th, 2010

    Perfekt!
    Thanks for a great head start.
    I had to insert a row into the umbracoUser2app table to get it working - but now i’m flying

  2. Greg on January 11th, 2011

    I can’t get this to work I’m afraid. :(
    I’m using umbraco 4.5.2. My custom area is not added to the UI and if it put breakpoints in my CustomTasks and Tree classes, none of them are hit.

    Is there more documentation on this functionality anywhere?

  3. dolberdinho on October 19th, 2011

    Hmm, I just bought a umbraco webTV subscription hoping to get this to work… I did find the solution to my problem in the video, so I thought I’d share…

    I followed the tutorial here but the “custom” node just didn’t appear among the “sections” nodes for my admin user. The trick, as explained in the video, is to force a cache rebuild as the umbracoApp table is cached by umbraco. The way you update the cache is simply to update the timestamp for the web.config, so open the web.config and save it… and voila, the “custom” node appears :-)

    Also, remember to add the section to the needed language files, see e.g. http://www.geckonewmedia.com/blog/2009/8/3/how-to-create-a-custom-section-in-umbraco-4

    BTW: using umbraco 4.7

  4. Jacob Santiago on November 7th, 2011

    I have followed the tutorial but the custom section is not appearing for me. i have cleared the cache and tried but still its not coming. I also noticed that there are some more entries other than default sections in “umbracoApp” and “[umbracoAppTree]” table, those are also not appeared. Please guide me to get this working for me.. Thanks.

  5. Giuseppe on January 10th, 2012

    Guys, the links of part1 and part2 not worked!!! Page not found :( Any idea where are the posts now?
    Thanks

  6. Qing on August 2nd, 2012

    I like your posts
    Helped me a lot.

  7. mostafa on May 13th, 2013

    note:
    in version 4.11.8 there isn’t ‘umbracoApp’ and ‘umbracoAppTree’ tables, you must do changes in ‘trees.config’ and ‘applications.config’.

  8. Jose on May 24th, 2013

    This is outdated, Where to find updated information?

  9. vishal on May 8th, 2014

    thanks for great post on umbraco!!!!!!!!!!
    Can you explain umbraco 7.1 with crud operation with new table in admin side with new section?

Leave a Reply