Building an Umbraco 7 backoffice extension – Part I

Umbraco (https://umbraco.com/) is a lean and powerful CMS built on top of current .NET technologies and Javascript frameworks. It provides developers with a varied and simple to use collection of APIs, it is easy to customize and doesn’t get in the way between the coded markup and the HTML that is actually rendered.

The next series of posts will show how to build plugins that extend the default Umbraco backoffice capabilities.

How is it built?

The release of Umbraco’s version 7 presented a completely redesigned backoffice. It went from a  typical MVC website to a single page application built using AngularJS. Umbraco custom WebAPIs are used by Angular controllers in order to read information from the backoffice.

How can we change it?

A typical Umbraco 7 backoffice extension requires:

1. Creation of Angular controllers, views and probably models;
2. Umbraco WebAPI extensions in order to access Umbraco’s backoffice and for custom server side development;
3. Extension of some Umbraco classes to customize common backoffice functionalities.

What to do?

These series of posts will gradually present a way to build a new backoffice section, that will provide content managers with a centralized area where they can approve changes made to content. This backoffice extension was named Approve It. Natively, Umbraco sends an email to each content approver when changes are made to content nodes but, if an approver wants to see what nodes were updated just by visiting the backoffice, he must traverse every node to see which ones present a change waiting approval. This gets harder as the number of content nodes increase, and the changed nodes can be difficult to spot as we can see from the image below:

Preparing the development environment

1. Download the latest and greatest version of Umbraco 7 (currently at v7.3.1): https://our.umbraco.org/contribute/releases/731/ 
2. Download and setup WebMatrix: http://www.microsoft.com/web/webmatrix/
3. Create a new web site in WebMatrix selecting the folder which contains Umbraco’s downloaded .zip file contents and go through the Setup
   1. Select customize
   2. Use a SQL CE database
   3. Choose any starter kit (I chose Txt Starter Kit)
4. Create a new Empty ASP.NET project in Visual Studio (I’m using VS2015) and add folders and core references for MVC

Creating a new backoffice section

Creating a new section in Umbraco is easy:

1. Add references to the following three assemblies available in the bin Umbraco directory:
   • businesslogic.dll
   • interfaces.dll
   • System.Web.Mvc.dll (need to replace the one Visual Studio automatically referenced)
2. Create a new .cs file in the project with the following code:

[Application("approveIt", "ApproveIt", "icon-people", 15)]
public class Section : IApplication
{
}

Simply implementing the IApplication interface, creates a new Umbraco backoffice section with the properties defined above.

The next step is translating the section name. If we don’t translate it, it will show up as [approveIt]. So, we must edit the file \Umbraco\Config\Lang\en.xml (for the UK version), and append the “approveIt” line in the “sections” area:

<area alias="sections">
  <key alias="concierge">Concierge</key>
  <key alias="content">Content</key>
  <key alias="courier">Courier</key>
  <key alias="developer">Developer</key>
  <key alias="installer">Umbraco Configuration Wizard</key>
  <key alias="media">Media</key>
  <key alias="member">Members</key>
  <key alias="newsletters">Newsletters</key>
  <key alias="settings">Settings</key>
  <key alias="statistics">Statistics</key>
  <key alias="translation">Translation</key>
  <key alias="users">Users</key>
  <key alias="help" version="7.0">Help</key>
  <key alias="forms">Forms</key>
  <key alias="analytics">Analytics</key>
  <key alias="approveIt">Approve It</key>
</area>

Note: for the new section to appear you must add it to the available sections your user can see. Furthermore, because of caching, you probably need to restart the website and open a browser window in private mode in order to see the new section.

This is how it looks:

So, we have a new section, but there’s nothing we can do with it. The next post in the series will show how we can add some content to this newly created Umbraco backoffice area.

The Approve It extension can be found here: https://our.umbraco.org/projects/backoffice-extensions/approve-it/. The complete source code can be found here: https://github.com/ViGiLnT/ApproveIt.