Within this tutorial, you will learn how to create an admin panel within the Umbraco v8 backend. There are two main approaches for creating admin panels within Umbraco, AngularJS and C#. I am not interested in learning and debugging AngluarJS, just to write a backend screen for a CMS. You can still build whatever custom screens that you want within Umbraco by sticking to C#, so let us focus on what we all know and love!
To build a custom backend screen we will need a few things, some you will likely know how to build, like a controller, a view model, and a view. The other parts are more Umbraco specific, these things will include a composer and a dashboard. During the application start-up routine, you will need to register the dashboard we will be creating with Umbraco. This will be done using a composer. A composer will allow you to add custom functionality when Umbraco runs without having to manually register anything within the global.ascx. After this dashboard has been registered, it will be displayed whenever a content editor logs into the backend with the correct permissions to view it.
IDashboard
To register a new dashboard within Umbraco, you will need to create a class that implements from Umbraco.Core.Dashboards.IDashboard
IDashboard contains several properties that will allow you to define how it works:
- 'AccessRules' will allow you to set who can access the dashboard. As the backend screen will likely contain some sensitive data, you will need to restrict access to certain users.
- 'Alias' is the dashboard ID that Umbraco will use within the backend
- 'View' defines the location of the controller/view that will process the request.
Let us take a look at the value of the view as some important things are going on here:
The first part of the URL maps to /umbraco/backoffice/. This is key, without this segment the Umbraco security checks will not work correctly. The second part, '/Admin/ContentApproval', will need to map to a controller and an action,m we will create this next!
To create the controller, you will need to create a new class and inherit from UmbracoAuthorizedController. Inheriting from UmbracoAuthorizedController will mean only people who are logged into the back-end will be able to view the page. When we inherit from UmbracoAuthorizedController we will also need to register a new route within the routing table as well. Without doing this Umbraco will throw a 404 whenever it tries to load the dashboard!
In this instance, the dashboard controller does not do anything special. It will execute any custom code you define and load a corresponding view. This means you are free to make your dashboard as simple or complex as you want, the power is totally in your hands! The process of creating a controller for a dashboard is exactly the same as working with any other vanilla MVC controller. In this example, Umbraco will try to find a view within the view folder, within a sub-folder called 'panel.cshtml'. As mentioned the controller will not be accessible by default, you will need to register the route within the route handler. This is done with a component:
The component will need to be registered with a composer (see this tutorial if you get stuck). If everything has been set up correctly, when you look within the backend you should see something similar to this:
This concludes all the steps you need to follow to create a custom dashboard, happy coding!
