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.
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.
[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 options available. After creating the class, if you compile and run the code a section will be created, however, it will not show up automatically!
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. 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.
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"?>
<key alias="customsecton">Custom Secton</key>
Now, when you reload the backend you should see a nice friendly Url :)
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. If you want to display a custom MVC view within the backend, then I suggest you read, How To Display an MVC View In The Umbraco Backend.
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