How To Create a custom section in Umbraco 7

Customising the Umbraco back-end may be necessary on a lot of projects, maybe the client has a back-end service they need to integrate, or, requires some custom business logic.  In most circumstances to achieve this, you will need to create a custom section in order to display the relevant data to the user.  Adding a custom section is relatively easy, but, the process does have a few surprises in store.  In today’s tutorial, I will cover everything you need to do to get a custom section to appear in Umbraco.

IApplication

My preferred way of creating a section is via C# code.  This way we can write unit tests for the class.  In order to create a custom section, you will need to create a new class that inherits from the IApplication interface.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using umbraco.businesslogic;
using umbraco.interfaces;
namespace JonDJones.BusinessLayer.Sections
{
[Application("customsecton", "CustomSection", "icon-wrench", 1)]
public class CustomSection : IApplication
{
}
}

In the code above, I have created a class (called anything you want) and decorated it with the Application attribute.  The application attribute expects 4 parameters, the application alias, name, icon and sort order.  I would suggest not adding spaces in the name as it can complicate things.  Also, if you want to change the icon type, have a look here for some of the inbuilt option available.

After creating the class, if you compile and run the code a section will be created, however, it will not show up automatically!

User Permissions

After you create a new section you need to enable your Umbraco and use the correct permissions in order to get it to display in Umbraco.

In the Umbraco back-end, navigate to the user section

umbraco_custom_section

Click on the user account you want to add the section to and scroll to the sections area.  You should see your custom section listed in there, enable the tickbox and reload the back-end.

umbraco_custom_section_render

Display Name

If you look at your section, you may notice the display text looks a bit odd.  In order to correct that we will need to add some configurations of the section to tell Umbraco what to display.  In your solution, if you look in the Config -> Langs folder you should see a list of XML files for different languages. In my case, I’m using the UK language file.

In there I added the sections element to define the name I want to display

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<language>
<area alias="sections">
<key alias="customsecton">Custom Secton</key>
</area>
</language>

Now, when you reload the backend you should see a nice friendly Url 🙂

Conclusion

In today’s guide, we’ve talked a bit about custom sections and how to create one. Creating a section is pretty simple, we create a class inherit from IApplication and implement the correct properties.  In order for the section to appear, you will need the right user permissions. You will also need to configure the language files if you want to display a friendly name.

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

More Posts

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *