In this tutorial, you will learn how to create a custom dashboard and a custom content app within Umbraco V8. Creating bespoke backend screens will give your Umbraco projects that extra dazzle that can really impress clients. Luckily both are easy to set up within Umbraco.

How To Create A Dashboard

A custom dashboard can be used to render a custom screen to a user on a global level within the Umbraco backend. Dashboards are simple to set up. First, create a new class that implements from IDashboard:

Some important things to note:

  • Sections: Sets where the section that the dashboard will appear under within the Umbraco backend. This value can be either Content, Media, Settings, Packages, Users, or, Members.

  • Alias: The name of the dashboard. This is important to remember. You will need to use the alias in order to create a label that the CMS can use when rendering the dashboard shortly. Without this label, the name of the dashboard will not display correctly within the CMS.

  • View: The location of the file that will contain all the HTML required to render the dashboard.

Next, you will need to create the dashboard. This is where you will create your custom screen. To create the dashboard, you can simply create a normal MVC controller with a corresponding view, for example, the code to create a backend controller could look like this:

The thing to note in this snippet is that the base controller is of type UmbracoAuthorizedController. This is important as it will restrict who can access the view. As we are creating custom backend screens we will only want to allow a logged-in Umbraco content editor to view it. Anyone else should see a 401 error message instead.

There are two important things to note when using 'UmbracoAuthorizedController'. First, you will need to register the controller in the routing table. Auto-routing will not happen automatically as it does for normal Umbraco pages. Second, the URL that you will need to use to access the view needs to include umbraco/backoffice/Plugins, otherwise, it will not work. In the example above the correct URL to access the view will be umbraco/backoffice/Plugins/Backend/MyAdmin. An example of how to register a custom route in the routing table is shown below:

You will need to register this component with a composer. More information on how to do that can be found here.

Whenever you create a dashboard you will also need to set a language translation for it. Without doing this, the name of the dashboard will display incorrectly within the backend. To create a language translation, create this folder and file structure within App_Plugins. In this example the structure would look like this, App_Plugins/DASHBOARD_ALIAS/lang/en-US.xml:

The key should map to the dashboard alias. With this file in place, the translation name will be used as the label for the dashboard in the backend. Without this label, the name of the dashboard will be rendered using its alias name, surrounded in brackets, like this, [alias]. Also remember when dealing with dashboards you may want to add, remove or edit existing ones. Using a composer, you can do this easily, using code similar to the example below:

How To Create A Content App

A second way to add a custom screen into the Umbraco backend is via a content app. Content-Apps are used to render custom screens on a page level, rather than on a section level like the custom dashboard example above. Content-Apps can be created using C#, or, by using angular. I am not an angular user, so let us stick to what we can do using C#:

  • Alias: The unique identifier for the app, keep this as a single word

  • Icon: The icon that is rendered on the page level. This value can be one of these

  • Name: The friendly name that will be used in the CMS

  • View: Location to the HTML file on disk

  • Active: Should be obvious!

  • Weight: The display order in the backend

Within App_Plugins/MyContentApp/ create a file called myContentApp.html. The contents of this file will be up to you to define and it will be based on your needs. A basic skeleton could look something like this:

With the content app created, do not forget to register the content app with Umbraco using a composer, like this:

That is the basics of creating a content app, more information can be found here. Remember to leave a comment and tell everyone what backend screens you are planning to build! Happy coding!