Customize Backoffice

Get started with the New Backoffice in Umbraco 14.

Overview

"Belissima", code name for the frontend code of the backoffice, is a re-creation of the backoffice of Umbraco with a more modern approach. While replacing the deprecated angular code with Vite, Lit and TypeScript, you can customize or extend more or less everything in the backoffice:

Backoffice Overview Customizable items

Each block is an extension point that can be extended, customized, replaced, or removed.

You are also not limited to the mentioned frameworks. You can use any other framework or library of your choice. The new backoffice will be available in the Umbraco CMS from Version 14.

Resources

In this article, we'll provide an overview of the different ways you can extend the backoffice using the new frameworks.

Cover

Discover how to get started with the new backoffice.

Cover

Discover how to extend the backoffice using the Umbraco UI Library, UI API and Storybook.

You can also find a list of other resources related to the new backoffice of Umbraco in the Umbraco v14 "Bellissima" Resources article.

Terminology

There are a few words that cover certain concepts, which is good to learn to decode the purpose of code. These terminologies can be handy when starting to customize the new backoffice:

  • Resource: An API enables communication with a server.

  • Store: An API representing data, generally coming from the server. Most stores would talk with one or more resources. You can read more about this in the Store article.

  • State: A reactive container holding data, when data is changed all its Observables will be notified. You can read more about state and observables in the States article.

    • Observable: An observable is the hook for others to subscribe to the data of a State.

    • Observe: Observe is the term of what we do when subscribing to an Observable.

  • Context-API: The name of the system used to serve APIs (instances/classes) for a certain context in the DOM. An API that is served via the Context-API is called a Context. You can read more about this in the Context API article.

    • Context Provider: One that provides a class instance as a Context API.

    • Context Consumer: One that consumer subscribes to a class instance as a Context API.

  • Controller: An abstract term for a thing that hooks into the lifecycle of an element. Many things in our system are Controllers.

  • Umbraco Controller: Enables hosting controllers. Additionally, it provides a few shortcut methods for initializing core Umbraco Controllers. You can read more about this in the Controllers article.

    • Controller Host: A class that can host controllers.

    • Controller Host Element: The element that can host controllers.

  • Umbraco Element: The UmbLitElement or UmbElemenMixin enables hosting controllers. Additionally, it provides a few shortcut methods for initializing core Umbraco Controllers. You can read more about this in the Umbraco Element article.

Last updated