Create a custom section in backoffice - Umbraco 9 .Net Core | Part 1

Creating the custom section

The first thing we need to do is go to the "App_Plugins" folder and we will create a new folder inside it called "MyCustomProduct" and then create a "package.manifest" which will handle our configuration and custom views later on.

Register the custom section

To register our custom section there are two ways on how we can handle them.
• via package.manifest
• via c#

In this guide, we will implement it using c# for us to gain more control.

Create a new class called "MyCustomProductSection" that implements "ISection"

using Umbraco.Cms.Core.Sections

namespace Umbraco9.Blog.Backoffice.MyCustomProduct
{
    public class MyCustomProductSection : ISection
    {
       public string Alias => "myCustomProduct";
       public string Name => "My Custom Product";
    }
}

then we need to add this to the composer section pool by creating a new class called "MyCustomProductSectionComposer" that implements "IUserComposer".

using Umbraco.Cms.Core.Composing;
using Umbraco.Cms.Core.DependencyInjection;
using Umbraco.Cms.Core.Sections;

namespace Umbraco9.Blog.Backoffice.MyCustomProduct
{
    public class MyCustomProductSectionComposer : IUserComposer
    {
        public void Compose(IUmbracoBuilder builder)
        {
            builder.Sections().InsertAfter<MediaSection, MyCustomProductSection>();
        }
    }
}

the snippet above will append the "MyCustomProductSection" after the "MediaSection" in the backoffice. then for us to see the custom section that we have implemented we need to assign it to a certain user first by going to the "Users" section and select your account then edit in the "Assign Access" tab. https://bit.ly/3BCSFNT

then add our custom section. https://bit.ly/2Wf8wSt,

after hitting save then refresh the page - we can now see our custom section! https://bit.ly/3zBRgW8

Creating the language translation

If you have noticed that there's a square bracket in our custom section [myCustomProduct] we need to create a language translation for this one.

Under "App_Plugins/MyCustomProduct" create a folder called "lang" and let's create an xml file called "en-us.xml" then copy the snippet below:

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<language alias="en" intName="English (US)" localName="English (US)" lcid="" culture="en-US">
  <area alias="sections">
   <key alias="myCustomProduct">My Custom Product</key>
  </area>
</language>

In the next part, we will create the tree nodes for our custom section, see you!

About the author

Vlael Samuel Layug

PHP Developer
.NET Developer
Umbraco Contributor

Hello. I'm a web developer who specializes in Backend for about 4 years+ and working towards being a Full Stack Developer and Umbraco MVP in the future.

In my free time, I play around with the Umbraco CMS codebase a lot and picking up for grabs in the issue tracker. For me, it's like hitting two birds in one stone. I learn a lot every day and from every pull request that is being merged, it's like my way of giving back to the community and saying thanks to the developers who are maintaining Umbraco.

My vision & fundamentals

I want to make this website that can help fellow Umbracians learn a lot and get jobs.
Also, I want to mention that I've been reading the Umbrajobs blogs before being an author and it helped me a lot! I want to say thanks to them and #H5YR

Follow me on social media

If you're an Umbraco professional, partner, employer, recruiter or a passionate Umbraco community builder then I'm more than happy to hear from you. Follow me on my social media channels and please reach out if you have any needs, want help or consultation with anything Umbraco related or just want a general chat.