Create new custom section

Questions
1

I am trying to add a new custom section to Umbraco v15, with the code in a separate (backoffice) project to the actual Umbraco v15 site. Because I eventually want it to be an installable Nuget package.

I can get the basic new section to work / appear if I add the following umbraco-package.json file in my folder in App_Plugins in the Umbraco v15 website project:

{
  "name": "My Section",
  "version": "1.0.0",
  "extensions": [
    {
      "type": "section",
      "alias": "mySectionDashboard",
      "name": "My Section",
      "meta": {
        "label": "My Section",
        "pathname": "my-section"
      }
    }
  ]
}

However, if I move it to the “backoffice” project, it doesn’t work. I have referenced the backoffice project in the main Umbraco project. I have set the JSON file to “always copy”.

I have tried to work through this but the instructions are not clear and I can’t get it to work.

And tried to use but again it didn’t seem to work.

The key thing is that I need the backoffice (section, etc) code to ALL be in a separate project, so it can be turned into a Nuget package.

Can anyone help me get at least the basics of a new section working?

2

For your specific issue I suspect you want Razor Class Libraries. This is a way to package resources into your DLL and access them via a URL. There’s a really nice tutorial that explains how to get started with them for Umbraco packages.

Not sure if you’ve found these; but you should check out the opinionated starter kit - it contains a great starting point for packages.

There’s also the official extension template to explore!

3

in your .proj file where your custom dashboard resides add the following:

<StaticWebAssetBasePath>App_Plugins/MyPluginName</StaticWebAssetBasePath>

so it ‘knows’ where your custom files should be mapped to.

4

The most important things:

  • Make sure your project is razor class library (in your project file the first line should be:
    <Project Sdk="Microsoft.NET.Sdk.Razor">
  • Make sure your files are in wwwroot/App_Plugins/your_package. This way, they will always be included, because wwwroot is by default included in RCLs
  • I personally always set the StaticWebAssetBasePath to just the root:
    <StaticWebAssetBasePath>/</StaticWebAssetBasePath>
5

Thank for the links. Interestingly, none of my Goole searching or use of AI tools found them for me :person_shrugging:

6

Hi Luuk, thank you - that has got me to the point of my dummy new section appearing in the list of sections.

Now I just need to actually build all of the rest of it :slight_smile:

7

I recently gave a presentation to our developers about Umbraco 15 development. Maybe you already know, but it doesn’t hurt to repeat the entities you need (because it’s sometimes a bit hard to find out how everything works together):

First you need a section sidebar.

image
image1000×675 10.3 KB

In a section sidebar you place sidebar apps. In reality, this will in most cases contain a Menu Sidebar Apps.

image
image999×675 12.8 KB

The menu sidebar app can contain one or more menu items.

image
image909×456 57.9 KB

8

Thanks for that. Unfortunately I am currently finding the Umbraco documentation very hard to follow / understand, plus I have not done much backoffice development prior to the new version / method.

So, I think it’s going to be quite a steep learning curve!

9

Yeah it is, that’s why I posted links to the appropriate pages. What also REALLY helps is to clone the Umbraco GitHub repository and have it open when you are developing. That makes it easier to find examples. Also the source code for uSync is a good place to look into. More than once I was wondering how uSync did it :stuck_out_tongue: