The Umbraco backoffice is built using AngularJS. The implementation is made up of many directives and services.

Generally, you can find information about these via the Backoffice UI API documentation. This part of the documentation is auto-generated from the Umbraco source code.

Below you can find more in-depth descriptions and examples of AngularJS directives and services.

Directives

• Layout selector (<umbLayoutSelector />)

• Load indicator (<umbLoadIndicator />)

• Property (<umbProperty />)

Services

• Editor service

• Events service

• Service for opening and working with editors and overlays.

• Service for listening and sending broadcasts.

The umb-property directive can along with umb-property-editor be used for rendering property editors in the backoffice.

The two directives are typically used together. For instance, if your Angular model has an array of properties, your view could look something like:

<umb-property property="property" ng-repeat="property in properties">
    <umb-property-editor model="property"></umb-property-editor>
</umb-property>

Properties contains the model for each property. ng-repeat can be used to iterate over each property, passing them to the two directives via property and model attributes.

For a basic property with a textbox, the model for the property can be defined as:

var property = {
    alias: "myProperty",
    label: "My property",
    description: "This is my property.",
    value: "Cupcake ipsum dolor sit amet oat cake marzipan...",
    view: "textbox"
};

The view property specifies the URL to the property editor that should be used for this property. To use one of the built-in property editors in Umbraco, you can specify the alias (eg. textbox) rather than the full URL to the view (eg. /umbraco/Views/propertyeditors/textbox/textbox.html).

You can see a list of all the built-in property editors in the propertyeditors folder on GitHub.

• Layout selector (<umbLayoutSelector />)

• Load indicator (<umbLoadIndicator />)

• Property (<umbProperty />)

Many web sites and web applications use a form of load indicator to indicate a busy state to the user. Throughout the backoffice, Umbraco uses three animated circles as a load indicator - eg. as shown below:

Umbraco internally does this via the <umb-load-indicator /> directive, which you can also use in your own views for the backoffice.

• <umbLoadIndicator /> in the API documentation

• <umbLoadIndicator /> source code on GitHub

The directive doesn't have any parameters on it's own. Since you most likely only wish to show the load indicator during certain states of your code, you can control this either through ng-if or ng-show.

For instance if your controller sets the loading variable to true during busy states:

<umb-load-indicator ng-if="vm.loading"></umb-load-indicator>

The directive uses CSS and absolute position to center it self in. For instance, if you're also using the <umb-box-content /> directive, you can set it's position to relative:

<umb-box>
    <umb-box-content style="height: 250px; position: relative;">
        <umb-load-indicator />
    </umb-box-content>
</umb-box>

As seen on the animation in the beginning of this page, the load indicator is centered in the white box.

When you have a list of items, you can use the umb-layout-selector directive to let users toggle between different layouts. For instance, in Umbraco's media archive, users can select between a grid-based layout (thumbnails) and a list-based layout (table).

The directive has three attributes:

• layouts is used to indicate the available layouts that the user should be able to select.

• active-layout is a reference to the layout currently being used.

• on-layout-select is a callback function triggered when the user chooses another layout.

For a view utilizing this directive:

• The HTML could look something like this:

  Copy

  <div ng-controller="myController">
      <umb-layout-selector layouts="layouts"
                          active-layout="activeLayout"
                          on-layout-select="selectLayout(layout)">
      </umb-layout-selector>
  </div>

• You'd also need a controller for initializing the different values to be used for the directive:

  Copy

  angular.module("umbraco").controller("myController", function ($scope) {
  
      // Declare the available layouts
      $scope.layouts = [
          {
              name: "Grid",
              icon: "icon-thumbnails-small",
              path: "gridpath",
              selected : true
          },
          {
              name: "List",
              icon: "icon-list",
              path: "listpath",
              selected: true
          }
      ];
  
      // Declare the function called by the directive when user chooses another layout
      $scope.selectLayout = function(layout) {
          $scope.activeLayout = layout;
          $scope.layouts.forEach(element => element.active = false);
          layout.active = true;
      };
  
      // Select the first layout
      $scope.selectLayout($scope.layouts[0]);
  
  });

For each layout:

• name property indicates the visual name of the layout (eg. used when hovering over the layout in the selector)

• icon is the CSS selector for the icon of the layout.

• path attribute indicates a sort of alias, and is used internally for comparing the layouts.

• Each layout should also have a selected property indicating whether a particular layout is enabled, and thereby visible in the selector.

