Creating custom sections and trees in Umbraco with Angular

Recently Jigital had a go at creating some custom sections and trees in Umbraco. This is a summary of how we achieved it and what you can do to do the same thing yourself!. There may be better approaches, but it works!

Charles Afford Director
Tuesday, 23 May 2023 Less than a minutes read
article-image Creating custom sections and trees in Umbraco with Angular

The App_Plugins folder

Firstly you need to create a folder inside the App_Plugins folder that is going to store all of your code and html to make everything work

The Angular yourname.controller.js

The controller is what you will pass your data to and from.  For example receiving data from an Angular resource which is then passed to a html file.

angular.module("umbraco").controller("YourControllerNameController", function ($scope, yourResourceName) 
var vm = this;
var vm.YourObjectName = "";
var yourVariableName = yourResourceName.getAll().then(function(response) {
        vm.YourObjectName = response;

Here we are adding our controller YourControllerNameController to the umbraco module (so we can use it), defining an anon function,we are then calling a method definied in our resource and setting the response to our object.


The Angular yourname.resource.js

We need to register our resource (where we get data from for example) with the umbraco.resources module

angular.module('umbraco.resources').factory(function($q, $http, umbRequestHelper) 

the .factory is an Angular method which allows you to add some logic to a created object and return the created object

We are then specifing an anon function and the parameters for that function

Inside the function we could go to some c# code

 return { getAll: function () 
     return umbRequestHelper.resourcePromise($http.get("/Umbraco/Api/SomeController/SomeMethod"),"some fail message");

Here we specify a method called getAll that will return the data from our API.

The Angular yourHtmlName.html

This is where you will add your html to style the data you have recieved from your controller.

<div class="welcome-dashboard" ng-controller="YourControllerNameController as vm">

Here we are using the ng-controller directive (which  attaches a controller class to the view)

<div ng-repeat="yourObject in vm.YourObjectName" style="margin-top:30px;">

Here we are iterating over the object returned from the controller (This could be a string or int, but for this example we are assuming an array [])


The Lang Folder & langfolder/yourlanguage.xml

Language files are used to translate the Umbraco backoffice user interface so that end users can use Umbraco in their native language. This is particularly important for content editors who do not speak English.

Language File Documentation

The Package.Manifest

You could think of the package.manifest as the app.config of a .NETCore application

For example we may define the following.  The javascript section is important as this is how the application will know about your .js and .css files you have created above!

  "sections": [
      "alias": "youralias",
      "name": "yourName"

  "dashboards": [
      "alias": "yourDashboardAlias",
      "view": "/App_Plugins/yourFolder/yourDashboardView.html",
      "sections": [ "yourDashboardSectionName" ],
      "weight": -10,
      "access": [
        { "deny": "translator" },
        { "grant": "admin" }
  "javascript": [

  "css": [


Putting this all together

So in the end your folder structure will end up with something like this 


Support Services