The events service allows different components in Umbraco to broadcast and listen for global events.

Using the events service in your custom code

Broadcasting an event

To broadcast an event, you can use the emit function. It takes two arguments, where the first is the name of the event - eg. featured.updated, and the second argument is an object or similar describing the event.

The second argument is optional, so if your use case doesn't need this, feel free to skip this argument.

The illustrate this function, you could have a controller with an updated function that is triggered by the view. In this dummy example, the function will increment the value of a property editor, and then use the events service to broadcast that the value was updated:

Listening for an event

Another controller could then listen for broadcasts of your feature.updated event via the events service's on function, which takes the name of the event as the first argument, and a callback function as the second argument.

Then in the callback function, the first argument is the event it self, and the second argument is the object we pass on to the emit function when we're broadcasting:

Listening for events globally

Controllers are typically used by a specific component, so the controller will only be executed when such a component is inserted into the DOM. The controller will be executed for each component, so you may end of with multiple instances listening for the same event.

If you need to listen for events on a more global level, you can hook into the application startup using app.run(...):

Unsubscribing from an event

Notice how the result of the on function is saved in an unsubscribe variable. When we add a listener via the on function, it's important to clean up after our selves when our component (here a controller) no longer exists - eg. when removed from the DOM.

In Angular, we can listen for the $destroy event in the current scope, and then unsubscribe from the events service by calling the unsubscribe variable as a function.

Alternatively, we could replace unsubscribe() with eventsService.unsubscribe(unsubscribe), but it does the same thing - so calling the variable as a function directly may be preferred as it's shorter.

Events in Umbraco

Below you'll find a list of events broadcasted by the Umbraco codebase. The list may not be complete, so please help updating the list should you find an event that isn't listed.

Umbraco application

Init

When the Umbraco application is ready

Security interceptor

When Umbraco our your custom code makes a request to the server via the $http service, Umbraco listens for the x-umb-user-modified header in the response. In can be used to tell the Umbraco backoffice that the current user has been modified, in which case Umbraco knows that it should refetch the user data.

Services

Clipboard service

When the clipboard in local storage is updated

Editor service

When an editor is opened

When an editor is closed

When all editors are closed

Editor State service

Localization service

When the language resource file is loaded from the server

Overlay service

When an overlay is opened

When an overlay is closed

TinyMCE service

When upload of a file starts

When upload of a file ends

When the user presses CTRL + S

Tours

When tours are loaded

When user starts a tour

When user ends a tour

When a tour is disabled

When user completes a tour

Tree service

When loading a tree node fails

When a tree node is removed

User service

When the user is logged out

When user is trying to log in, but have not start nodes

When user is successfully authenticated

When user data is refetched from the server

Util service

When the app is initialized

Directives

Toggle directive

When the toggle is initialized

When the toggle is clicked

Controllers

Grid controller

When a new row is added

When a new control is added

When the grid is initializing

When the grid is initialized

Languages overview controller

When a language is deleted

Other

Setting the page title

Available from 8.4.0

The Angular editorService service is the primary resource used for opening overlays and handling infinite editing. Besides the open and close functions, the service also contains functions for opening specialized overlays/editors - eg. contentPicker or mediaPicker.

Content Picker

The contentPicker function opens a Content Picker in infinite editing. Depending on the options, it may be used for picking a single content item or a set of content items. Options for the function is as following:

The Content Picker could be opened as:

This example snippet will open a new Multi Content Picker. If the user submits one or more content items, the name of each content item will be printed to the console. The user may also close the Content Picker without selecting any content items, in which case the close callback function is invoked.

Document Type Editor

The documentTypeEditor function of the editor service can be used for opening a new overlay for creating a new Document Type. It can also be used for editing an existing Document Type.

The function supports the following options:

An overlay for creating a new Document Type may be opened as:

Notice that both the id and create options must be specified. When the overlay submits, you'll be able to get the alias of the created Document Type through model.documentTypeAlias.

Opening an overlay for editing an existing Document Type can be opened as:

Setting the title of the page the user is working on is important for accessibility purposes. People using assistive technology need to know what they are maintaining. By setting the page title, people who work with multiple tabs will also find the page they were working on.

To use the directive call:

When the user navigates through the site there is some logic which sets the default page title this is based on:

• The current section the user is in

• The deployment environment

The original title of the page is based on the section being edited and the host name.

The title to use will then be prefixed to the original title of the page.

To remove the title displayed and revert to the default title, pass in an empty string.