Only this pageAll pages
Powered by GitBook
Couldn't generate the PDF for 484 pages, generation stopped at 100.
Extend with 50 more pages.
1 of 100

15.latest

Loading...

Loading...

Fundamentals

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Built-in Property Editors

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Get to know Umbraco

All the fundamentals of using Umbraco - from making a local installation to extending the backend.

In this part of the Umbraco CMS documentation, you can get to know the product and the default functionality. It is here you start your Umbraco journey with the installation, setup, and basics of working with the CMS.

Setup

Information on the requirements to setup, install & upgrade Umbraco

How to install and configure your Umbraco installation.

Defines the system requirements to run Umbraco.

Umbraco installation steps and guidelines.

Covers the steps to upgrade your copy of Umbraco to a newer version.

Information about server setup for Umbraco including information about permissions and load balancing.

How to configure your Umbraco installation. Includes information about all of Umbraco's configuration files and options.

How to install the latest nightly builds.

Legacy Documentation

Resources and links for older versions of Umbrco CMS.

This documentation platform covers only supported versions of the Umbraco CMS, excluding version 8. If you use an unsupported version, you need to go elsewhere.

When a major version of Umbraco CMS goes End of Life (EOL), the documentation for this version will be unpublished 3 months later.

Our Umbraco

The documentation for all EOL versions will continue to be available on the .

The documentation for Umbraco 7 and 8 lives on .

Requirements
Installation
Upgrade your project
Server setup
Configuration
Installing Nightly Builds

Umbraco 7 Documentation

Umbraco 8 Documentation

Learn more about how long each major version of Umbraco is supported.
Legacy versions on GitHub
UmbracoDocs GitHub repository
our.umbraco.com

Umbraco CMS Documentation

Your main resource when building and managing an Umbraco CMS website.

Umbraco CMS is a flexible and editor-friendly Content Management System (CMS) that allows you to create beautiful and modern websites. Use the latest version of .NET, integrate with your favorite services, and help your customers launch a website tailored to their specific needs.

The documentation for Umbraco CMS provides information for experienced Umbraco and .NET developers. It also offers guides and high-level articles for people starting out with the CMS.


Umbraco Training

Install using .NET CLI

We have made custom Umbraco templates that are available for use with dotnet new. The steps below will demonstrate the minimum amount of actions required to get you going and set up an Umbraco project from the command line using .NET templates.

Video Tutorial

Install the template

In some cases the templates may silently fail to install (usually this is an issue with NuGet sources). If this occurs you can try specifying the NuGet source in the command by running dotnet new install Umbraco.Templates --nuget-source "https://api.nuget.org/v3/index.json".

To get help on a project template with dotnet new run the following command:

dotnet new umbraco -h

From that command's output, you will get a better understanding of what are the default template options, as well as those command-line flags specific to Umbraco that you can use (as seen below):

Create an Umbraco project

  1. Create a new empty Umbraco solution: dotnet new umbraco -n MyCustomUmbracoProject

You will now have a new project with the name MyCustomUmbracoProject, or the name you chose to use. The new project can be opened and run using your favorite IDE or you can continue using the CLI commands.

If you want to create a solution file as well you can run the commands below. dotnet new sln dotnet sln add MyCustomUmbracoProject

Run Umbraco

  1. Navigate to the newly created project folder: cd MyCustomUmbracoProject

  2. Build and run the new Umbraco .Net Core project: dotnet build dotnet run

The next step is to run through the Umbraco CMS installation. If you chose to use MS SQL Server/Azure you will need to add your connection string during this setup process to get access to the Umbraco backoffice.

Install using Visual Studio

A guide to install Umbraco CMS using Visual Studio.

Prerequisites

Quick Start

  • Open Visual Studio.

  • Go to File > New > Project, search for Umbraco.

  • Choose Umbraco Project (Umbraco HQ) then click Next.

  • Choose or specify the parameters, leave the default or leave them all empty.

  • Click Create.

  • Use CTRL+F5 to run the project and start the Umbraco installer.

Video Tutorial

Create a new Umbraco project

To install Umbraco we first need to install Umbraco's dotnet new templates.

Create the Visual Studio project

Go to File > New > Project and search for Umbraco in the Search for templates field.

Once you select Umbraco Project (Umbraco HQ) navigate to the next step by clicking Next.

Configure project

In this step, you will be able to give your project a name specific to the project you are creating.

Refrain from changing the Solution name, as this will cause a namespace conflict with the CMS itself.

Additional information

In the next step, you are able to specify some additional parameters like the Target framework. The rest are optional.

You can then click the Create button and your Umbraco Project will be ready for you.

Running the site

You can now run the site through Visual Studio using F5 or the Debug button.

Follow the installation wizard and after a few steps, you will get a message saying the installation was a success.

Next steps

You are now ready to start building your Umbraco project. Have a look below for different resources on the next steps.

Requirements

Browsers

The Umbraco UI works in all modern browsers:

  • Chrome (Latest)

  • Edge (Chromium)

  • Firefox (Latest)

  • Safari (Latest)

Local Development

Below you can find the minimum requirements to run Umbraco 15 on your machine:

  • One of the following .NET Tools or Editors:

Hosting

Recommendation requirements to run Umbraco

As Umbraco releases are aligned to the .NET release cadence, it's also aligned with Microsoft's Long-term support policy for the underlying framework. For the best experience, we would recommend that you ensure to be on the latest and supported Microsoft versions to run and host Umbraco CMS:

Other recommendation

  • Ability to set file permissions to include create/read/write (or better) for the user that "owns" the Application Pool for your site. This would typically be NETWORK SERVICE.

Database Account Roles

The database account used in the connection string will need permission to read and write from tables. It will also require permission to create schema during installs and upgrades:

  • The db_owner role has full permissions on the database.

  • To use an account with more restricted permissions, the db_datareader and db_datawriter roles will be needed for normal use to read from and write to the database. The db_ddladmin role, which can modify the database schema, is required for installs and upgrades of the CMS and/or any packages that create database tables.

Local IIS With Umbraco

This article describes how to run an Umbraco 9 site on a local IIS server.

This is a quick guide on getting your Umbraco website running locally on IIS.

The guide will assume you already have IIS configured and know your way around it, as well as having a local website you wish to host.

Setting up prerequisites

First, you need to ensure you have "Development time IIS support installed". To check this, go to the Visual Studio installer, click modify and check on the right side under "ASP.NET and web development":

Once that is installed you should set up a new IIS site - and make sure to add the hostname to your hosts file as well. Here is my setup for an example:

For the path you want to point it at the root of your site - where the .csproj file is.

Add permissions to NuGet cache folder

You might need to change permissions for the NuGet cache folder - C:\users\<username>\.nuget\packages. The user or group (IIS_IUSRS) that the IIS site is running on requires Read permissions on this folder because this is where some of the files for Umbraco and Umbraco packages are being served from during development. If the IIS user or group does not have permission to read from the NuGet cache folder, you could run into a DirectoryNotFoundException while running the site.

Add new launch profile

At this point you can go to your Visual Studio solution of the site and in the Properties folder there is a launchSettings.json file, that looks like this:

You can add a new profile called IIS, and point it at your local domain. Here it is with my example domain:

At this point IIS will be added to the launch profiles, and you can run the site from Visual Studio by choosing IIS in the dropdown:

And finally the site is running from your local IIS:

Running Umbraco in Docker using Docker Compose

Running Umbraco on docker locally using docker compose

This article shows how to run Umbraco locally in Docker using Docker Compose. You can use either SQL Server or SQLite for development.

This setup is intended for local development only. It is not recommended for production environments.

Prerequisites

Before you can run Umbraco in Docker, make sure the following are installed:

  • .NET SDK with Umbraco Templates v15 or higher

  • Docker Desktop

Installing

To install Umbraco using the provided Dockerfile and Docker Compose setup, follow these steps:

Option 1: Using SQL Server

  1. Create a folder and navigate into it:

  1. Create a new Umbraco project with Docker support:

  1. Add Docker Compose files:

The -P flag is required to specify the correct paths in the docker-compose file. The project is now ready to run with Docker Compose.

The folder structure should now look like this:

  • MyDockerProject/

    • Database/

      • Dockerfile

      • healthcheck.sh

      • setup.sql

      • startup.sh

    • MyDockerProject/

      • Your project files

      • Dockerfile

      • .dockerignore

    • .env

    • docker-compose.yml

The project now includes docker files for both Umbraco and the SQL server database.

It also includes additional scripts to launch and configure the database and a .env file with the database password.

  1. Run the following command from the root folder (where docker-compose.yml is located):

  1. Access the site at http://localhost:44372.

Option 2: Using SQLite

  1. Create a new folder and navigate into it:

  1. Create a new Umbraco project:

  1. Add a Dockerfile

To speed up the build process, add a .dockerignore file to exclude unnecessary folders like .git, bin, and obj.

  1. Build the container:

  1. Run the container:

  1. Access the site at http://localhost:8080.

Useful Commands

There are some useful commands you can use to manage the docker containers:

  • docker compose down --volumes: Deletes containers and the volumes they use. This is useful if you want to start from scratch.

Be careful with this command, as it deletes your database and all data in it.

  • docker compose up --build: Rebuild the images and start the containers. This is useful if you have made changes to the project and want to see them reflected on the running site.

  • docker compose watch: Start the containers and watch the default models folder. This means that if the project uses a source-code models builder the images are automatically rebuilt and restarts when you change the models.

Bind Mounts (SQL Server setup)

The docker compose file uses bind mounts for the following folders:

  • /wwwroot/media

  • /wwwroot/scripts

  • /wwwroot/css

  • /Views

  • /models

This is not meant to be used in production.

For local development, however, this means that the files necessary for development are available from outside the container in your IDE. This allows development even though the project is running in docker.

Template Options (SQL Server only)

The umbraco-compose template supports:

  • -P or --project-name: The name of the project. This is required and used to set the correct paths in the docker-compose file.

  • -dbpw or --DatabasePassword: Used to specify the database password. This is stored in the .env file and defaults to: Password1234.

  • -p or --Port: Used to specify the port the site will run on. Defaults to 44372.

Installation

Instructions on installing Umbraco on various platforms using various tools.

Install the latest .NET SDK

Before you install Umbraco, you must ensure that you can run it on your machine.

Install Umbraco using CLI

The fastest way to get the latest version of Umbraco up and running is by using the command line (CLI).

  1. Open your command line.

  2. Install the Umbraco templates:

  1. Create a new project:

  1. Navigate to the newly created project folder. It will be the folder containing the .csproj file:

  1. Build and run the newly created Umbraco site:

  1. The console will output a message similar to: [10:57:39 INF] Now listening on: https://localhost:44388

We recommend setting up a developer certificate and running the website under HTTPS. If that has not yet been configured, run the following command:

  1. Open your browser and navigate to that URL.

  2. Follow the instructions to finish up the installation of Umbraco.

Alternative Methods for Installing Umbraco

There are numerous ways to install Umbraco. Below, you can find links to different installation methods that will help you easily install and set up Umbraco projects.

.NET CLI, included with the .NET Software Development Kit (SDK), can be used to install or uninstall .NET templates from NuGet. This can be done by using the dotnet new command on any OS. The underlying Template Engine enables the creation of custom templates which make new project bootstrapping much faster. With a few steps you can have an Umbraco project running without the need for a code editor.

Visual Studio is used to write native code and managed code supported by .NET and many others. Its built-in tools provide the ability to develop and execute applications for any platform. Developers will be able to install Umbraco without ever having to leave Visual Studio.

Learn how to run an already installed local installation of Umbraco.

Visual Studio Code is an editor with an embedded webserver (through the IIS Express extension). A fast way to get you up and running with Umbraco.

From Umbraco v9 and above you can use the Nightly Builds to get the latest version to use and test before it is released. Learn how to install the Nightly builds to get started.

Since Umbraco 9 it has been possible to run Umbraco CMS natively on Linux or macOS High Sierra. To get Umbraco running you will need to follow some steps.

Use the Unattended installs when spinning up Umbraco instances on something like Azure Web Apps to avoid having to run through the installation wizard.

Running Umbraco on Linux/macOS

Since Umbraco 9 it has been possible to run Umbraco CMS natively on Linux or macOS High Sierra 10.13 and newer.

With Umbraco CMS on .NET Core, Linux and macOS is natively supported with SQLite as the database.

In the below section, we describe how to get started with running Umbraco CMS on Linux or macOS.

How to get started running Umbraco CMS on Linux or macOS

Once you've made sure you meet the requirements it is time to install the Umbraco Templates on your system.

With the templates installed on your system, it is now possible to create Umbraco projects.

To create a project, there are two options:

  • Continue creating projects using the .NET CLI.

  • Create new projects using Visual Studio (only macOS).

Once you create a new project it will use SQLite by default on Linux/macOS.

Unattended Installs

In some cases, you might need to install Umbraco instances automatically without having to run through the installation wizard to configure the instance.

You can use the Unattended installs feature to allow for quick installation and set up of Umbraco instances on something like Azure Web Apps.

This article will give you the details you need to install Umbraco unattended.

Get clean install of Umbraco

Configure your database

As you will not be running through the installation wizard when using this feature, you need to manually tell Umbraco which database to use.

  • Add the connection string using configuration.

If your connection string is for SQLite or SQL Server Express LocalDB it is assumed that a database should be created when missing. This is regardless of the value of the InstallMissingDatabase setting.

SQL Server Example in appsettings.json

SQLite Example in appsettings.json

A value is configured for the keyumbracoDbDSN_ProviderName to ensure usage of the Microsoft.Data.SQLite ADO.NET provider.

It is recommended that you make use of the values shown below for the Cache, Foreign Keys and Pooling keywords on your connection string.

Enable the unattended installs feature

The unattended installs feature is disabled by default. In order to enable it, you need to add the following JSON object to a JSON configuration source.

Remember to set the value of InstallUnattended to true.

The keys for this would then be as follows:

Initialize the unattended install

After completing the steps above you can now initialize the installation by booting up the Umbraco instance.

Once it has completed, you should see the following when visiting the frontend of the site.

Configuration options

Depending on your preferences, you can use any type of configuration to specify the connection string and login information, as well as enable unattended install. With the extending configuration functionality, it is possible to read from all kinds of sources. One example can be using a JSON file or environment variables.

Program.cs has a condition, which if met, an appsettings.Local.json file will be added and configured as a configuration source.

Having intellisense will help you to add your connection string and information needed for the unattended install.

More support

We have added support for unattended installs with Name, Email and Password, and Connection String as CLI params, which are also available in Visual Studio. There you can fill in your information as follows:

CLI

Visual Studio

Install using Visual Studio Code

Follow these steps to set up an Umbraco project with VS Code. The benefit of using VS Code is that it is super quick to get up and running.

Installing and setting up VS Code

  1. Once installed, launch VS Code.

  2. Click the extensions menu at the bottom on the left side. Then search for C# and install it.

Creating your Umbraco project

Configure VS Code to run the Umbraco project

Open your project folder in VS Code, your project will look something like this:

Now we need to tell VS Code how to run your project.

Open the command palette, you can use the shortcut Ctrl+Shift+P, and type in Tasks: Configure and select the Tasks: Configure Task option:

Select "Create task.json from template"

Now select ".NET Core" as your template.

After this VS Code will have created a folder called .vscode that contains a file called tasks.json, it's this file that tells VS Code how to build your project.

Now that we've told VS Code how to build your project, we need to tell it how to launch it. VS Code can do this for you. First, select the little play button in the left side menu, and then select the "create a launch.json file" link.

This will prompt a menu to appear, select .NET 5+ and .NET Core:

If .NET 5+ and .NET Core is missing in the drop-down menu:

  1. Press Ctrl + Shift + P (on Windows/Linux) or Cmd + Shift + P (on macOS) to open the Command Palette.

  2. Search for the command .NET: Generate Assets for Build and Debug. This command will generate the necessary assets for building and debugging your .NET application.

Now you'll see a green play button appear with a dropdown where ".NET Core Launch (web)" is selected.

If you navigate to the Files section, a new launch.json file is created in the .vscode folder. When you press F5, the launch.json file tells VS Code to build your project, run it, and then open a browser .

With that, you're ready to run the project! Press F5, or click the little green play button in the Run and Debug section to run your brand new Umbraco site locally.

Umbraco Web Installer

This section continues from where we left off but covers the installation and configuration of Umbraco inside your web browser when you run Umbraco for the first time.

You will see the install screen where you will need to fill in some data before Umbraco can be installed.

When the installer is done, you will be logged into the backoffice.

Congratulations, you have installed an Umbraco site!

You can log into your Umbraco site by entering the following into your browser: http://yoursite.com/umbraco/.

Learn more about Umbraco CMS and get an overview of the top features on .

Install the latest .

Run dotnet new install Umbraco.Templates to install the project templates. The solution is packaged up into the NuGet package and can be installed into the dotnet CLI.

The project is now running on the and has assigned a free available port to run it on. Look in the terminal window after the dotnet run command to see the URLs.

Install the newest .

In Visual Studio 2022, the .NET CLI templates are enabled to appear, by default. For information on how to enable .NET CLI templates in Visual Studio 2019, see the article.

Check the to ensure you have everything you need to start your Umbraco project.

This is an abbreviated version of the installation steps. Jump to the section for a more thorough guide.

For more information check the first 2 steps of .

One of the

with the

2022 version 17.12 or higher.

Optional: version 2022.3 and higher

and higher

When using Visual Studio as your primary Integrated Development Environment (IDE) we recommend .

Are you using Microsoft SQL as your data? The Umbraco Data Access Layer (DAL) does not support case-sensitive naming. When you use Microsoft SQL as your database, ensure that the database is created using a case-insensitive (CI) collation variant. For example, SQL_Latin1_General_CP1_CI_AS. Learn more about in the official Microsoft documentation.

and other

For more information, see the article in the Microsoft documentation.

You can use to manage the hosting infrastructure. All Umbraco Cloud plans are hosted on Microsoft Azure, which gives your site a proven and solid foundation.

For more information on the Database-level roles, see the .

For more information on how to create a database user via SQL, you can check the .

When the site is published these files are copied from the NuGet cache folder to wwwroot/umbraco and wwwroot/App_Plugins and these folders will typically have the correct permissions. For more information on setting permissions, see the article.

Identify and install the latest .

Members of the Umbraco Community have created a website that makes the installation of Umbraco a lot easier for you. You can find the website at . On the website, you can configure your options to generate the required script to run. Click on the Install Script tab to get the commands you need to paste into the terminal. This tab also includes the commands for adding a starter kit or unattended install which creates the database for you.

To get started with Umbraco CMS first have a look at the .

To do this follow the guide.

To create new projects using Visual Studio, you can use the guide.

If you want to use an SQL server database, you will need to .

In order to get a clean instance of Umbraco, follow our installation guide for how to .

Set up and configure a new database - see for details.

Umbraco can create an SQL Server database for you during the unattended install process. The user specified by the credentials in your connection string needs to have the CREATE DATABASE permission granted and the global setting is set to true.

The 'umbracoDbDSN_ProviderName' attribute sets the .NET Framework data provider name for the DataSource control's connection. For more information on the data providers included in the .Net Framework, see the .

Alternatively you may set your configuration with Environment Variables or other means. Learn more about this in the .

Go to and download VS Code for free.

Follow the to create your project folder.

Umbraco.com
Creating a Basic Website
Configuration
Requirements
Using Notifications
Templates                    Short Name               Language          Tags
------------------------------------------------------------------------------------------------------
Umbraco Project              umbraco                  [C#]              Web/CMS/Umbraco
Umbraco Extension            umbraco-extension        [C#]              Web/CMS/Umbraco/Extension/Plugin/Razor Class Library
Umbraco Docker Compose       umbraco-compose                            Web/CMS/Umbraco
Umbraco Project (C#)
Author: Umbraco HQ
Description: An empty Umbraco project ready to get started.

Usage:
  dotnet new umbraco [options] [template options]

Options:
  -n, --name <name>       The name for the output being created. If no name is specified, the name of the output directory is used.
  -o, --output <output>   Location to place the generated output.
  --dry-run               Displays a summary of what would happen if the given command line were run if it would result in a template
                          creation.
  --force                 Forces content to be generated even if it would change existing files.
  --no-update-check       Disables checking for the template package updates when instantiating a template.
  --project <project>     The project that should be used for context evaluation.
  -lang, --language <C#>  Specifies the template language to instantiate.
  --type <project>        Specifies the template type to instantiate.

Template options:
  -r, --release <Latest|LTS>                 The Umbraco release to use, either latest or latest long term supported
                                             Type: choice
                                               Latest  The latest umbraco release
                                               LTS     The most recent long term supported version
                                             Default: Latest
  --use-https-redirect                       Adds code to Startup.cs to redirect HTTP to HTTPS and enables the UseHttps setting.
                                             Type: bool
                                             Default: false
  -da, --use-delivery-api                    Enables the Delivery API
                                             Type: bool
                                             Default: false
  --add-docker                               Adds a docker file to the project.
                                             Type: bool
                                             Default: false
  --no-restore                               If specified, skips the automatic restore of the project on create.
                                             Type: bool
                                             Default: false
  --exclude-gitignore                        Whether to exclude .gitignore from the generated template.
                                             Type: bool
                                             Default: false
  --minimal-gitignore                        Whether to only include minimal (Umbraco specific) rules in the .gitignore.
                                             Type: bool
                                             Default: false
  --connection-string <connection-string>    Database connection string used by Umbraco.
                                             Type: string
  --connection-string-provider-name          Database connection string provider name used by Umbraco.
  <connection-string-provider-name>          Type: string
                                             Default: Microsoft.Data.SqlClient
  --development-database-type <choice>       Database type used by Umbraco for development.
                                             Type: choice
                                               None     Do not configure a database for development.
                                               SQLite   Use embedded SQLite database.
                                               LocalDB  Use embedded LocalDB database (requires SQL Server Express with Advanced
                                             Services).
                                             Default: None
  --friendly-name <friendly-name>            Used to specify the name of the default admin user when using unattended install on
                                             development (stored as plain text).
                                             Type: string
  --email <email>                            Used to specify the email of the default admin user when using unattended install on
                                             development (stored as plain text).
                                             Type: string
  --password <password>                      Used to specify the password of the default admin user when using unattended install on
                                             development (stored as plain text).
                                             Type: string
  --no-nodes-view-path <no-nodes-view-path>  Path to a custom view presented with the Umbraco installation contains no published
                                             content.
                                             Type: string
  -dm, --development-mode <choice>           Choose the development mode to use for the project.
                                             Type: choice
                                               BackofficeDevelopment  Enables backoffice development, allowing you to develop from
                                             within the backoffice, this is the default behaviour.
                                               IDEDevelopment         Configures appsettings.Development.json to Development runtime
                                             mode and SourceCodeAuto models builder mode, and configures appsettings.json to
                                             Production runtime mode, Nothing models builder mode, and enables UseHttps
                                             Default: BackofficeDevelopment
  -mm, --models-mode <choice>                Choose the models builder mode to use for the project. When development mode is set to
                                             IDEDevelopment this only changes the models builder mode appsetttings.development.json
                                             Type: choice
                                               Default           Let DevelopmentMode determine the models builder mode.
                                               InMemoryAuto      Generate models in memory, automatically updating when a content
                                             type change, this means no need for app rebuild, however models are only available in
                                             views.
                                               SourceCodeManual  Generate models as source code, only updating when requested
                                             manually, this means a interaction and rebuild is required when content type(s) change,
                                             however models are available in code.
                                               SourceCodeAuto    Generate models as source code, automatically updating when a
                                             content type change, this means a rebuild is required when content type(s) change,
                                             however models are available in code.
                                               Nothing           No models are generated, this is recommended for production assuming
                                             generated models are used for development.
                                             Default: Default
  -sk, --starter-kit <choice>                Choose a starter kit to install.
                                             Type: choice
                                               None                   No starter kit.
                                               Umbraco.TheStarterKit  The Umbraco starter kit.
                                             Default: None
{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:40264",
      "sslPort": 44360
    }
  },
  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "Umbraco.Web.UI.NetCore": {
      "commandName": "Project",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "applicationUrl": "https://localhost:44360;http://localhost:40264"
    }
  }
}
{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iis": {
      "applicationUrl": "https://testsite.local",
      "sslPort": 0
    },
    "iisExpress": {
      "applicationUrl": "http://localhost:40264",
      "sslPort": 44360
    }
  },
  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "IIS": {
      "commandName": "IIS",
      "launchBrowser": true,
      "launchUrl": "https://testsite.local",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "Umbraco.Web.UI.NetCore": {
      "commandName": "Project",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "applicationUrl": "https://localhost:44360;http://localhost:40264"
    }
  }
}
mkdir MyDockerProject
cd MyDockerProject
dotnet new umbraco -n MyDockerProject --add-docker
dotnet new umbraco-compose -P "MyDockerProject"
docker compose up
mkdir MyDockerSqliteProject
cd MyDockerSqliteProject
dotnet new umbraco -n MyDockerSqliteProject
FROM mcr.microsoft.com/dotnet/aspnet:9.0 AS base
WORKDIR /app
EXPOSE 8080

FROM mcr.microsoft.com/dotnet/sdk:9.0 AS build
ARG BUILD_CONFIGURATION=Release
WORKDIR /src
COPY ["MyDockerSqliteProject/MyDockerSqliteProject.csproj", "MyDockerSqliteProject/"]
RUN dotnet restore "MyDockerSqliteProject/MyDockerSqliteProject.csproj"
COPY . .
WORKDIR "/src/MyDockerSqliteProject"
RUN dotnet build "MyDockerSqliteProject.csproj" -c  $BUILD_CONFIGURATION -o /app/build

FROM build AS publish
RUN dotnet publish "MyDockerSqliteProject.csproj" -c  $BUILD_CONFIGURATION -o /app/publish /p:UseAppHost=false

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "MyDockerSqliteProject.dll"]
docker build -t umbraco-sqlite .
docker run -p 8080:8080 umbraco-sqlite
dotnet new install Umbraco.Templates
dotnet new umbraco --name MyProject
cd MyProject
dotnet run
dotnet dev-certs https --trust
{
  "ConnectionStrings": {
    "umbracoDbDSN": "server=localhost;database=UmbracoUnicore;user id=sa;password='P@ssw0rd'",
    "umbracoDbDSN_ProviderName": "System.Data.SqlClient"
  }
}
{
  "ConnectionStrings": {
    "umbracoDbDSN": "Data Source=|DataDirectory|/Umbraco.sqlite.db;Cache=Private;Foreign Keys=True;Pooling=True",
    "umbracoDbDSN_ProviderName": "Microsoft.Data.Sqlite"
  }
}
{
  "Umbraco": {
    "CMS": {
      "Unattended": {
        "InstallUnattended": true,
        "UnattendedUserName": "FRIENDLY_NAME",
        "UnattendedUserEmail": "EMAIL",
        "UnattendedUserPassword": "PASSWORD"
      }
    }
  }
}
Umbraco__CMS__Unattended__InstallUnattended
Umbraco__CMS__Unattended__UnattendedUserName
Umbraco__CMS__Unattended__UnattendedUserEmail
Umbraco__CMS__Unattended__UnattendedUserPassword
#if DEBUG
  .ConfigureAppConfiguration(config
    => config.AddJsonFile(
      "appsettings.Local.json",
      optional: true,
      reloadOnChange: true))
#endif
{
    "ConnectionStrings": {
        "umbracoDbDSN": "server=localhost;database=UmbracoUnicore;user id=sa;password='P@ssw0rd'"
    },
    "Umbraco": {
        "CMS": {
            "Unattended": {
                "InstallUnattended": true,
                "UnattendedUserName": "FRIENDLY_NAME",
                "UnattendedUserEmail": "EMAIL",
                "UnattendedUserPassword": "PASSWORD"
            }
        }
    }
}
dotnet new umbraco -n MyNewProject --friendly-name "Friendly User" --email user@email.com --password password1234 --connection-string "Server=(localdb)\Umbraco;Database=MyDatabase;Integrated Security=true" --version 10.0.0

File And Folder Permissions

Information on file and folder permissions required for Umbraco sites

To ensure a stable and smoothly running Umbraco installation, these permissions need to be set correctly. These permissions should be set up before or during the installation of Umbraco.

The main account that requires 'modify' file permissions to be set on the folders below, is the account used start Umbraco. If Umbraco is hosted in IIS this will be the Application Pool Identity for the IIS website. Usually IIS APPPOOL\appPoolName or a specific local account or in some circumstances Network Service. If in doubt, ask your server admin / hosting company. Additionally, the Internet User (IUSR) account and IIS_IUSRS account only require 'read only' access to the site's folders.

Generally, when developing locally with Visual Studio or Rider, permissions do not need to be strictly applied.

If you have any specific static files/media items/etc, you should add the appropriate permissions accordingly.

The permissions documentation should allow you to run a plain Umbraco install successfully.

File / folder
Permission
Comment

/appSettings*.json

Modify / Full control

Only needed for setting database and a global identifier during installation. So can be set to read-only afterwards for enhanced security.

/App_Plugins

Modify / Full control

Should always have modify rights as the folder and its files are used by packages. Not part of your project by default.

/umbraco

Modify / Full control

Should always have modify rights as the folder and its files are used for cache and storage.

/Views

Modify / Full control

Should always have modify rights as the folder and its files are used for Templates and Partial views

/wwwroot/css

Modify / Full control

Should always have modify rights as the folder and its files are used for css files.

/wwwroot/media

Modify / Full control

Should always have modify rights as the folder and its files are used for Media files uploaded via the Umbraco CMS backoffice.

/wwwroot/umbraco

Modify / Full control

Should always have modify rights as the folder and its files are used by packages. Not part of your project by default.

/wwwroot/scripts

Modify / Full control

Should always have modify rights as the folder and its files are used for script files.

.NET SDK
Umbraco.Templates
Kestrel server
Umbraco dotnet templates
.NET CLI Templates in Visual Studio
Requirements
Getting Started with Umbraco
Tutorial: Create a website from scratch
Find different options for hosting your Umbraco website
Learn about configuration in Umbraco CMS
.NET 9.0 and higher
.NET 9 - Supported OS versions
Visual Studio Code
IISExpress extension
Microsoft Visual Studio
JetBrains Rider
.NET Core CLI
SQL connection string (SQL Server)
Node.js version 20.11.0
finding and downloading the Software Development Kits (SDKs) for Visual Studio
collation modes
Windows Supported releases
MacOs Supported releases
Ubuntu Supported distributions
Linux Packages
.NET Supported releases
IIS Supported releases
SQL Server Supported releases
SQLite
Host and deploy ASP.NET Core applications
Umbraco Cloud
Microsoft documentation
Microsoft documentation
File and folder permissions
.NET SDK
https://psw.codeshare.co.uk
.NET CLI installation
Visual Studio installation
Run Umbraco on IIS
VS Code installation
Installing Nightly Builds
Running Umbraco on Linux/macOS
Install Umbraco unattended
Install using Visual Studio
set up Docker
Microsoft Documentation
Microsoft .Net Core config documentation
https://code.visualstudio.com/
Templates Guide
Create a new project
Install Umbraco with .NET CLI
Install using .NET CLI
Install an Umbraco project template
requirements for running Umbraco CMS
Requirements
Video Tutorial
How to install Umbraco using NuGet and Visual Studio

Migrate content to Umbraco 8

This guide will show you how to migrate the content from your Umbraco 7 site to a site running Umbraco 8.

Umbraco 8 contains a lot of breaking changes and a lot of code has been cleaned up compared to Umbraco 7. Due to this, it will not be possible to do a direct upgrade from Umbraco 7 to Umbraco 8. You need to migrate your content from your Umbraco 7 site into your Umbraco 8 site and then recreate the rest in the new version.

A content migration tool has been implemented in Umbraco 8.1.0, to help you with the transition.

In this guide you can read more about the tool, its limitations, and how to use it in practice.

Migrating Umbraco Cloud sites

What are the limitations?

In the following section, you can learn more about the limitations of migrating content from Umbraco 7 to Umbraco 8.

Versions supported

The content migration tool is a database migration, which is made for the database schema of Umbraco 7.14+. This means that in order to do the migration you need to ensure your Umbraco 7 site is running at least Umbraco 7.14.

Database types supported

Umbraco 8 does not support MySQL databases. This means that the migration will not work when moving from an Umbraco 7 site using MySQL to Umbraco 8 on SQL Server

The database types that are supported are SQL Server and SQL CE.

Known issues

Feedback from user testing has shown that some databases are harder to migrate than others.

There are two ways to work around this issue:

  • Migrate to version 8.5 as a first step and then post-migration, carry out a normal Umbraco upgrade to the latest version of Umbraco 8, or

Third party property editors

The migration will transform the data stored in third party editors as well. However, it will be stored as it was in Umbraco 7. If the structure has changed or the property editor doesn't exist, you will still be able to find the data in the database. It will, however, not be available in the backoffice.

Learn more about that in the Data Types Migrations

Migrating data types

When migrating content from Umbraco 7 to Umbraco 8, the Data Type 'pre-value' structure has changed. In Umbraco 8, the term 'pre-values' no longer exists and is instead referred to as property editor configuration.

This configuration is stored differently in Umbraco 8 than it was in Umbraco 7. In Umbraco 7, each pre-value property was stored as a different row in a different database table. In Umbraco 8 this is simplified and property editor configuration is stored as the JSON serialized version of the strongly typed configuration object.

When upgrading from Umbraco 7 to Umbraco 8, Umbraco has no way of knowing how custom property editors have intended to structure their configuration data. During the upgrade, Umbraco will convert the key/value pairs from the old pre-value database table into a serialized JSON version of those values. There is a reasonable chance that the end result of this data conversion is not compatible with the custom property editor.

There are 3 options that a developer can choose to do to work around this automatic data conversion:

1: Implement a custom IPreValueMigrator

This option requires you to create a custom C# migrator for each of your custom property editors that store custom configuration data. It will also require that you implement these migrators before you run the Umbraco 8 content migration.

You will then need to register them in a composer:

[RuntimeLevel(MinLevel = RuntimeLevel.Upgrade, MaxLevel = RuntimeLevel.Upgrade)] // only on upgrades
public class PreValueMigratorComposer : IUserComposer
{
    public void Compose(Composition composition)
    {
        composition.WithCollectionBuilder<PreValueMigratorCollectionBuilder>()
            // Append all of the migrators required
            .Append<MyCustomPreValueMigrator>()
            .Append<AnotherPreValueMigrator>();
    }
}

When running the migrations and encountering a custom configuration, Umbraco will utilize the PreValueMigrator when converting the old pre-values into the new JSON format.

2: Update your Angular configuration (pre-value) and property editor

This option means that you will choose to use the automatically converted JSON data format. In this case, it will mean updating your pre-value and property editors to use the new JSON configuration data. The converted data won't be much different than the original/intended data format so this might not be too much work.

3: Update the Angular configuration (pre-value) editor

With this option the configuration/pre-value editor needs to be updated to transform the JSON converted data into the data structure you want. When this is done and when the Data Type is saved again, the JSON data structure will be saved back to the database. Your property editor will then continue to work.

This will require you to update and save all custom pre-value editors to transform the converted structures back to your intended data structure.

What will happen

When the migrations are running, Umbraco will go through your entire Umbraco 7 database and update it to the format required for Umbraco 8. The schema will be remodeled and transformed into the correct format and your existing compatible data will be transformed to fit with Umbraco 8.

These migrations will be running directly on your database. They are transforming schema and data - not transferring. Therefore always ensure that you have a backup before attempting to do this. In case something goes wrong, you will be able to rollback and try again.

It is highly recommended to clean up your site before running this as it will be quicker.

  • Empty Content recycle bin

  • Empty Media recycle bin

How it works

In the following guide we will migrate the content of an Umbraco 7.13.1 site to Umbraco 8.1.0.

Step 1: Upgrading to 7.14+

The site in this example is an Umbraco 7.13.1 site, and we will use Nuget to update it.

When upgrading an old website, check if you are using obsolete properties in your Data Types. These should be changed to their updated counterparts. The migration will fail if you are still using obsolete properties.

The updated properties are:

  • Content Picker

  • Media Picker

  • Member Picker

  • Multinode Treepicker

  • Nested Content

  • Folder Browser

  • Related Links

You can see if your site is using the obsolete properties from the (Obsolete) prefix in their name.

Once it is upgraded and you have verified everything is working, move on to the next step.

Step 2: Migrating content to Umbraco 8

The first thing to do is to spin up a fresh new Umbraco 8.1+ site. Make sure everything works and that no content is there.

If you have customized the UsersMembershipProvider on your Umbraco 7 site you need to copy that over to the 8.1 web.config as well. Additionally you need to update the type attribute to be type="Umbraco.Web.Security.Providers.UsersMembershipProvider, Umbraco.Web".

This also includes the attribute useLegacyEncoding value. Make sure that this setting is copied into your new Umbraco 8 site, as it is needed in order to log in.

Take a backup of your database from the Umbraco 7.14 site. Take the information for the backup database and add that to the connectionstring for the Umbraco 8.1 site. If you are running SQL CE, you will have to copy the database over to the new site as well.

Once the connectionstring is set, the final step is to change the Umbraco version number in the web.config on the Umbraco 8.1 site. Chang it to 7.14.0. This will indicate that there is an upgrade pending and it needs to run the migration.

The version will be set to 8.1.0, and you need to change it to the version you are currently migrating from.

When you start the site it will ask you to login and then show you this screen:

From here, the automatic migration will take over, and after a little bit you can log in and see your content:

Please be aware that this is a content migration. If you go to the frontend after following these steps, it will throw errors.

At this point you will have the content but nothing else.

Step 3: Files migration

Before moving on to this step, make sure that the Umbraco 8 project is no longer running.

The following files/folders need to be copied into the Umbraco 8 project:

  • ~/Views - do not overwrite the default Macro and Partial View Macro files, unless changes have been made to these.

  • ~/Media

  • Any files/folders related to Stylesheets and JavaScripts.

  • Any custom files/folders the Umbraco 7 project uses, that aren't in the ~/Config or ~/bin.

  • ~/App_Data/UmbracoForms - in the case Umbraco Forms was used on the Umbraco 7 site.

Merge the configuration files carefully to ensure any custom settings are migrated while none of the default configurations for Umbraco 8 is overwritten.

You'll have to revisit all templates and custom implementations to get the site up and running, as all markup is still Umbraco 7-specific.

Are you planning on continuing the migration to the latest version on Umbraco CMS?

Then you can skip the step to revisit the template files and custom implementation. We highly recommend waiting with this step until you've reached the latest version.

Step 4: Post-migration checks

As you are updating your template files and custom implementation, you should also verify your configuration files and settings.

Umbraco 8 contains a few changes regarding the Sections in the Umbraco Backoffice. Because of this, you should also check your User Groups and make sure they have access to the appropriate sections.

Migrate content to Umbraco 15

This article will help you migrate content to Umbraco 15, and outline options to skip this content migration

If you maintain a large Umbraco site with extensive Block Editor usage, the upgrade to Umbraco 15+ might require a long-running content migration. For the duration of the migration, your site will be unresponsive and unable to serve requests.

You can track the progress of the migration in the logs.

Parallelizing the content migration

It is possible to parallelize the content migration. This will speed up the migration for large sites.

For certain content structures, parallel content migration will fail. Therefore, parallel content migration is strictly opt-in.

If parallel content migration fails, the database state will be rolled back to the last known good state. You can then disable parallel content migration, and try the migration again.

To enable parallel content migration, add an IComposer implementation to configure the ConvertBlockEditorPropertiesOptions before initiating the upgrade process:

using Umbraco.Cms.Core.Composing;
using Umbraco.Cms.Infrastructure.Migrations.Upgrade.V_15_0_0;

namespace UmbracoDocs.Samples;

public class DisableBlockEditorMigrationComposer : IComposer
{
    [Obsolete]
    public void Compose(IUmbracoBuilder builder)
        => builder.Services.Configure<ConvertBlockEditorPropertiesOptions>(options =>
        {
            // setting this to true will parallelize the migration of all Block Editors
            options.ParallelizeMigration = true;
        });
}

Opting out of the content migration

It is strongly recommended to let the migration run as part of the upgrade. However, if you are upgrading to Umbraco versions 15, 16, or 17, you can opt out of the migration. Your site will continue to work, albeit with a certain degree of performance degradation.

Blocks in Rich Text Editors might not work as expected if you opt out of the content migration.

You can opt out of migrating each Block Editor type individually. To opt-out, add an IComposer implementation to configure the ConvertBlockEditorPropertiesOptions before initiating the upgrade process:

DisableBlockEditorMigrationComposer.cs
using Umbraco.Cms.Core.Composing;
using Umbraco.Cms.Infrastructure.Migrations.Upgrade.V_15_0_0;

namespace UmbracoDocs.Samples;

public class DisableBlockEditorMigrationComposer : IComposer
{
    [Obsolete]
    public void Compose(IUmbracoBuilder builder)
        => builder.Services.Configure<ConvertBlockEditorPropertiesOptions>(options =>
        {
            // setting this to true will skip the migration of all Block List properties
            options.SkipBlockListEditors = false;

            // setting this to true will skip the migration of all Block Grid properties
            options.SkipBlockGridEditors = false;

            // setting this to true will skip the migration of all Rich Text Editor properties
            options.SkipRichTextEditors = false;
        });
}

Subsequently, you are responsible for performing the content migration yourself. This must be done before upgrading past Umbraco 17.

Custom code is required to perform the content migration. You can find inspiration in the core migrations:

This custom code should not run while editors are working in the Umbraco backoffice.

The site may require a restart once the content migration is complete.

Upgrade your project

This is the guide for upgrading existing installations in general.

In this article, you will find everything you need to upgrade your Umbraco CMS project.

You will find instructions on how to upgrade to a new minor or major version as well as how to run upgrades unattended.

Before you upgrade

The following lists a few things to be aware of before initiating an upgrade of your Umbraco CMS project.

  • Things may go wrong for different reasons. Be sure to ALWAYS keep a backup of both your site's files and the database. This way you can always return to a version that you know works.

  • Before upgrading to a new major version, check if the packages you're using are compatible with the version you're upgrading to. On the package's download page, in the Project compatibility area, click View details to check version-specific compatibility.

It is necessary to run the upgrade installer on each environment of your Umbraco site. This means that you need to repeat the steps below on each of your environments in order to complete the upgrade.

Legacy Umbraco

The steps outlined in this article apply to modern Umbraco from version 10 and later versions.

Are you upgrading to a minor for Umbraco 6, 7, or 8 you can find the appropriate guide below:

Upgrade to a new Major

You can upgrade to a new major of Umbraco CMS directly by using NuGet.

Switching to a new major of Umbraco CMS also means switching to a new .NET version. You need to make sure that any packages used on your site are compatible with this version before upgrading.

The package compatibility can be checked on the package's download page. Locate the Project compatibility area and select View details to check version-specific compatibility.

Choose the correct .NET version

Use the table below to determine which .NET version to upgrade to when going through the steps below.

CMS version
.NET version

15

9.0

14

8.0

13

8.0

12

7.0

11

7.0

10

6.0.5

Upgrade your project using Visual Studio

It's recommended that you upgrade the site offline and test the upgrade fully before deploying it to the production environment.

  1. Stop your site in IIS to prevent any changes from being made while you are upgrading.

  2. Open your Umbraco project in Visual Studio.

  3. Right-click on the project name in the Solution Explorer and select Properties.

  4. Select the .NET version from the Target Framework drop-down.

  5. Go to Tools > NuGet Package Manager > Manage NuGet Packages for Solution...

  6. Go to the Installed tab in the NuGet Package manager.

  7. Upgrade Umbraco.Cms.

    a. Select the correct version from the Version drop-down.

    b. Click Install to upgrade your project.

  1. Make sure that your connection string has TrustServerCertificate=True in order to complete the upgrade successfully:

"ConnectionStrings": {
    "umbracoDbDSN": "Server=YourLocalSQLServerHere;Database=NameOfYourDatabaseHere;User Id=NameOfYourUserHere;Password=YourPasswordHere;TrustServerCertificate=True"
}
  1. Restart your site in IIS, then build and run your project to finish the installation.

If you have added custom code to the startup.cs file, we recommend moving the code into a Composer after upgrading.

Upgrade to a new Minor

NuGet installs the latest version of the package when you use the dotnet add package command unless you specify a package version:

dotnet add package Umbraco.Cms --version <VERSION>

Add a package reference to your project by executing the dotnet add package Umbraco.Cms command in the directory that contains your project file.

Run dotnet restore to install the package.

For v9: If you are using SQL CE in your project you will need to run dotnet add package Umbraco.Cms.SqlCe --version <VERSION> before running the dotnet restore command. From v10, SQL CE has been replaced with SQLite so a dotnet restore should be sufficient. If this is not working then you will need to run dotnet add package Umbraco.Cms.Persistence.Sqlite --version <VERSION> and then dotnet restore.

When the command completes, open the .csproj file to make sure the package reference was updated:

.csproj
<ItemGroup>
  <PackageReference Include="Umbraco.Cms" Version="x.x.x" />
</ItemGroup>

Run an unattended upgrade

When upgrading your Umbraco project, it is possible to enable the upgrade to run unattended. This means that you will not need to run through the installation wizard when upgrading.

Below you will find the steps you need to take in order to upgrade your project unattended.

Are you running a load balanced setup with multiple servers and environments?

Enable the unattended upgrade feature

  1. Add the Umbraco:Cms:Unattended:UpgradeUnattended configuration key.

  2. Set the value of the key to true.

appsettings.json
{
    "Umbraco": {
        "CMS": {
            "Unattended": {
                "UpgradeUnattended": true
            }
        }
    }
}

Run the upgrade

With the correct configuration applied, the project will be upgraded on the next boot.

Boot order

The Runtime level will use Run instead of Upgrade to allow the website to continue to boot up directly after the migration is run. This happens instead of initiating the otherwise required restart.

The upgrade is run after Composers but before Components and the UmbracoApplicationStartingNotification. This is because the migration requires services that are registered in Composers and Components require that Umbraco and the database are ready.

Unattended upgrades in a load balanced setup

Follow the steps outlined below to use unattended upgrades in a load balanced setup.

  1. Deploy to all environments.

  2. Set the Umbraco:CMS:Unattended:UpgradeUnattended configuration key to true for the Main server only.

  3. Boot the Main server and the upgrade will run automatically.

  4. Wait for the upgrade to complete.

  5. Boot the Read-Only servers and make sure they do not show the “upgrade required” screen.

Minor upgrades for Umbraco 8

This article provides details on how to upgrade to the next minor version when using Umbraco 8.

Note

It is necessary to run the upgrade installer on each environment of your Umbraco site. If you want to update your staging and live site you need to repeat the steps below. Make sure you click through the install screens so that your upgrade is complete.

Contents

In this article you will find instructions for 3 different ways of upgrading:

Upgrade using NuGet

  1. Open up the Package Console and type: Update-Package UmbracoCms

  2. Choose "No to All" by pressing the "L" when prompted.

Alternatively, you can use the Visual Studio NuGet Package Manager to upgrade:

  1. Open the NuGet Package Manager and select the Updates pane to get a list of available updates.

  2. Choose the package called UmbracoCms and select update.

The upgrade will run through all the files and make sure you have the latest changes while leaving files you have updated.

Upgrade manually from a zip file

Copy the following folders from inside the .zip file over the existing folders in your site:

  • /bin

  • /Umbraco

There are hosting providers (we know of one: RackSpace Cloud) that require proper casing of file and folder names. Normally on Windows this is not a problem. If your hosting provider however forces proper casing, you will need to verify that the folder and file names are in the same casing as in the newest version you're upgrading to.

Merge configuration files

You can expect some changes to the following configuration files:

  • Any file in the /Config folder

  • The /Global.asax file

  • The web.config file in the root of your site (Important: make sure to copy back the version number, and the connection string as they were.)

  • In rare cases, the web.config file in the /Views folder

There's also the possibility that some files in the /Config folder are new or some have been removed (we do make a note of this in the release notes). WinMerge (and other diff tools) can compare folders as well so you can spot these differences.

Merge UI.xml and language files

Some packages like Umbraco Forms add dialogs to the UI.xml. Make sure to merge those changes back in from your backup during the upgrade so that the packages continue to work. This file can be found in: /Umbraco/Config/Create/UI.xml.

Packages like Umbraco Forms and Courier also make changes to the language files located in: /Umbraco/Config/Lang/*.xml (typically en.xml).

Finalize

After copying the files and making the config changes, you can open your site. You should see the installer which will guide you through the upgrade.

The installer will do two things:

  • Update the version number in the web.config

  • Upgrade your database in case there are any changes

We are aware that, currently, the installer is asking you for the database details of a blank database while upgrading. In the near future this will be pre-filled with your existing details and the wording will be updated. So no need to be scared. Enter the details of your existing database and Umbraco will upgrade it to the latest version when necessary.

Run an unattended upgrade

When upgrading your Umbraco project to Umbraco v8.12+ it is possible to enable the upgrade to run unattended. This means that you will not need to run through the installation wizard when upgrading.

Below you will find the steps you need to take in order to upgrade your project unattended.

Are you running a load balanced setup with multiple servers and environments?

Enable the feature

  1. Add the Umbraco.Core.RuntimeState.UpgradeUnattended key to appSettings in your web.config file.

  2. Set the value of the key to true.

    <add key="Umbraco.Core.RuntimeState.UpgradeUnattended" value="true" />

Check the ConfigurationStatus

In order to trigger the actual upgrade, the correct version number needs to be set.

It is important to use the version number of the version that you are upgrading to. If this is not set, the upgrade will not run even if the UpgradeUnattended key has been set to true.

  1. Locate the ConfigurationStatus key in the appSettings section in your web.config file.

  2. Update the value to match the Umbraco version that you are upgrading to.

<add key="Umbraco.Core.ConfigurationStatus" value="x.x.x"/>

Run the upgrade

With the correct configuration applied, the project will be upgraded on the next boot.

While the upgrade processes are running, any requests made to the site will be "put on hold", meaning that no content will be returned before the upgrade is complete.

Boot order

The Runtime level will use Run instead of Upgrade in order to allow the website to continue to boot up directly after the migration is run, instead of initiating the otherwise required restart.

The upgrade is run after Composers but before Components. This is because the migration requires services that are registered in Composers and Components requires that Umbraco and the database is ready.

Unattended upgrades in a load balanced setup

Follow the steps outlined below to use run unattended upgrades in a load balanced setup.

  1. Upgrade Umbraco via NuGet in Visual Studio. Make sure the Umbraco.Core.ConfigurationStatus key in appSetting in the web.config file is updated to match the target version.

  2. Deploy to all environments, including the updated appSetting for Umbraco.Core.ConfigurationStatus.

  3. Set the Umbraco.Core.RuntimeState.UpgradeUnattended key in appSetting in the web.config to true for the Main server only.

  4. Request a page on the Main server and the upgrade will run automatically.

  5. Wait for the upgrade to complete.

  6. Browse the Read-Only servers and make sure they do not show the “upgrade required” screen.

Post installation

One important recommendation is to always remove the install folder immediately after upgrading Umbraco and never to upload it to a live server.

Potential issues and gotchas

Browser cache

Google Chrome has notoriously aggressive caching, so if something doesn't seem to work well in the backoffice, make sure to clear cache and cookies thoroughly (for other browsers as well). Normally the browser cache problem is automatically handled in an Umbraco upgrade by modifying the config/ClientDependency.config version number. If you however wish to re-force this update you can increment this version number which will ensure that any server-side cache of JavaScript and stylesheets gets cleared as well.

One way to nudge the cache in Chrome is to open the developer tools (F12) and go to the settings (the cog icon). There will be a checkbox that says "Disable cache (while DevTools is open)". Once this checkbox is on you can refresh the page and the cache should be invalidated. To force it even more, the "reload" button next to your address bar now has extra options when you right-click it. It should have "Normal reload", "Hard reload" and "Empty cache and hard reload" now. The last option is the most thorough and you might want to try that.

Version Specific Upgrades

This document covers specific upgrade steps if a version requires them. Most versions do not require specific upgrade steps and you will be able to upgrade directly from your current version.

Version Specific Upgrades

Use the information below to learn about any potential breaking changes and common pitfalls when upgrading your Umbraco CMS project.

If any specific steps are involved with upgrading to a specific version they will be listed below.

Breaking changes

Umbraco 13

Below you can find the list of breaking changes introduced in Umbraco 13.

Note: You need to be aware of some things if you are using EF Core, and have installed the Microsoft.EntityFrameworkCore.Design 8.0.0 package:

  • This package has a transient dependency to Microsoft.CodeAnalysis.Common which clashes with the same transient dependency from Umbraco.Cms 13.0.0. This happens because Microsoft.EntityFrameworkCore.Design 8.0.0 requires Microsoft.CodeAnalysis.CSharp.Workspaces in v4.5.0 or higher.

  • If there are no other dependencies that need that package then it installs it in the lowest allowed version (4.5.0). That package then has a strict dependency on Microsoft.CodeAnalysis.Common version 4.5.0. The problem is Umbraco.Cms through its own transient dependencies that require the version of Microsoft.CodeAnalysis.Common to be >= 4.8.0.

  • This can be fixed by installing Microsoft.CodeAnalysis.CSharp.Workspaces version 4.8.0 as a specific package instead of leaving it as a transient dependency. This is because it will then have a strict transient dependency on Microsoft.CodeAnalysis.Common version 4.8.0, which is the same that Umbraco has.

Umbraco 12

Umbraco 12 does not include many binary breaking changes, but there are some.

Most notable is a functional breaking change in Migrations, that from Umbraco 12. Each translation will be executed in its own transactions instead of all migrations in one big transaction. This change has been made to ease the support for Sqlite.

A type, enum, record, or struct visible outside the assembly is missing in the compared assembly when required to be present.

  • PagedModel has moved namespace from Umbraco.New.Cms.Core.Models to Umbraco.Cms.Core.Models

  • Umbraco.Cms.Infrastructure.Migrations.PostMigrations.ClearCsrfCookies is removed. The functionality can be archived by implementing a notification handler for the new UmbracoPlanExecutedNotification.

  • Umbraco.Cms.Core.Cache.DistributedCacheBinder is now divided into separate files for each notification handler

  • Umbraco.Cms.Infrastructure.Migrations.PostMigrations.DeleteLogViewerQueryFile was a no-op method removed.

  • Umbraco.Cms.Infrastructure.Migrations.PostMigrations.RebuildPublishedSnapshot replaced with a RebuildCache flag on the MigrationBase

A member that is visible outside of the assembly is missing in the compared assembly when required to be present.

  • Umbraco.Cms.Core.Migrations.IMigrationPlanExecutor.Execute(Umbraco.Cms.Infrastructure.Migrations.MigrationPlan,System.String) replaced with Umbraco.Cms.Core.Migrations.IMigrationPlanExecutor.ExecutePlan(Umbraco.Cms.Infrastructure.* * Migrations.MigrationPlan,System.String) that returns an rich object instead of a string

  • Umbraco.Cms.Infrastructure.Migrations.IMigrationContext.AddPostMigration``1 Removed and replaced with notification

  • Umbraco.Cms.Infrastructure.Migrations.MigrationPlan.AddPostMigration``1

  • Removed and replaced with notification

  • Umbraco.Cms.Infrastructure.Migrations.MigrationPlan.get_PostMigrationTypes removed.

  • Umbraco.Cms.Infrastructure.Migrations.Upgrade.Upgrader.Execute(Umbraco.Cms.Core.Migrations.IMigrationPlanExecutor,Umbraco.Cms.Core.Scoping.IScopeProvider,Umbraco.Cms.Core.Services.IKeyValueService) was obsolete and is replaced by method taking a ICoreScopeProvider instead of a IScopeProvider

An abstract member was added to the right side of the comparison to an unsealed type.

  • PublishedPropertyBase now requires inheritors to implement GetDeliveryApiValue(System.Boolean,System.String,System.String)

A member was added to an interface without a default implementation.

  • Umbraco.Cms.Core.Events.IEventAggregator.Publish2(System.Collections.Generic.IEnumerable{0})

  • Umbraco.Cms.Core.Events.IEventAggregator.PublishAsync2(System.Collections.Generic.IEnumerable{0},System.Threading.CancellationToken)

  • Umbraco.Cms.Core.Models.PublishedContent.IPublishedProperty.GetDeliveryApiValue(System.Boolean,System.String,System.String)

  • Umbraco.Cms.Core.Models.PublishedContent.IPublishedPropertyType.ConvertInterToDeliveryApiObject(Umbraco.Cms.Core.Models.PublishedContent.IPublishedElement,Umbraco.Cms.Core.PropertyEditors.PropertyCacheLevel,System.Object,System.Boolean,System.Boolean)

  • Umbraco.Cms.Core.Models.PublishedContent.IPublishedPropertyType.ConvertInterToDeliveryApiObject(Umbraco.Cms.Core.Models.PublishedContent.IPublishedElement,Umbraco.Cms.Core.PropertyEditors.PropertyCacheLevel,System.Object,System.Boolean)

  • Umbraco.Cms.Core.Models.PublishedContent.IPublishedPropertyType.DeliveryApiCacheLevel

  • Umbraco.Cms.Core.Scoping.ICoreScope.Locks

  • Umbraco.Cms.Core.Migrations.IMigrationPlanExecutor.ExecutePlan(Umbraco.Cms.Infrastructure.Migrations.MigrationPlan,System.String)

  • Umbraco.Cms.Infrastructure.Search.IUmbracoIndexingHandler.RemoveProtectedContent

  • Umbraco.Cms.Infrastructure.Examine.IUmbracoIndex.SupportProtectedContent

Umbraco 11

Besides the documented changes, we have also seen a few method signatures that are changed to support Nullable-Reference-Types.

The breaking changes in Umbraco 11 are mainly the removal of classes, methods, and so on, marked as obsolete in Umbraco 9.

The full list of API-breaking changes can be found below.

Obsolete code removed

The following have been removed after having been obsoleted since Umbraco 9.

Umbraco.Extensions

Umbraco.Extensions.ServiceCollectionExtensions.AddUnique<TImplementing>(Microsoft.Extensions.DependencyInjection.IServiceCollection)

Umbraco.Extensions.EnumExtensions.HasFlagAll<T>(T, T)

Umbraco.Extensions.FriendlyImageCropperTemplateExtensions.GetLocalCropUrl(Umbraco.Cms.Core.Models.MediaWithCrops, string, string?)

Umbraco.Cms.Core

Umbraco.Cms.Core.Constants.Conventions.Member.IsApproved
Umbraco.Cms.Core.Constants.Conventions.Member.IsApprovedLabel
Umbraco.Cms.Core.Constants.Conventions.Member.IsLockedOut
Umbraco.Cms.Core.Constants.Conventions.Member.IsLockedOutLabel
Umbraco.Cms.Core.Constants.Conventions.Member.LastLoginDate
Umbraco.Cms.Core.Constants.Conventions.Member.LastLoginDateLabel
Umbraco.Cms.Core.Constants.Conventions.Member.LastPasswordChangeDate
Umbraco.Cms.Core.Constants.Conventions.Member.LastPasswordChangeDateLabel
Umbraco.Cms.Core.Constants.Conventions.Member.LastLockoutDate
Umbraco.Cms.Core.Constants.Conventions.Member.LastLockoutDateLabel
Umbraco.Cms.Core.Constants.Conventions.Member.FailedPasswordAttempts
Umbraco.Cms.Core.Constants.Conventions.Member.FailedPasswordAttemptsLabel

Umbraco.Cms.Core.WebAssets.IRuntimeMinifier.Reset()

Umbraco.Cms.Core.Services.IExternalLoginService

Umbraco.Cms.Core.Services.ExternalLoginService.ExternalLoginService(
    Umbraco.Cms.Core.Scoping.ICoreScopeProvider,
    Microsoft.Extensions.Logging.ILoggerFactory,
    Umbraco.Cms.Core.Events.IEventMessagesFactory,
    Umbraco.Cms.Core.Persistence.Repositories.IExternalLoginRepository)

Umbraco.Cms.Core.Services.ExternalLoginService.GetExternalLogins(int)

Umbraco.Cms.Core.Services.ExternalLoginService.GetExternalLoginTokens(int)

Umbraco.Cms.Core.Services.ExternalLoginService.Save(int,
    System.Collections.Generic.IEnumerable<Umbraco.Cms.Core.Security.IExternalLogin>)

Umbraco.Cms.Core.Services.ExternalLoginService.Save(int,
    System.Collections.Generic.IEnumerable<Umbraco.Cms.Core.Security.IExternalLoginToken>)

Umbraco.Cms.Core.Services.ExternalLoginService.DeleteUserLogins(int)

Umbraco.Cms.Core.Services.IMacroWithAliasService

Umbraco.Cms.Core.Services.ITwoFactorLoginService2

Umbraco.Cms.Core.Services.LocalizedTextService.LocalizedTextService(
    System.Collections.Generic.IDictionary<System.Globalization.CultureInfo, System.Collections.Generic.IDictionary<string, System.Collections.Generic.IDictionary<string, string>>>,
    Microsoft.Extensions.Logging.ILogger<Umbraco.Cms.Core.Services.LocalizedTextService>)

Umbraco.Cms.Core.Services.ServiceContext.ServiceContext(
    System.Lazy<Umbraco.Cms.Core.Services.IPublicAccessService>?,
    System.Lazy<Umbraco.Cms.Core.Services.IDomainService>?,
    System.Lazy<Umbraco.Cms.Core.Services.IAuditService>?,
    System.Lazy<Umbraco.Cms.Core.Services.ILocalizedTextService>?,
    System.Lazy<Umbraco.Cms.Core.Services.ITagService>?,
    System.Lazy<Umbraco.Cms.Core.Services.IContentService>?,
    System.Lazy<Umbraco.Cms.Core.Services.IUserService>?,
    System.Lazy<Umbraco.Cms.Core.Services.IMemberService>?,
    System.Lazy<Umbraco.Cms.Core.Services.IMediaService>?,
    System.Lazy<Umbraco.Cms.Core.Services.IContentTypeService>?,
    System.Lazy<Umbraco.Cms.Core.Services.IMediaTypeService>?,
    System.Lazy<Umbraco.Cms.Core.Services.IDataTypeService>?,
    System.Lazy<Umbraco.Cms.Core.Services.IFileService>?,
    System.Lazy<Umbraco.Cms.Core.Services.ILocalizationService>?,
    System.Lazy<Umbraco.Cms.Core.Services.IPackagingService>?,
    System.Lazy<Umbraco.Cms.Core.Services.IServerRegistrationService>?,
    System.Lazy<Umbraco.Cms.Core.Services.IEntityService>?,
    System.Lazy<Umbraco.Cms.Core.Services.IRelationService>?,
    System.Lazy<Umbraco.Cms.Core.Services.IMacroService>?,
    System.Lazy<Umbraco.Cms.Core.Services.IMemberTypeService>?,
    System.Lazy<Umbraco.Cms.Core.Services.IMemberGroupService>?,
    System.Lazy<Umbraco.Cms.Core.Services.INotificationService>?,
    System.Lazy<Umbraco.Cms.Core.Services.IExternalLoginService>?,
    System.Lazy<Umbraco.Cms.Core.Services.IRedirectUrlService>?,
    System.Lazy<Umbraco.Cms.Core.Services.IConsentService>?,
    System.Lazy<Umbraco.Cms.Core.Services.IKeyValueService>?,
    System.Lazy<Umbraco.Cms.Core.Services.IContentTypeBaseServiceProvider>?)

Umbraco.Cms.Core.Services.ServiceContext.CreatePartial(
    Umbraco.Cms.Core.Services.IContentService?,
    Umbraco.Cms.Core.Services.IMediaService?,
    Umbraco.Cms.Core.Services.IContentTypeService?,
    Umbraco.Cms.Core.Services.IMediaTypeService?,
    Umbraco.Cms.Core.Services.IDataTypeService?,
    Umbraco.Cms.Core.Services.IFileService?,
    Umbraco.Cms.Core.Services.ILocalizationService?,
    Umbraco.Cms.Core.Services.IPackagingService?,
    Umbraco.Cms.Core.Services.IEntityService?,
    Umbraco.Cms.Core.Services.IRelationService?,
    Umbraco.Cms.Core.Services.IMemberGroupService?,
    Umbraco.Cms.Core.Services.IMemberTypeService?,
    Umbraco.Cms.Core.Services.IMemberService?,
    Umbraco.Cms.Core.Services.IUserService?,
    Umbraco.Cms.Core.Services.ITagService?,
    Umbraco.Cms.Core.Services.INotificationService?,
    Umbraco.Cms.Core.Services.ILocalizedTextService?,
    Umbraco.Cms.Core.Services.IAuditService?,
    Umbraco.Cms.Core.Services.IDomainService?,
    Umbraco.Cms.Core.Services.IMacroService?,
    Umbraco.Cms.Core.Services.IPublicAccessService?,
    Umbraco.Cms.Core.Services.IExternalLoginService?,
    Umbraco.Cms.Core.Services.IServerRegistrationService?,
    Umbraco.Cms.Core.Services.IRedirectUrlService?,
    Umbraco.Cms.Core.Services.IConsentService?,
    Umbraco.Cms.Core.Services.IKeyValueService?,
    Umbraco.Cms.Core.Services.IContentTypeBaseServiceProvider?)

Umbraco.Cms.Core.Services.TwoFactorLoginService.TwoFactorLoginService(
    Umbraco.Cms.Core.Persistence.Repositories.ITwoFactorLoginRepository,
    Umbraco.Cms.Core.Scoping.ICoreScopeProvider,
    System.Collections.Generic.IEnumerable<Umbraco.Cms.Core.Security.ITwoFactorProvider>,
    Microsoft.Extensions.Options.IOptions<Microsoft.AspNetCore.Identity.IdentityOptions>,
    Microsoft.Extensions.Options.IOptions<Umbraco.Cms.Core.Security.BackOfficeIdentityOptions>)

Umbraco.Cms.Core.Routing.DefaultUrlProvider.DefaultUrlProvider(
    Microsoft.Extensions.Options.IOptionsMonitor<Umbraco.Cms.Core.Configuration.Models.RequestHandlerSettings>,
    Microsoft.Extensions.Logging.ILogger<Umbraco.Cms.Core.Routing.DefaultUrlProvider>,
    Umbraco.Cms.Core.Routing.ISiteDomainMapper,
    Umbraco.Cms.Core.Web.IUmbracoContextAccessor,
    Umbraco.Cms.Core.Routing.UriUtility)

Umbraco.Cms.Core.Persistence.Repositories.IExternalLoginRepository

Umbraco.Cms.Core.Persistence.Repositories.IMacroWithAliasRepository

Umbraco.Cms.Core.Persistence.Repositories.IMemberRepository.SetLastLogin(string, System.DateTime)

Umbraco.Cms.Core.Notifications.UmbracoApplicationComponentsInstallingNotification

Umbraco.Cms.Core.Notifications.UmbracoApplicationMainDomAcquiredNotification


Umbraco.Cms.Core.Notifications.UmbracoApplicationStartingNotification.UmbracoApplicationStartingNotification(Umbraco.Cms.Core.RuntimeLevel)

Umbraco.Cms.Core.Notifications.UmbracoApplicationStoppingNotification.UmbracoApplicationStoppingNotification()

Umbraco.Cms.Core.Models.IContentTypeWithHistoryCleanup

Umbraco.Cms.Core.Models.Language.Language(Umbraco.Cms.Core.Configuration.Models.GlobalSettings, string)

Umbraco.Cms.Core.Models.RelationType.RelationType(string, string, bool, System.Nullable<System.Guid>, System.Nullable<System.Guid>)

Umbraco.Cms.Core.Models.PublishedContent.PublishedContentType.PublishedContentType(int, string,
    Umbraco.Cms.Core.Models.PublishedContent.PublishedItemType,
    System.Collections.Generic.IEnumerable<string>,
    System.Collections.Generic.IEnumerable<Umbraco.Cms.Core.Models.PublishedContent.PublishedPropertyType>,
    Umbraco.Cms.Core.Models.ContentVariation,
    bool)

Umbraco.Cms.Core.Models.PublishedContent.PublishedContentType.PublishedContentType(int, string,
    Umbraco.Cms.Core.Models.PublishedContent.PublishedItemType, System.Collections.Generic.IEnumerable<string>,
    System.Func<Umbraco.Cms.Core.Models.PublishedContent.IPublishedContentType,
    System.Collections.Generic.IEnumerable<Umbraco.Cms.Core.Models.PublishedContent.IPublishedPropertyType>>,
    Umbraco.Cms.Core.Models.ContentVariation,
    bool)

Umbraco.Cms.Core.Models.Mapping.ContentTypeMapDefinition.ContentTypeMapDefinition(
    Umbraco.Cms.Core.Models.Mapping.CommonMapper,
    Umbraco.Cms.Core.PropertyEditors.PropertyEditorCollection,
    Umbraco.Cms.Core.Services.IDataTypeService,
    Umbraco.Cms.Core.Services.IFileService,
    Umbraco.Cms.Core.Services.IContentTypeService,
    Umbraco.Cms.Core.Services.IMediaTypeService,
    Umbraco.Cms.Core.Services.IMemberTypeService,
    Microsoft.Extensions.Logging.ILoggerFactory,
    Umbraco.Cms.Core.Strings.IShortStringHelper,
    Microsoft.Extensions.Options.IOptions<Umbraco.Cms.Core.Configuration.Models.GlobalSettings>,
    Umbraco.Cms.Core.Hosting.IHostingEnvironment)

Umbraco.Cms.Core.Models.ContentEditing.UserGroupPermissionsSave.Validate(System.ComponentModel.DataAnnotations.ValidationContext)

Umbraco.Cms.Core.Install.InstallSteps.TelemetryIdentifierStep.TelemetryIdentifierStep(
    Microsoft.Extensions.Logging.ILogger<Umbraco.Cms.Core.Install.InstallSteps.TelemetryIdentifierStep>,
    Microsoft.Extensions.Options.IOptions<Umbraco.Cms.Core.Configuration.Models.GlobalSettings>,
    Umbraco.Cms.Core.Configuration.IConfigManipulator)

Umbraco.Cms.Core.IO.ViewHelper.ViewHelper(Umbraco.Cms.Core.IO.IFileSystem)

Umbraco.Cms.Core.HealthChecks.Checks.Security.BaseHttpHeaderCheck.BaseHttpHeaderCheck(
    Umbraco.Cms.Core.Hosting.IHostingEnvironment,
    Umbraco.Cms.Core.Services.ILocalizedTextService,
    string,
    string,
    string,
    bool)

Umbraco.Cms.Core.DependencyInjection.UmbracoBuilderExtensions.AddOEmbedProvider<T>(Umbraco.Cms.Core.DependencyInjection.IUmbracoBuilder)

Umbraco.Cms.Core.DependencyInjection.UmbracoBuilderExtensions.OEmbedProviders(Umbraco.Cms.Core.DependencyInjection.IUmbracoBuilder)

Umbraco.Cms.Core.Configuration.Models.RequestHandlerSettings.CharCollection.get
Umbraco.Cms.Core.Configuration.Models.RequestHandlerSettings.CharCollection.set

Umbraco.Cms.Core.Composing.IUserComposer

Umbraco.Cms.Core.Security.BackOfficeUserStore.BackOfficeUserStore(
    Umbraco.Cms.Core.Scoping.ICoreScopeProvider,
    Umbraco.Cms.Core.Services.IUserService,
    Umbraco.Cms.Core.Services.IEntityService,
    Umbraco.Cms.Core.Services.IExternalLoginService,
    Microsoft.Extensions.Options.IOptions<Umbraco.Cms.Core.Configuration.Models.GlobalSettings>,
    Umbraco.Cms.Core.Mapping.IUmbracoMapper,
    Umbraco.Cms.Core.Security.BackOfficeErrorDescriber,
    Umbraco.Cms.Core.Cache.AppCaches)

Umbraco.Cms.Core.Security.MemberUserStore.MemberUserStore(
    Umbraco.Cms.Core.Services.IMemberService,
    Umbraco.Cms.Core.Mapping.IUmbracoMapper,
    Umbraco.Cms.Core.Scoping.ICoreScopeProvider,
    Microsoft.AspNetCore.Identity.IdentityErrorDescriber,
    Umbraco.Cms.Core.PublishedCache.IPublishedSnapshotAccessor,
    Umbraco.Cms.Core.Services.IExternalLoginService)

Umbraco.Cms.Core.Logging.Viewer.ILogViewer.GetLogLevel()

Umbraco.Cms.Core.Logging.Viewer.SerilogLogViewerSourceBase.SerilogLogViewerSourceBase(
    Umbraco.Cms.Core.Logging.Viewer.ILogViewerConfig,
    Serilog.ILogger)

Umbraco.Cms.Core.Logging.Viewer.SerilogLogViewerSourceBase.GetLogLevel()

Umbraco.Cms.Core.Configuration.JsonConfigManipulator.JsonConfigManipulator(Microsoft.Extensions.Configuration.IConfiguration)

Umbraco.Cms.Infrastructure

Umbraco.Cms.Infrastructure.Persistence.Repositories.Implement.MemberRepository.SetLastLogin(string, System.DateTime)

Umbraco.Cms.Infrastructure.Packaging.PackageMigrationBase.PackageMigrationBase(
    Umbraco.Cms.Core.Services.IPackagingService,
    Umbraco.Cms.Core.Services.IMediaService,
    Umbraco.Cms.Core.IO.MediaFileManager,
    Umbraco.Cms.Core.PropertyEditors.MediaUrlGeneratorCollection,
    Umbraco.Cms.Core.Strings.IShortStringHelper,
    Umbraco.Cms.Core.Services.IContentTypeBaseServiceProvider,
    Umbraco.Cms.Infrastructure.Migrations.IMigrationContext)

Umbraco.Cms.Infrastructure.Migrations.Install.DatabaseSchemaCreator.DatabaseSchemaCreator(
    Umbraco.Cms.Infrastructure.Persistence.IUmbracoDatabase?,
    Microsoft.Extensions.Logging.ILogger<Umbraco.Cms.Infrastructure.Migrations.Install.DatabaseSchemaCreator>,
    Microsoft.Extensions.Logging.ILoggerFactory,
    Umbraco.Cms.Core.Configuration.IUmbracoVersion,
    Umbraco.Cms.Core.Events.IEventAggregator)

Umbraco.Cms.Infrastructure.Migrations.Install.DatabaseSchemaCreatorFactory.DatabaseSchemaCreatorFactory(
    Microsoft.Extensions.Logging.ILogger<Umbraco.Cms.Infrastructure.Migrations.Install.DatabaseSchemaCreator>,
    Microsoft.Extensions.Logging.ILoggerFactory,
    Umbraco.Cms.Core.Configuration.IUmbracoVersion,
    Umbraco.Cms.Core.Events.IEventAggregator)

Umbraco.Cms.Infrastructure.HostedServices.RecurringHostedServiceBase.RecurringHostedServiceBase(
    System.TimeSpan,
    System.TimeSpan)

Umbraco.Cms.Infrastructure.HostedServices.ReportSiteTask.ReportSiteTask(
    Microsoft.Extensions.Logging.ILogger<Umbraco.Cms.Infrastructure.HostedServices.ReportSiteTask>,
    Umbraco.Cms.Core.Configuration.IUmbracoVersion,
    Microsoft.Extensions.Options.IOptions<Umbraco.Cms.Core.Configuration.Models.GlobalSettings>)

Umbraco.Cms.Web

Umbraco.Cms.Web.Common.Security.ConfigureIISServerOptions

Umbraco.Cms.Web.Common.RuntimeMinification.SmidgeRuntimeMinifier.Reset()

Umbraco.Cms.Web.Common.Middleware.UmbracoRequestMiddleware.UmbracoRequestMiddleware(
    Microsoft.Extensions.Logging.ILogger<Umbraco.Cms.Web.Common.Middleware.UmbracoRequestMiddleware>,
    Umbraco.Cms.Core.Web.IUmbracoContextFactory,
    Umbraco.Cms.Core.Cache.IRequestCache,
    Umbraco.Cms.Core.Events.IEventAggregator,
    Umbraco.Cms.Core.Logging.IProfiler,
    Umbraco.Cms.Core.Hosting.IHostingEnvironment,
    Umbraco.Cms.Core.Routing.UmbracoRequestPaths,
    Umbraco.Cms.Infrastructure.WebAssets.BackOfficeWebAssets,
    Microsoft.Extensions.Options.IOptionsMonitor<Smidge.Options.SmidgeOptions>,
    Umbraco.Cms.Core.Services.IRuntimeState,
    Umbraco.Cms.Core.Models.PublishedContent.IVariationContextAccessor,
    Umbraco.Cms.Core.PublishedCache.IDefaultCultureAccessor)

Umbraco.Cms.Web.Website.Controllers.UmbLoginController.UmbLoginController(
    Umbraco.Cms.Core.Web.IUmbracoContextAccessor,
    Umbraco.Cms.Infrastructure.Persistence.IUmbracoDatabaseFactory,
    Umbraco.Cms.Core.Services.ServiceContext,
    Umbraco.Cms.Core.Cache.AppCaches,
    Umbraco.Cms.Core.Logging.IProfilingLogger,
    Umbraco.Cms.Core.Routing.IPublishedUrlProvider,
    Umbraco.Cms.Web.Common.Security.IMemberSignInManager)

Umbraco.Cms.Web.BackOffice.Trees.MemberTypeAndGroupTreeControllerBase.MemberTypeAndGroupTreeControllerBase(
    Umbraco.Cms.Core.Services.ILocalizedTextService,
    Umbraco.Cms.Core.UmbracoApiControllerTypeCollection,
    Umbraco.Cms.Core.Trees.IMenuItemCollectionFactory,
    Umbraco.Cms.Core.Events.IEventAggregator)

Umbraco.Cms.Web.BackOffice.Controllers.CurrentUserController.CurrentUserController(
    Umbraco.Cms.Core.IO.MediaFileManager,
    Microsoft.Extensions.Options.IOptions<Umbraco.Cms.Core.Configuration.Models.ContentSettings>,
    Umbraco.Cms.Core.Hosting.IHostingEnvironment,
    Umbraco.Cms.Core.Media.IImageUrlGenerator,
    Umbraco.Cms.Core.Security.IBackOfficeSecurityAccessor,
    Umbraco.Cms.Core.Services.IUserService,
    Umbraco.Cms.Core.Mapping.IUmbracoMapper,
    Umbraco.Cms.Core.Security.IBackOfficeUserManager,
    Microsoft.Extensions.Logging.ILoggerFactory,
    Umbraco.Cms.Core.Services.ILocalizedTextService,
    Umbraco.Cms.Core.Cache.AppCaches,
    Umbraco.Cms.Core.Strings.IShortStringHelper,
    Umbraco.Cms.Web.Common.Security.IPasswordChanger<Umbraco.Cms.Core.Security.BackOfficeIdentityUser>)

Umbraco.Cms.Web.BackOffice.Controllers.EntityController.GetUrlsByUdis(Umbraco.Cms.Core.Udi[], string?)

Umbraco.Cms.Web.BackOffice.Controllers.HelpController.HelpController(Microsoft.Extensions.Logging.ILogger<Umbraco.Cms.Web.BackOffice.Controllers.HelpController>)

Umbraco.Cms.Web.BackOffice.Controllers.LanguageController.LanguageController(
    Umbraco.Cms.Core.Services.ILocalizationService,
    Umbraco.Cms.Core.Mapping.IUmbracoMapper,
    Microsoft.Extensions.Options.IOptionsSnapshot<Umbraco.Cms.Core.Configuration.Models.GlobalSettings>)

Umbraco.Cms.Web.BackOffice.Controllers.LogViewerController.LogViewerController(Umbraco.Cms.Core.Logging.Viewer.ILogViewer)
Umbraco.Cms.Web.BackOffice.Controllers.LogViewerController.GetLogLevel()

Umbraco.Cms.Web.BackOffice.Controllers.MediaController.GetPagedReferences(int, string, int, int)

Umbraco.Cms.Web.BackOffice.Controllers.MemberTypeController.GetAllTypes()

Umbraco.Cms.Web.BackOffice.Controllers.TemplateController.TemplateController(
    Umbraco.Cms.Core.Services.IFileService,
    Umbraco.Cms.Core.Mapping.IUmbracoMapper,
    Umbraco.Cms.Core.Strings.IShortStringHelper)

Umbraco.Cms.Tests

Umbraco.Cms.Tests.Common.Testing.TestOptionAttributeBase.ScanAssemblies

Code moved to new assemblies and namespaces

The following have been moved to new assemblies and their namespaces have been updated accordingly.

Umbraco.Extensions

Umbraco.Extensions.NPocoDatabaseExtensions.ConfigureNPocoBulkExtensions()

Umbraco.Extensions.UmbracoBuilderExtensions.AddUmbracoImageSharp(Umbraco.Cms.Core.DependencyInjection.IUmbracoBuilder)

Umbraco.Cms.Web

Umbraco.Cms.Web.Common.Media.ImageSharpImageUrlGenerator

Umbraco.Cms.Web.Common.ImageProcessors.CropWebProcessor

Umbraco.Cms.Web.Common.DependencyInjection.ConfigureImageSharpMiddlewareOptions
Umbraco.Cms.Web.Common.DependencyInjection.ConfigurePhysicalFileSystemCacheOptions

Umbraco.Cms.Infrastructure

Umbraco.Cms.Infrastructure.Persistence.LocalDb
Umbraco.Cms.Infrastructure.Persistence.FaultHandling.RetryPolicyFactory
Umbraco.Cms.Infrastructure.Persistence.FaultHandling.ThrottlingMode
Umbraco.Cms.Infrastructure.Persistence.FaultHandling.ThrottlingType
Umbraco.Cms.Infrastructure.Persistence.FaultHandling.ThrottledResourceType
Umbraco.Cms.Infrastructure.Persistence.FaultHandling.ThrottlingCondition
Umbraco.Cms.Infrastructure.Persistence.FaultHandling.Strategies.NetworkConnectivityErrorDetectionStrategy
Umbraco.Cms.Infrastructure.Persistence.FaultHandling.Strategies.SqlAzureTransientErrorDetectionStrategy

New interface methods

A few interfaces have been merged, adding new members to the original interfaces.

Umbraco.Cms.Core

Umbraco.Cms.Core.Services.IMacroService.GetAll(params string[])

Umbraco.Cms.Core.Persistence.Repositories.IMacroRepository.GetByAlias(string)
Umbraco.Cms.Core.Persistence.Repositories.IMacroRepository.GetAllByAlias(string[])

Umbraco.Cms.Core.Services.ITwoFactorLoginService.DisableWithCodeAsync(string, System.Guid, string)
Umbraco.Cms.Core.Services.ITwoFactorLoginService.ValidateAndSaveAsync(string, System.Guid, string, string)

Umbraco.Cms.Core.Models.IContentType.HistoryCleanup

Umbraco.Cms.Core.Media.IImageDimensionExtractor.SupportedImageFileTypes

No-Operation methods removed

A method not doing anything for the last couple of major releases have been removed.

Umbraco.Cms.Core

Umbraco.Cms.Core.Services.IMembershipMemberService<T>.SetLastLogin(string, System.DateTime)

Changes due to models made immutable

A single model have been made immutable, so the default constructor and the setters are not available anymore.

Umbraco.Cms.Infrastructure

Umbraco.Cms.Infrastructure.PublishedCache.DataSource.ContentData.ContentData()
Umbraco.Cms.Infrastructure.PublishedCache.DataSource.ContentData.Name.set
Umbraco.Cms.Infrastructure.PublishedCache.DataSource.ContentData.UrlSegment.set
Umbraco.Cms.Infrastructure.PublishedCache.DataSource.ContentData.VersionId.set
Umbraco.Cms.Infrastructure.PublishedCache.DataSource.ContentData.VersionDate.set
Umbraco.Cms.Infrastructure.PublishedCache.DataSource.ContentData.WriterId.set
Umbraco.Cms.Infrastructure.PublishedCache.DataSource.ContentData.TemplateId.set
Umbraco.Cms.Infrastructure.PublishedCache.DataSource.ContentData.Published.set
Umbraco.Cms.Infrastructure.PublishedCache.DataSource.ContentData.Properties.set
Umbraco.Cms.Infrastructure.PublishedCache.DataSource.ContentData.CultureInfos.set

Classes that does not inherit from base type anymore

The following classes now directly inherit from OEmbedProviderBase instead of EmbedProviderBase.

Umbraco.Cms.Core

Umbraco.Cms.Core.Media.EmbedProviders.DailyMotion
Umbraco.Cms.Core.Media.EmbedProviders.Flickr
Umbraco.Cms.Core.Media.EmbedProviders.GettyImages
Umbraco.Cms.Core.Media.EmbedProviders.Giphy
Umbraco.Cms.Core.Media.EmbedProviders.Hulu
Umbraco.Cms.Core.Media.EmbedProviders.Issuu
Umbraco.Cms.Core.Media.EmbedProviders.Kickstarter
Umbraco.Cms.Core.Media.EmbedProviders.Slideshare
Umbraco.Cms.Core.Media.EmbedProviders.Soundcloud
Umbraco.Cms.Core.Media.EmbedProviders.Ted
Umbraco.Cms.Core.Media.EmbedProviders.Twitter
Umbraco.Cms.Core.Media.EmbedProviders.Vimeo
Umbraco.Cms.Core.Media.EmbedProviders.YouTube
Umbraco 10

The diff library used in the Backoffice client has been updated and introduces a breaking change since the exposed global object has been renamed from JsDiff to Diff.

Removes mutable ContentSchedule property from IContent/Content to read/write content schedules.

Use IContentService.GetContentScheduleByContentId && IContentService.PersistContentSchedule or the optional contentSchedule parameter on IContentService.Save instead.

  • Removed public methods: PublishedSnapshotServiceEventHandler.Dispose, PublishedSnapshotServiceEventHandler.Dispose(bool), and .PublishedSnapshotServiceEventHandler.Initialize.

  • Removed public ctor.

  • Some public classes in the Cms.Core.Services namespace have moved assembly from Umbraco.Cms.Infrastructure to Umbraco.Cms.Core.

  • These same public classes have changed namespace from Umbraco.Cms.Core.Services.Implement to Umbraco.Cms.Core.Services.

NPoco types and interfaces are part of our public interface which means that this upgrade imposes breaking changes.

  • Removed support for Microsoft SQL Server Compact (SQL CE).

  • Removed ReadLock and WriteLock methods from ISqlSyntaxProvider interface. Use IDistributedLockingMechanism (or IScope which delegates to IDistributedLockingMechanism) instead.

  • Constants for SQL Server provider name moved+consolidated from Core.Constants.DatabaseProviders and Core.Constants.-DbProviderNames to Umbraco.Cms.Persistence.SqlServer.Constants

  • Some SQL Server related services moved from the Umbraco.Infrastructure project to the new Umbraco.Cms.Persistence.

  • SqlServer project with altered namespaces e.g. SqlServerSyntaxProvider, SqlServerBulkSqlInsertProvider, SqlServerDatabaseCreator.

Added the following methods/properties to ISqlSyntaxProvider. These must be implemented in any downstream implementation e.g:

  • ISqlSyntaxProvider.HandleCreateTable(IDatabase,TableDefinition,Boolean)

  • ISqlSyntaxProvider.GetFieldNameForUpdate()

  • ISqlSyntaxProvider.GetColumn(DatabaseType,String,String,String,String,Boolean)

  • ISqlSyntaxProvider.InsertForUpdateHint(Sql)

  • ISqlSyntaxProvider.AppendForUpdateHint(Sql)

  • ISqlSyntaxProvider.LeftJoinWithNestedJoin(Sql,Func<Sql,Sql>,String)

Update dependency versions:

  • SixLabors.ImageSharp from 1.0.4 to 2.1.1

  • SixLabors.ImageSharp.Web from 1.0.5 to 2.0.0

Renamed the CachedNameLength property to CacheHashLength on ImagingCacheSettings.

Moved ImageSharpImageUrlGenerator from project Umbraco.Infrastructure to Umbraco.Web.Common and updated the corresponding namespace and DI registration (from AddCoreInitialServices() to AddUmbracoImageSharp());

Moved ImageSharp configuration from the AddUmbracoImageSharp() extension method into separate IConfigureOptions<> implementations:

  • The middleware is configured in ConfigureImageSharpMiddlewareOptions (which also replaces ImageSharpConfigurationOptions that previously only set the default ImageSharp configuration);

  • The default physical cache is configured in ConfigurePhysicalFileSystemCacheOptions.

This is breaking because it is no longer possible to access the properties listed below through the IMember.Properties collection. You must now access them through their specific properties that is IMember.IsLockedOut.

  • umbracoMemberFailedPasswordAttempts

  • umbracoMemberApproved

  • umbracoMemberLockedOut

  • umbracoMemberLastLockoutDate

  • umbracoMemberLastLogin

  • umbracoMemberLastPasswordChangeDate

Additionally, when previously you resolved a Member as published content, all the default properties would be there twice. For instance, IsLockedOut would be there both as a property with the alias umbracoMemberLockedOut and with the alias IsLockedOut. Now it'll only be there once, with the alias being the name of the property, so IsLockedOut in this instance.

Lastly the nullable dates on a user, i.e. LastLoginLate will now be null instead of DateTime.MinValue when getting a user with the UserService.

Examine 3 breaking changes:

  • ValueSet immutable.

  • ValueSetValidationResult is renamed to ValueSetValidationStatus and ValueSetValidationResult is now a type.

bool TryFindContent(IPublishedRequestBuilder request);

Has changed to:

Task<bool> TryFindContent(IPublishedRequestBuilder request);
  • Added more methods to IRedirectUrlRepository and IRedirectUrlService.cs.

  • Added a new method on IPublishedModelFactory: Type GetModelType(string? alias);

  • The generic types of a BlockListItem<TContent, TSettings>instance in theBlockListModelreturned byBlockListPropertyValueConverteris now determined by calling this new method, which can be different and cause aModelBindingException` in your views.

IEnumerable<SearchResultEntity?> Search(string query, int pageSize, long pageIndex, out long totalFound, string? searchFrom
= null)

Has changed to:

Task<EntitySearchResults> SearchAsync(string query, int pageSize, long pageIndex, string? searchFrom = null);

StackQueue has been moved from Umbraco.Core.Collections to the Umbraco.Cms.Core.Collections namespace.

Globalsetting SqlWriteLockTimeOut has been removed

This setting has been superseded by DistributedLockingWriteLockDefaultTimeout.

GlobalSetting UmbracoPath cannot be configured

It is no longer possible to rename the /Umbraco folder path using configuration. The property still exists but is hardcoded to /Umbraco and will be removed in Umbraco 12, planned for release in June 2023.

Release notes

Find your upgrade path

13.latest to the latest version

Update _ViewImports.cshtml file

In Umbraco 14, Smidge has been removed from the CMS.

In the _ViewImports.cshtml of your project, remove the following lines:

@addTagHelper *, Smidge
@inject Smidge.SmidgeHelper SmidgeHelper

Otherwise, it will cause an error on the front end.

Update program.cs file

Remove u.UseInstallerEndpoints(); from the program.cs file to avoid issues when running the project

Update code using Angular JS

Deprecated property editors

Nested Content and Grid Layout have been removed. We recommend rebuilding it using Block Grid for the grid layout and either Block Grid or Block List for Nested Content.

The legacy Media Picker has been removed, use the default Media Picker.

Macros and partial views macros removed

Macros and partial views macros have been removed in Umbraco 14. We recommend using partial views or blocks in the Rich Text Editor (RTE).

Block Editor data format has changes

10.latest to 13.latest

It might be necessary to delete all of the bin and obj directories in each of the projects of your solution. It has been observed that Visual Studio's "Clean Solution" option is sometimes not enough.

You can upgrade from Umbraco 10 to the latest version directly. If you choose to skip upgrading to versions 11 and 12, you will no longer receive warning messages for obsolete features. However, if you do skip these versions, any breaking changes will no longer compile.

9.latest to 10

Important: .NET version 6.0.5 is the minimum required version for Umbraco 10 to be able to run. You can check with dotnet --list-sdks what your latest installed Software Development Kit (SDK) version is. The latest SDK version 6.0.301 includes .NET 6.0.6, while SDK version 6.0.300 includes .NET 6.0.5.

The upgrade path between Umbraco 9 and Umbraco 10 can be done directly by upgrading your project using NuGet. You will need to ensure the packages you are using are available in Umbraco 10.

SQL CE is no longer a supported database engine

There is no official migration path from SQL CE to another database engine.

The following options may suit your needs:

Steps to upgrade using Visual Studio

It's recommended that you upgrade the site offline, and test the upgrade fully before deploying it to the production environment.

  1. Stop your site in IIS to prevent any changes being made to the database or filesystem while you are upgrading.

  2. Open your Umbraco 9 project in Visual Studio.

  3. Right-click on the project name in the Solution Explorer and select Properties.

  4. Select .NET 6.0 from the Target Framework drop-down.

  5. Go to Tools > NuGet Package Manager > Manage NuGet Packages for Solution...

  6. Go to the Installed tab in the NuGet Package manager.

  7. Choose Umbraco.Cms.

  8. Select 10.0.0 from the Version drop-down and click Install to upgrade your project to version 10.

  9. Update Program.cs to the following:

public class Program
{
    public static void Main(string[] args)
        => CreateHostBuilder(args)
            .Build()
            .Run();

    // The calls to `ConfigureUmbracoDefaults` and `webBuilder.UseStaticWebAssets()` are new.
    public static IHostBuilder CreateHostBuilder(string[] args) =>
        Host.CreateDefaultBuilder(args)
            .ConfigureUmbracoDefaults()
            .ConfigureWebHostDefaults(webBuilder =>
            {
                webBuilder.UseStaticWebAssets();
                webBuilder.UseStartup<Startup>();
            });
}
  1. Remove the following files and folders:

    • /wwwroot/umbraco

    • /umbraco/PartialViewMacros

    • /umbraco/UmbracoBackOffice

    • /umbraco/UmbracoInstall

    • /umbraco/UmbracoWebsite

    • /umbraco/config/lang

    • /umbraco/config/appsettings-schema.json

  2. Restart your site in IIS, build and run your project to finish the installation of Umbraco 10.

To re-enable the appsettings IntelliSense, you must update your schema reference in the appsettings.json file and any other appsettings.{Environment}.json files from:

"$schema": "./umbraco/config/appsettings-schema.json",

To:

"$schema": "./appsettings-schema.json",

To upgrade to Umbraco 10, your database needs to be at least on Umbraco 8.18.

Upgrade of any publicly hosted environment

When the upgrade is completed and tested, and prior to deploying to any publicly accessible environment, you should consider the following:

  1. Ensure you have backups for both the database and the file system.

  2. Stop the site so it is not accessible during the upgrade process.

  3. Delete the relevant folders from the filesystem prior to deploying:

    • /wwwroot/umbraco

    • /umbraco/PartialViewMacros

    • /umbraco/UmbracoBackOffice

    • /umbraco/UmbracoInstall

    • /umbraco/UmbracoWebsite

    • /umbraco/config/lang

    • /umbraco/config/appsettings-schema.json

  4. Deploy the site how you normally would to your public facing environment.

  5. Start the site. At this point it will launch and upgrade the database, after which the site should become accessible and your upgrade is complete.

  6. Check the logs for any errors which may have occurred during the upgrade process.

8.latest to 9

There is no direct upgrade path from Umbraco 8 to Umbraco 9. It is however possible to migrate from Umbraco 8 sites to Umbraco 9 sites.

You can reuse your content by restoring your Umbraco 8 database into a new database used for an Umbraco 9 site.

You need to ensure the packages you are using are available in Umbraco 9, and you will need to reimplement your custom code and templates.

The direct upgrade path is not possible because the codebase has been fundamentally updated in Umbraco 9. The underlying web framework has been updated from ASP.NET to ASP.NET Core.

It is not possible to take this step while maintaining full compatibility with Umbraco 8.

8.0.0 to 8.1.0

IPublishedContent breaking changes in 8.1.0

The IPublishedContent interface is central to Umbraco, as it represents published content and media items at the rendering layer level. This could be in controllers or views. In other words, it is the interface that is used everywhere when building sites.

The introduction of multilingual support in version 8 required changes to the interface. For instance, a property value could be obtained with GetPropertyValue(alias) in version 7. Version 8 requires a new parameter for culture, and the call thus became Value(alias, culture).

In the excitement of the version 8 release, we assumed that IPublishedContent was "done". By our tests, everything was looking good. However, feedback from early testers showed that the interface was in some places odd or inconsistent or had issues.

Fixing the bugs is a requirement. Some of the required bug fixes could not be achieved without introducing some breaking changes.

At that point, we decided to give IPublishedContent some love. We fixed the bugs and made it clean, friendly, discoverable, and predictable for the entire life of version 8.

Breaking changes to such a central interface is not something we take lightly. Even though they do not impact the "concepts" nor require heavy refactoring, they may demand an amount of small fixes here and there.

The general idea underlying these changes is that:

  • The proper way to retrieve "something" from an IPublishedContent instance is always through a method, for example: Children(). And, when that method can be multilingual, the method accepts a culture parameter, which can be left null to get the "current" culture value.

  • To reduce the amount of breaking changes, and to simplify things for non-multilingual sites, existing properties such as document.Name and document.Children (and others) still exist, and return the value for the current culture. In other words, these properties are now implemented as document.Name => document.Name() or document.Children => document.Children().

The rest of this document presents each change in details.

More interfaces

It was possible to mock and test the IPublishedContent interface in version 7. It has been improved in version 8, but it still relies on concrete PublishedContentType and PublishedPropertyType classes to represent the content types, which complicates things.

In version 8.1, these two classes are abstracted as IPublishedContentType and IPublishedPropertyType, thus making IPublishedContent easier to mock and test.

CHANGE: This impacts every method accepting or returning a content type. For instance, the signature of most IPropertyValueConverter methods changes. References to PublishedContentType must be replaced with references to IPublishedContentType.

The following IPublishedContent members change:

Name

The document.Name property is complemented by the document.Name(string culture = null) extension method. The property returns the name for the current culture. The document.GetCulture(...).Name syntax is removed.

CHANGE: Calls to document.GetCulture(culture).Name must be replaced with document.Name(culture).

UrlSegment

The document.UrlSegment property is complemented by the document.UrlSegment(string culture = null) extension method. The property returns the Url segment for the current culture. The document.GetCulture(...).UrlSegment syntax is removed.

CHANGE: Calls to document.GetCulture(culture).UrlSegment must be replaced with document.UrlSegment(culture).

Culture

The document.GetCulture() method is removed. The proper way to get a culture date is document.CultureDate(string culture = null). The document.Cultures property now returns the invariant culture, for invariant documents.

CHANGE: Calls to document.GetCulture(culture).Date must be replaced with document.CultureDate(culture). Calls to document.Cultures must take into account the invariant culture.

Children

The document.Children property is complemented by the document.Children(string culture = null) extension method which, when a culture is specified always return children available for the specified culture. The property returns the children available for the current culture.

A new document.ChildrenForAllCultures property is introduced, which returns all children, regardless of whether they are available for a culture or not.

CHANGE: Calls to document.Children may have to be replaced by document.ChildrenForAllCultures depending on if the 8.0.x usage of this was relying on it returning unfiltered/all children regardless of the current routed culture.

Url

The document.Url property is complemented by the document.Url(string culture = null, UrlMode mode = UrlMode.Auto) extension method. The document.GetUrl(...) and document.UrlAbsolute() methods are removed. The UrlProviderMode enumeration is renamed UrlMode.

CHANGE: Calls to document.GetUrl(...) must be replaced with document.Url(...). Calls to document.UrlAbsolute() must be replaced with document.Url(mode: UrlMode.Absolute).

UmbracoContext

Due to the UrlProviderMode enumeration being renamed UrlMode, the signature of some overloads of the Url(...) method has changed. Methods that do not have a mode parameter remain unchanged.

CHANGE: Code such as context.Url(1234, UrlProviderMode.Absolute) must become context.Url(1234, UrlMode.Absolute).

The UmbracoContext class gives access to the rendering layer, which is more than a "cache". To reflect this, its ContentCache and MediaCache properties are renamed Content and Media. However, the old properties remain as obsolete properties.

CHANGE: None required in 8.1, but code such as context.ContentCache.GetById(1234) should eventually be converted to context.Content.GetById(1234) as the obsolete properties may be removed in a further release.

GetCulture

Because that method is useful, especially when building traditional, non-multilingual sites, it has been re-introduced in version 8.1 as document.GetCultureFromDomains().

CHANGE: None.

DomainHelper

DomainHelper has been replaced with a static DomainUtilities class.

CHANGE: It is rare that DomainHelper is used in code since it only contains one public method but if developers are using this, it can no longer be injected since it's now a static class called DomainUtilities.

Models Builder

If you're using ModelsBuilder in dll mode you need to delete the dlls before upgrading. Otherwise, they're going to be wrong and cause your whole site to throw errors.

If you're using ModelsBuilder in AppData mode and you have your generated models in your solution you need to update them after upgrading. PublishedContentType will need to be replaced with IPublishedContentType. If you have an implementation of the PropertyValueConverter class, you need to replace all references to PublishedPropertyType with IPublishedPropertyType within that class. Only after you do that will your solution build again.

AutoMapper

7.latest to 8.0.0

There is no direct upgrade path from Umbraco 7 to Umbraco 8. It is however possible to migrate content from Umbraco 7 sites to Umbraco 8 sites. We have added content migrations in Umbraco 8.1.0 enabling you to migrate your content from Umbraco 7 to Umbraco 8.

It is not possible to upgrade an Umbraco 7 site to Umbraco 8 because the codebase has been fundamentally updated in Umbraco 8. A lot of outdated code and technology has been removed and instead new, faster, and more secure technology has been implemented.

In Umbraco 8 we have added improvements and updated dependencies. We have also done a thorough clean-up to make it simpler for you to work with and extend your Umbraco project.

7.6.3 to 7.7.0

Version 7.7.0 introduces User Groups, better user management, and security facilities. This means that anything to do with "User Types" no longer exists including APIs that work with User Types. If your code or any package's code refers to "User Type" APIs, you need to make changes to your code. In many cases, we've added backward compatibility for these scenarios and obsoleted APIs that should no longer be used.

We are now by default using the e-mail address and not the username for the credentials. When trying to login to the backoffice you need to use the e-mail address as opposed to the username. If you do an upgrade from an older version and would like to keep using the username, change the <usernameIsEmail>true</usernameIsEmail> setting to false.

Version 7.7.2 no longer ships with the CookComputing.XmlRpcV2 assembly. If you reference this assembly or have a package that requires this assembly, you need to copy it back into your website.

This version also ships with far fewer client files that were only relevant for older versions of Umbraco (i.e. < 7.0.0). There might be some packages that were referencing these old client files. If you see missing image references you may need to contact the vendor of the package in question to update their references.

7.6.0 to 7.6.3

In short:

In Umbraco version 7.6.2 we made a mistake in the Property Value Converts (PVCs). This was corrected 2 days later in version 7.6.3. If you were having problems with querying the following Data Types on the frontend, make sure to upgrade to 7.6.3:

  • Multi Node Tree Picker

  • Related Links

  • Member Picker

Depending on whether you tried to fix the problem with those, you will need to fix them after you upgrade to 7.6.3.

Property Value Converters (PVC)

Umbraco stores data for Data Types in different ways. For a lot of pickers it will store 1072 or 1083,1283. These numbers refer to the identifier of the item in Umbraco. In the past, when building your templates, you would manually have to take that value and find the content item it belongs to. Then you would be able to get the data you wanted from there. An example of that is shown below:

@{
    IPublishedContent contactPage;
    var contactPageId = Model.Content.GetPropertyValue<int>("contactPagePicker");
    if (contactPageId > 0)
    {
        contactPage = Umbraco.TypedContent(contactPageId);
    }
}

<p>
  <a href="@contactPage.Url">@contactPage.Name</a>
</p>

In Umbraco 7.6.0, this is what you would do instead:

<p>
    <a href="@Model.Content.ContactPagePicker.Url">@Model.ContactPagePicker.Name</a>
</p>

To not break everybody's sites (the results of queries are different when PVCs are enabled), we disabled these PVCs by default.

We noticed that some new pickers also got their PVC's disabled when the configuration setting was set to false (<EnablePropertyValueConverters>false</EnablePropertyValueConverters>).

To make everything consistent, we made sure that the UDI pickers would always use PVC's in 7.6.2, this however reversed the behavior. So when PVC's were enabled, the property would not be converted and when PVC's were disabled, the property would be converted after all. This is the exact opposite behavior of 7.6.2.

So we have fixed this now in 7.6.3.

This issue only affects:

  • Multi Node Tree Picker

  • Related Links

  • Member Picker

Have you already upgraded to 7.6.2 and fixed queries for those three Data Types? Then you have to do that again in version 7.6.3.

7.4.0 to 7.6.0

The three most important things to note are:

  1. In web.config do not change useLegacyEncoding to false if it is currently set to true - changing the password encoding will cause you not being able to log in any more.

  2. In umbracoSettings.config leave EnablePropertyValueConverters set to false - this will help your existing content queries to still work.

  3. In tinyMceConfig.config make sure to remove <plugin loadOnFrontend="true">umbracolink</plugin> so that the rich text editor works as it should.

Breaking Changes

Dependencies

Umbraco has used a custom build of an old (1.2.11) version of log4net that supported Medium Trust. However, Umbraco itself does not support Medium Trust anymore, and therefore log4net has been upgraded to the standard, latest build of log4net 2.0.8.

An optional parameter has been added to the GetCropUrl method in order to support the background color parameter. This breaks the method signature and therefore might require a recompile of user's code.

The HtmlAgilityPack has been upgraded to version 1.4.9.5. The Umbraco upgrade process should take care of setting up the binding redirects appropriately.

Core

The Membership Provider useLegacyEncoding setting is now false by default, as the legacy password encoding has weaknesses.

This change only impacts new installs (no change for upgrades).

A large amount of property value converters contributed by the community have been merged in and are now the default value converters. These converters change the object types returned by GetPropertyValue for more convenient types.

Instead of returning comma-separated string values like it did before, the SliderValueConverter now returns a decimal or a Range<decimal> value that can be used directly in views.

This change only impacts new installs (no change for upgrades).

The new property value converters are controlled by an umbracoSettings.config setting. In the section settings/content, setting EnablePropertyValueConverters needs to be present and true to activate them.

Umbraco has been using a PetaPoco-managed UmbracoDatabase instance since version 7 came out. We realized that some of our legacy code still bypassed that mechanism and used parallel, out-of-band database connections, causing issues with transactions.

The legacy code has been refactored to rely on the UmbracoDatabase instance. However, because that database is disposed of during EndRequest, the code that ran after it has been disposed may not work anymore. This should then be updated to use either an HttpModule event that occurs before EndRequest or the new UmbracoModule.EndRequest event.

Version 7.6 introduces the notion of scopes, which allow for wrapping multiple service-level operations in one single transaction. The scopes API is partially public. Scopes are not meant for public use at this stage and we need a few more releases to ensure that the APIs are stable.

Scopes should not change how Umbraco functions.

The property editors for pickers for content, media, members, and related links have been updated to store UDI instead of the node ID. Pickers in sites being upgraded have been marked as obsolete but will continue to work as they always did.

New sites will have the obsolete pickers filtered out from the list of available property editors, but they can be enabled by a configuration flag.

For a long time, we had a rel attribute on an <img> tag when inserted into the RTE. This is invalid HTML markup. We worked around this by stripping this attribute using a Property Editor Value converter. Some developers relied on this attribute so we didn't change it to a "data-id" attribute which would have been valid. In 7.6 we are not storing integer IDs in these attributes. Instead of storing UDI values so with this change we no longer use rel or data-id and instead there will be a "data-udi" attribute. This change should affect only a small amount of people that were previously relying on the values from the "rel" attribute.

Others

We are shipping with SignalR in the core at version 2.2.1. If you already have SignalR installed into your app and are using an older version there may be conflicts.

The creation and editing of WebForms templates will no longer be supported as for version 7.6.0.

Upgrading via NuGet

This is an important one and there was no perfect solution to this. We have removed the UrlRewriting dependency and no longer ship with it. However, if you are using it we didn't want to have NuGet delete all of your rewrites. The good news is that if you are using it, the NuGet upgrade will not delete your rewrite file and everything should continue to work.

However, if you are not using it, you will get an error after upgrading. Here's how to fix it:

Since you aren't using UrlRewriting you will have probably never edited the UrlRewriting file. In this case, NuGet will detect that and remove it. However you will need to manually remove these UrlRewriting references from your web.config:

<section name="urlrewritingnet" restartOnExternalChanges="true" requirePermission="false" type="UrlRewritingNet.Configuration.UrlRewriteSection, UrlRewritingNet.UrlRewriter" />

and

<urlrewritingnet configSource="config\UrlRewriting.config" />

Remove the following httpModules from your web.config:

<system.web>
<httpModules>
    <add name="UrlRewriteModule" type="UrlRewritingNet.Web.UrlRewriteModule, UrlRewritingNet.UrlRewriter"/>
    ...
</httpModules>
<system.web>

and

<system.webServer>
    <modules>
    <remove name="UrlRewriteModule"/>
    <add name="UrlRewriteModule" type="UrlRewritingNet.Web.UrlRewriteModule, UrlRewritingNet.UrlRewriter"/>
    ...
    </modules>
</system.webServer>

Forms

Umbraco Forms 6.0.0 has been released to be compatible with Umbraco 7.6. It is a new major version release of Forms primarily due to the strict dependency on 7.6+. If you are using Forms, you will need to update it to version 6.0.0

Courier

Umbraco Courier 3.1.0 has been released to be compatible with Umbraco 7.6. If you are using Courier, you will need to update it to version 3.1.0.

7.3.0 to 7.4.0

For manual upgrades:

  • Copy the new folder ~/App_Plugins/ModelsBuilder into the site

  • Do not forget to merge ~/Config/trees.config and ~/Config/Dashboard.config - they contain new and updated entries that are required to be there

    • If you forget trees.config you will either not be able to browse the Developer section or you will be logged out immediately when trying to go to the developer section

7.2.0 to 7.3.0

Make sure to manually clear your cookies after updating all the files, otherwise you might an error relating to Umbraco.Core.Security.UmbracoBackOfficeIdentity.AddUserDataClaims(). The error looks like: Value cannot be null. Parameter name: value.

NuGet will do the following for you. If you're upgrading manually make sure to also:

  • Delete bin/Microsoft.Web.Helpers.dll

  • Delete bin/Microsoft.Web.Mvc.FixedDisplayModes.dll

  • Delete bin/System.Net.Http.dll

  • Delete bin/System.Net.Http.*.dll (all dll files starting with System.Net.Http) except for System.Net.Http.Formatting.dll

  • Delete bin/umbraco.XmlSerializers.dll

  • Add this in the appSetting section of your web.config file: <add key="owin:appStartup" value="UmbracoDefaultOwinStartup" />

Other considerations:

  • WebApi has been updated, normally you don’t have to do anything unless you have custom webapi configuration:

    • You need to update your web.config file to have the correct WebApi version references - this should be done by doing a compare/merge of your ~/web.config file with the ~/web.config file in the release

  • MVC has been updated to MVC5

    • You need to update your web.config file to have the correct MVC version references - this should be done by doing a compare/merge of your ~/web.config file with the ~/web.config file in the release

    • The upgrader will take care of updating all other web.config’s (in all other folders, for example, the Views and App_Plugins folders) to have the correct settings

  • It is not required that you merge the changes for the Examine index paths in the ExamineIndex.config file. However, if you do, your indexes will be rebuilt on startup because Examine will detect that they don’t exist at the new location.

  • It's highly recommended to clear the browser cache - the ClientDependency version is automatically bumped during installation which should force the browser cache to refresh, however in some edge cases this might not be enough.

7.1.0 to 7.2.0
  • Copy in the /Views/Partials/Grid (contains Grid rendering views).

7.0.2 to 7.1.0
  • Remove the /Install folder.

7.0.1 to 7.0.2
  • There was an update to the /umbraco/config/create/ui.xml which needs to be manually updated. The original element had this text:

<nodeType alias="users">
    <header>User</header>
    <usercontrol>/create/simple.ascx</usercontrol>
    <tasks>
    <create assembly="umbraco" type="userTasks" />
    <delete assembly="umbraco" type="userTasks" />
    </tasks>
</nodeType>
  • The usercontrol value has changed to: /create/user.ascx. This is a required change otherwise creating a new user will not work.

7.0.0 to 7.0.1
  • Remove all uGoLive dlls from /bin

    • These are not compatible with V7

  • Move appSettings/connectionStrings back to web.config

    • If you are on 7.0.0 you should migrate these settings into the web.config instead of having them in separate files in /config/

    • The keys in config/AppSettings.config need to be moved back to the web.config <appSettings> section and similarly, the config/ConnectionStrings.config holds the Umbraco database connections in v7.0.0 and they should be moved back to the web.config <connectionStrings> section.

    • /config/AppSettings.config and /config/ConnectionString.config can be removed after the contents have been moved back to web.config.

  • Delete all files in ~/App_Data/TEMP/Razor/

    • Related to issues with razor macros

6.latest to 7
4.latest to 6
  • The DocType Mixins package is not compatible with v6+ and will cause problems in your Document Types.

Version 4

Version 4.10.x to 4.11.x

Version 4.8.0 to 4.10.0

  • Delete the bin/umbraco.linq.core.dll file

  • Copy the new files and folders from the zip file into your site's folder

    • /App_Plugins

    • /Views

    • Global.asax

  • Remove the Config/formHandlers.config file

Version 4.7.2 to 4.8.0

  • Delete the bin/App_Browsers.dll file

  • Delete the bin/App_global.asax.dll file

  • Delete the bin/Fizzler.Systems.HtmlAgilityPack.dll file

Version 4.7.1.1 to 4.7.2

  • Delete the bin/umbraco.MacroEngines.Legacy.dll file

Version 4.6.1 to 4.7.1.1

  • Delete bin/Iron*.dll (all dll files starting with "Iron")

  • Delete bin/RazorEngine*.dll (all dll files starting with "RazorEngine")

  • Delete bin/umbraco.MacroEngines.Legacy.dll

  • Delete bin/Microsoft.Scripting.Debugging.dll

  • Delete bin/Microsoft.Dynamic.dll

Server setup

This section describes different ways of setting up servers for use with Umbraco

Secure Sockets Layer (SSL) and HTTPS

To ensure a stable and smoothly running Umbraco installation, these permissions need to be set correctly.

Information about hosting a v9 application using IIS.

Information on how to deploy Umbraco in a Load Balanced scenario and other details to consider when setting up Umbraco for load balancing.

Best practices for running Umbraco on Azure Web Apps.

The runtime mode setting optimizes Umbraco for the best development experience or optimal production environment.

Minor upgrades for Umbraco 7

This article provides details on how to upgrade to the next minor version when using Umbraco 7.

Note

It is necessary to run the upgrade installer on each environment of your Umbraco site. If you want to update your staging and live site then you need to repeat the steps below and make sure that you click through the install screens to complete the upgrade.

Contents

In this article you will find instructions for 2 different ways of upgrading:

Upgrade using NuGet

  1. Open up the Package Console and type: Update-Package UmbracoCms

  2. Choose "No to All" by pressing the "L" when prompted.

Alternatively, you can use the Visual Studio NuGet Package Manager to upgrade:

  1. Open the NuGet Package Manager and select the Updates pane to get a list of available updates.

  2. Choose the package called UmbracoCms and select update.

The upgrade will run through all the files and make sure you have the latest changes while leaving the files you have updated.

Upgrades to versions lower than 7.2.0

You will be asked to overwrite your web.config file and the files in /config, make sure to answer No to those questions.

For some inexplicable reason, the installation will fail if you click "No to All" (in the GUI) or answer "L" (in the package manager console) to the question: "File 'Web.config' already exists in project 'MySite'. Do you want to overwrite it?" So make sure to only answer "No" (in the GUI) or "N" (in the package manager console).

We will overwrite the web.config file. We'll back it up so don't worry. You can find the backup in App_Data\NuGetBackup\20140320-165450\. The 20140320-165450 bit is the date and time when the backup occurred, which varies. You can then merge your config files and make sure they're up to date.

Upgrade manually from a zip file

Copy the following folders from inside the .zip file over the existing folders in your site:

  • /bin

  • /Umbraco

  • /Umbraco_Client

There are hosting providers (we know of one: RackSpace Cloud) that require proper casing of file and folder names. Generally, on Windows, this is not a problem. Is your hosting provider forcing proper casing? You'll then need to verify that folders and files are named in the same casing as the version you're upgrading to.

Merge configuration files

You can expect some changes to the following configuration files:

  • Any file in the /Config folder

  • The /Global.asax file

  • The web.config file in the root of your site (Important: make sure to copy back the version number, and the connection string as they were.)

  • In rare cases, the web.config file in the Views folder

There's also the possibility that files in the /Config folder are new or have been removed(we note this in the release notes). WinMerge (and other diff tools) is able to compare folders as well so you can spot these differences.

Up until version 6.0.0 it was necessary to change the version number in ClientDependency.config. This was to clear the cached HTML/CSS/JS files in the backoffice. Change the current version number to one that's higher than that. Make sure not to skip this step as you might get strange behavior in the backoffice otherwise.

Merge UI.xml and language

Some packages (like Contour and Umbraco Forms) add dialogs to the UI.xml. Make sure to merge those changes back in from your backup during the upgrade so that the packages continue to work. This file can be found in: /Umbraco/Config/Create/UI.xml.

Packages like Contour, Umbraco Forms, and Courier also make changes to the language files located in: /Umbraco/Config/Lang/*.xml (typically en.xml).

Finalize

After copying the files and making the config changes, you can open your site. You should see the installer which will guide you through the upgrade.

The installer will do two things:

  • Update the version number in the web.config

  • Upgrade your database in case there are any changes

We are aware that, currently, the installer is asking you for the database details of a blank database while upgrading. In the near future this will be pre-filled with your existing details and the wording will be updated. So no need to be scared. Enter the details of your existing database and Umbraco will upgrade it to the latest version when necessary.

Post installation

One important recommendation is to always remove the install folder immediately after upgrading Umbraco and never to upload it to a live server.

Potential issues and gotchas

Browser cache

Google Chrome has notoriously aggressive caching. If something doesn't seem to work well in the backoffice, make sure to clear cache and cookies thoroughly (for other browsers as well). Normally the browser cache problem is automatically handled in an Umbraco upgrade by modifying the config/ClientDependency.config version number. If you wish to re-force this update you can increment this version number. This will ensure that any server-side cache of JavaScript and stylesheets gets cleared as well.

One way to nudge the cache in Chrome is to open the developer tools (F12) and go to the settings (the cog icon). There will be a checkbox that says "Disable cache (while DevTools is open)". Once this checkbox is on you can refresh the page and the cache should be invalidated. To force it even more, the "reload" button next to your address bar now has extra options when you right-click it. It should have "Normal reload", "Hard reload" and "Empty cache and hard reload" now. The last option is the most thorough and you might want to try that.

Running Umbraco On Azure Web Apps

This section describes best practices with running Umbraco on Azure Web Apps

What are Azure Web Apps

They have been called a few names in the past, many people still know Azure Web Apps as Azure Web Sites.

App Service is a fully Managed Platform for professional developers that brings a rich set of capabilities to web, mobile and integration scenarios. Quickly create and deploy mission critical web Apps that scale with your business by using Azure App Service.

Umbraco will run on Azure Web Apps but there are some configuration options and specific Azure Web Apps environment limitations to be aware of.

Recommended configuration

You need to add these configuration values. E.g in a json configuration source like appSettings.json:

You can also copy the following JSON directly into your Azure Web App configuration via the Advanced Edit feature.

Remember to add an ASPNETCORE_ENVIRONMENT variable with values Development, Staging, or Production.

The minimum recommended Azure SQL Tier is "S2", however noticeable performance improvements are seen in higher Tiers

Storage

It is important to know that Azure Web Apps uses a remote file share to host the files to run your website. This is due to the files running your website do not exist on the machine running your website. In many cases this isn't an issue. It can become one if you have a large amount of IO operations running over remote file-share.

Issues with read-only filesystems

Scaling

Web worker migrations

It's important to know that Azure Web Apps may move your website between their 'workers' at any given time. This is normally a transparent operation. In some cases you may be affected by it if any of your code or libraries use the following variables:

  • Environment.MachineName (or equivalent)

When your site is migrated to another worker, these variables will change. You cannot rely on these variables remaining static for the lifetime of your website.

How to find the Linux App Service Logs

The quickest way to get to your logs is using the following URL template and replacing {app} with your Web App name:

https://{app}.scm.azurewebsites.net/api/logstream

You can also find this in the KUDU console by clicking Advanced Tools > Log Stream on the Web App in the Azure Portal.

Web App secret management

Upgrade to Umbraco 7

This document should be used as a reference, not a step by step guide. Upgrading will largely depend on what version of Umbraco you are currently running, what packages you have installed and the many

Backup

It is critical that you back up your website and database before upgrading. There are database changes made during installation and you cannot revert an Umbraco 7 database to an Umbraco 6 database.

.Net 4.5

Umbraco 7 is built on .Net 4.5 and your development environment will require this version installed in order to operate. Visual Studio users may require 2012 or higher.

HTML 5 browser support

Umbraco 7 requires browsers with proper HTML 5 support, these include Chrome, Firefox, IE10+

Breaking changes

Before you upgrade be sure to read the list of breaking changes. This is especially recommended if you have removed or modified code in the core or if one of these breaking changes directly affects your installation.

Examine

It is recommended to rebuild all Examine indexes after completing the upgrade.

Xml Cache rebuild

You should re-generate the XML cache. This can be done by following the prompts when visiting the following URL:

your-domain.com/umbraco/dialogs/republish.aspx?xml=true

Configuration changes

It is recommended that you use a Diff tool to compare the configuration file changes with your own current configuration files.

  • /web.config updates

    • You will need to compare the new Umbraco 7 web.config with your current web.config. Here is a quick reference of what needs to change:

      • Remove the section name="BaseRestExtensions" section

      • Remove the section name="FileSystemProviders" section

      • Remove the sectionGroup name="system.web.webPages.razor" section

      • Remove the <FileSystemProviders> element

      • Remove the BaseRestExtensions element

      • Remove the add key="umbracoUseMediumTrust" element

      • Remove the system.web.extensions element

      • Removes the xhtmlConformance element

      • Remove the system.codedom element

      • Remove the compilation assemblies, /compilation

      • Remove the system.web.webPages.razor element

      • New: sectionGroup name="umbracoConfiguration" section

      • New: umbracoConfiguration element

      • Ensure that the targetFramework="4.5" is added to the httpRuntime element

      • Add add key="ValidationSettings:UnobtrusiveValidationMode" value="None" to the appSettings element

  • /config/clientdependency.config changes

    • remove add name="CanvasProvider" element

  • /views/web.config updates

  • New macroscripts/web.config

  • config/umbracoSettings.config

    • Remove the EnableCanvasEditing element

    • Remove the webservices element

  • Removed xsltExtensions.config

  • /config/applications.config and /config/trees.config have some icon paths and names updated. You need to merge the new changes into your existing config files.

  • /config/tinyMceConfig.config

    • The inlinepopups is compatible and supported in Umbraco 7. You need to remove these elements: plugin loadOnFrontend="true", inlinepopups/plugin;

    • The plugins element that is shipped with Umbraco 7 looks like this:

      • You need to merge the changes from the new tinyMceConfig file into yours. The command elements that have changed are: JustifyCenter, JustifyLeft, JustifyRight, JustifyFull, umbracomacro, umbracoembed, mceImage, subscript, superscript, styleselect

      • Remove the command: mceSpellCheck

  • /config/dashboard.config

    • You need to merge the changes from the new dashboard.config into yours. Some of the original dashboard entries that were shipped with Umbraco 6 have been replaced or removed.

Medium Trust

Umbraco 7+ will no longer support medium trust environments. There are now some assemblies used in the core that do not support medium trust but are used extensively. Plugin scanning now also allows for scanning Umbraco's internal types which requires full trust.

Events

Tree events

Content, Media, Members, and Data Type trees will no longer raise the legacy tree events (based on BaseTree). It is recommended to change all tree event handlers to use the new tree events that fire for every tree in Umbraco including legacy trees. The new tree events are static events and are found in the class Umbraco.Web.Trees.TreeControllerBase:

  • MenuRendering

  • RootNodeRendering

  • TreeNodesRendering

Legacy business logic events

The Content, Media, Member, and Data Type editors have been re-created and are solely using the new Umbraco Services data layer. This means that operations performed in the backoffice will no longer raise the legacy business logic events (for example, events based on umbraco.cms.businesslogic.web.Document). It is recommended to change your event handlers to subscribe to the new Services data layer events. These are static events and are found in the services. For example: Umbraco.Core.Services.ContentService.Saved.

Property Editors

Legacy property editors (pre-Umbraco 7) will not work with Umbraco 7. During the upgrade installation process, Umbraco will generate a report showing you which legacy property editors are installed. These will all be converted to a readonly Label property editor. No data loss will occur but you'll need to re-assign your existing data types to use a new compatible Umbraco 7 property editor.

Most Umbraco core property editors shipped will be mapped to their equivalent Umbraco 7 editors. The Image cropper editor has not been completed for v7.0.

The Related Links property editor and XSLT

Since the Related Links property is an advanced property editor, the data format has changed from XML to JSON. This should not have any effect when retrieving the data from razor. If you are outputting Related Links data with XSLT you will need to update your XSLT snippet. Making use of the new library method umbraco.library:JsonToXml and taking into account that the xml structure has also slightly changed.

GUID -> Alias mapping

One of the database changes made in Umbraco 7 is the change of referencing a property editor from a GUID to a string alias. In order to map a legacy property editor to a new Umbraco 7 version you can add your custom "GUID -> Alias" map during application startup. To do this you would add your map using this method: Umbraco.Core.PropertyEditors.LegacyPropertyEditorIdToAliasConverter.CreateMap

Parameter Editors

Legacy parameter editors (pre-Umbraco 7) will not work with Umbraco 7. If Umbraco detects legacy parameter editor aliases that do not map to a Umbraco 7 parameter editor it will render a textbox in its place. You will need to update your macros to use a compatible Umbraco 7 parameter editor as those that aren't supported.

Previously, parameter editors were registered in an Umbraco database table: cmsMacroPropertyType which no longer exists. Parameter editors in Umbraco 7 are plugins like property editors. During the Umbraco 7 upgrade installation process it will update the new cmsMacroProperty.editorAlias column with the previous parameter editor alias. During this process it will look into the Umbraco.Core.PropertyEditors.LegacyParameterEditorAliasConverter for a map between a legacy alias to a new Umbraco 7 alias.

Custom legacy parameters can be mapped to new Umbraco 7 parameter editor aliases during installation. This can be done by modifying the mapping during application startup using this method: Umbraco.Core.PropertyEditors.LegacyParameterEditorAliasConverter.CreateMap.

Database changes

All database changes will be taken care of during the upgrade installation process.

For database change details see (including all child tasks):

Tags

See above for the database updates made for better tag support.

  • Tags can now be assigned to a nodes property and not only a node

  • Multiple tag controls can exist on one page with different data

    • The legacy API does not support this, the legacy API will effectively, add/update/remove tags for the first property found for the document that is assigned a tag property editor.

  • There is a new ITagService that can be used to query tags

    • Querying for tags in a view (front-end) can be done via the new TagQuery class which is exposed from the UmbracoHelper. For example: @Umbraco.TagQuery.GetTagsForProperty

Packages

You should check with the package creator for all installed packages to ensure they are compatible with Umbraco 7.

For package developers

We see common errors that we cannot fix for you, but we do have recommendations you can follow to fix them:

TypeFinder

The TypeFinder has been deprecated since 4.10 and is now found under Umbraco.Core.TypeFinder.

JavaScript in menu actions

While you need to have JavaScript inside menu actions to trigger a response, it is highly recommended that you use the recommended UmbClientMgr methods. You should not try to override parent.right.document and similar tricks to get to the right-hand frame.

Use the recommended Umbraco uicontrols

If you have a webforms page, it is recommended to use the built-in ASP.NET controls to render panels, properties and so on. If you use the raw HTML or try to style it to match the backoffice, you will get out of sync. Follow the guidelines set by Umbraco's internal editors and use the ASP.NET custom controls for UI.

Load Balancing Azure Web Apps

Azure Requirements

  • 2 x App service plans with 1 x web app in each:

    • One for the backoffice (Administrative) environment

    • One for your scalable public-facing environment (Public)

  • 1 x SQL server that is shared with these 2 web apps

The setup above will allow for the proper scaling of the Administrative and Public web apps.

The App Service plan with the Administrative web app should only be scaled up. The reason for this is that the web app needs to stay as a single instance.

The App Service plan with the Public web app can be scaled both out and up.

Lucene/Examine configuration

Umbraco TEMP files

When an instance of Umbraco starts up it generates some 'temporary' files on disk. In a normal IIS environment, these would be created within the folders of the Web Application. In an Azure Web App, we want these to be created in the local storage of the actual server that Azure happens to be used for the Web App. So we set this configuration setting to 'true' and the temporary files will be located in the environment temporary folder. This is required for both the performance of the website as well as to prevent file locks from occurring due to the nature of Azure Web Apps shared files system.

Host synchronization

When a host restarts, the current host 'winds down' while another host is started. This means there can be more than one live host during a restart. Restarts can occur in many scenarios including when an Azure Web App auto-transitions between hosts, you scale the instances or you utilize slot swapping.

Some file system based services in Umbraco such as the Published Cache and Lucene files can only be accessed by a single host at once. Umbraco manages this synchronization by an object called IMainDom.

By default Umbraco v9.4 & 9.5 uses a system-wide semaphore locking mechanism. This mechanism only works on Windows systems and doesn't work with multi-instance Azure Web Apps. We need to swap it out for an alternative file system based locking mechanism by using the following appSetting. With Umbraco v10+ FileSystemMainDomLock is the default setting.

Apply this setting to both the SCHEDULINGPUBLISHER Administrative server and the SUBSCRIBER scalable public-facing servers.

Steps to set-up an environment

  1. Create an Azure SQL database

  2. Install Umbraco on your backoffice administrative environment and ensure to use your Azure SQL Database

  3. Install Umbraco on your scalable public-facing environment and ensure to use your Azure SQL Database

  4. Test: Perform some content updates on the administrative environment, ensure they work successfully in that environment, then verify that those changes appear on the scalable public-facing environment

Ensure all Azure resources are in the same region to avoid connection lag.

Scaling

Do not scale your backoffice administrative environment this is not supported and can cause issues.

The public-facing subscriber Azure Web Apps can be manually or automatically scaled up or down and is supported by Umbraco's load balancing.

Deployment considerations

Since you have 2 x web apps, when you deploy you will need to deploy to both places - There are various automation techniques you can use to simplify the process. That is outside the scope of this article.

This also means that you should not be editing templates or views on a live server as SchedulingPublisher and Subscriber environments do not share the same file system. Changes should be made in a development environment and then pushed to each live environment.

Runtime Modes

This section describes how to use the runtime mode setting to optimize Umbraco for the best development experience or optimal production environment.

Configuring the runtime mode

You can configure the runtime mode to optimize Umbraco for different development experiences and environments by setting Umbraco:CMS:Runtime:Mode to one of the available modes:

  • BackofficeDevelopment (default)

  • Development

  • Production

This can be done via the appsettings.json file, environment variables, or any other .NET configuration provider (like Azure Key Vault/App Configuration). Although this setting affects how Umbraco behaves at runtime, some modes have prerequisites on how the project is built/published. Make sure to read the descriptions of each mode before changing this setting from the default BackofficeDevelopment mode, as incorrect configuration can result in your application not starting (by throwing a BootFailedException).

BackofficeDevelopment mode

The BackofficeDevelopment mode is the default behavior for Umbraco: it does not optimize Umbraco for any specific environment and does not have any prerequisites. This mode allows for rapid development (without having to recompile/rebuild your project), including all development from within the backoffice.

Development mode

The Development mode can be used when you're developing from an IDE (like Visual Studio, VS Code, or Rider) or the dotnet CLI (e.g. using dotnet watch). It is a recommended prerequisite if you want to use the Production mode in your production environment.

This mode disables in-memory ModelsBuilder generation and validates the following setting:

  • Umbraco:CMS:ModelsBuilder:ModelsMode is not set to InMemoryAuto.

If you want to use the generated models, use SourceCodeAuto or SourceCodeManual. These require manually recompiling the project after the models have changed (for example after updating Document Types, Media Types, Member Types, or Data Types). Razor views (cshtml files) will still be automatically compiled at runtime. They allow you to quickly iterate on the rendered output from templates, partial views, and view components.

The recommended approach to enable Development mode is to update the appsettings.json file with the following settings:

Ensure your models are generated by running Umbraco and navigating to Settings > Models Builder > Generate models. You can remove the following properties from your csproj project file to enable the compilation of Razor views (which also ensures your views do not contain compilation errors and is a prerequisite for enabling Production mode):

Fix any compilation errors you might get after this, e.g. if you accidentally referenced deleted models or properties. Running the application will still show the rendered content and you're now ready to optionally enable Production mode on your production environment.

Ensure you have the <CopyRazorGenerateFilesToPublishDirectory>true</CopyRazorGenerateFilesToPublishDirectory> property set in your csproj project file, so Razor views are always copied to the publish directory. This is required by the CMS to display the contents in the backoffice, for Forms to lookup custom theme views and for Deploy to be able to compare schemas (otherwise you'll get schema mismatches).

Production mode

Use Production mode to ensure your production environment is running optimally by disabling development features and validating whether specific settings are configured to their recommended production values.

  • The application is built/published in Release mode (with JIT optimization enabled), e.g. using dotnet publish --configuration Release;

  • Umbraco:CMS:WebRouting:UmbracoApplicationUrl is set to a valid URL;

  • Umbraco:CMS:Global:UseHttps is enabled;

  • Umbraco:CMS:ModelsBuilder:ModelsMode is set to Nothing.

The recommended approach to enable Production mode is to update the appsettings.Production.json file (or create one) with the following settings:

Although you can still edit document types and views (if not running from the published output), changes won't be picked up until you've rebuilt your project or republished the application.

Models won't be generated by ModelsBuilder (because the mode is set to Nothing), requiring you to do all your changes while in Development mode. As Models Builder is set to Nothing, the Models Builder dashboard is disabled in the backoffice of live environment.

Also, templates cannot be edited on live environment as runtime compilation is not enabled and is set to Production.

Also ensure the UmbracoApplicationUrl is updated to the primary URL of your production environment, as this is used when sending emails (password reset, notifications, health check results, etc.).

This should not be used in a more typical production environment where you are hosting your application from published output.

Customize/extend runtime mode validation

Validation of the above-mentioned settings is done when determining the runtime level during startup using the new IRuntimeModeValidationService and when it fails, causes a BootFailedException to be thrown. The default implementation gets all registered IRuntimeModeValidators to do the validation, making it possible to remove default checks and/or add your own (inherit from RuntimeModeProductionValidatorBase, if you only want to validate against the production runtime mode). The following validators are added by default:

  • JITOptimizerValidator - Ensure the application is built/published in Release mode (with JIT optimization enabled) when in production runtime mode, e.g. using dotnet publish --configuration Release;

  • UmbracoApplicationUrlValidator - ensure Umbraco:CMS:WebRouting:UmbracoApplicationUrl is configured when in production runtime mode;

  • UseHttpsValidator - ensure Umbraco:CMS:Global:UseHttps is enabled when in production runtime mode;

  • ModelsBuilderModeValidator - ensure Umbraco:CMS:ModelsBuilder:ModelsMode is not set to InMemoryAuto when in development runtime mode and set to Nothing when in production runtime mode.

The following example removes the default UmbracoApplicationUrlValidator and adds a new custom DisableElectionForSingleServerValidator:

Hosting Umbraco in IIS

Information on hosting Umbraco on IIS

Install .NET Core Runtime

Install the Hosting Bundle

Restart IIS

After installing .NET Core Runtime, restart IIS to ensure the changes are applied.

  1. Open Command Prompt as Administrator.

  2. Run the following commands:

Create the Site in IIS

Next, create a new site in IIS for hosting Umbraco.

Set Application Pool

  1. Open IIS Manager.

  2. Right-click on Application Pools in the Connections panel.

  3. Select Add Application Pool.

  4. Enter the Name.

  5. Ensure the .NET Common Language Runtime (CLR) version is set to No Managed Code.

  6. Click Ok.

Create a Site

  1. Open IIS Manager.

  2. Right-click on Sites in the Connections panel.

  3. Select Add Website.

  4. Fill in the Site Name, Physical Path (to your Umbraco installation), and the Port.

  5. Click Ok.

Publish the Website

You can either use the dotnet CLI or Visual Studio to publish your Umbraco website.

Option 1: Use dotnet CLI for Manual Deployment

  1. Open the Command Prompt in the directory of your Umbraco project.

  2. Run the following command:

Make sure to replace net9.0 with the version of .NET you are using.

Option 2: Use Visual Studio to Deploy

  1. Open your project in Visual Studio.

  2. Right-click on the Umbraco project in Solution Explorer.

  3. Select Publish....

Configure Environment Variables

In IIS, you can configure environment variables for Umbraco to store sensitive data such as your connection string.

Configure Environment Variables in IIS

  1. Open IIS Manager and select your Umbraco site.

  2. Double-click Configuration Editor in the Management section.

  1. Select system.webServer/aspNetCore in the Section dropdown.

  2. Select ApplicationHost.config <location path='[YOUR-SITENAME]'> in the From dropdown.

This ensures your settings will be stored in a machine specific file. The configuration files might end in a public repository and should not contain sensitive data like Connection Strings or Simple Mail Transfer Protocol (SMTP) credentials. Additionally, by default the configuration file will be overwritten during each publish processes.

  1. Locate the environmentVariables line and open the dialog to add environment variables.

  2. Enter the values for ASPNETCORE_ENVIRONMENT and ConnectionStrings__umbracoDbDSN.

  • Variable names need to change the object structure form JSON by combining the segments with double underscore __ For example: ConnectionStrings__umbracoDbDSN

  • Escaped backslashes \\ For example: serverName\\databaseInstanceName are replaced by single backslash \ (DATABASESERVER123\SQL2017)

  1. Click Add.

  2. Click Apply.

  1. Restart IIS to apply the changes after updating the environment variables.

IIS Hosting Models

IIS can host .NET applications using two different hosting models: In-process (default) and Out-of-process.

In-process Hosting (Default)

  • This is the default hosting model and is more efficient, as there is no inter-process communication between IIS and the application.

Default Configuration

No changes are required to your application configuration for in-process hosting. It works automatically with the default IIS settings.

Out-of-process Hosting

  • This model is useful when you need to run a .NET application in a separate process, for example, when the application requires more isolated resources or needs to scale independently from IIS.

Configuration

To enable out-of-process hosting:

  1. Open your Umbraco project.

  2. Locate the .csproj file.

  3. Add the following line:

  1. Save the .csproj file.

  2. Rebuild your application.

Troubleshooting: Handling WebDAV Module Interference

Issue: A 405 error may occur when attempting to save content items in Umbraco, due to the WebDAV module blocking PUT requests.

Solution: If you encounter this issue, it may be because the WebDAV module in IIS is blocking the necessary PUT requests. This issue is not present on all IIS setups, but if you do have WebDAV installed, try disabling the WebDAV module.

Workaround:

  1. Open the web.config file.

  2. Add the following code to remove the WebDAV module:

  1. Restart IIS.

Follow the to upgrade your Umbraco 7 site on Cloud.

We are collecting . There is a community package: that you can install on your Umbraco 7 site before migration. This will help identify and resolve some of these common issues before triggering the migration steps detailed below.

A migration was introduced in Umbraco 8.6 which can break the migration process. See for more details.

Install the following community Nuget Package: into your Umbraco 8 project before running the migration (no configuration required). This package was created by Umbraco Gold Partner and patches the migration process so you can migrate directly from the latest Umbraco 7 to Umbraco 8.6+ without encountering the above issue. .

In Umbraco 8, property editor configuration is a strongly typed object. There are plenty of examples in the .

To do this, you will create an implementation of IPreValueMigrator or inherit from the base class .

There are plenty of examples of this in the .

Clean up the database version history (can be done with a script or a package like )

Before the content migration can start the site has to run Umbraco 7.14+. Make sure to always take a backup of the database before doing an upgrade, and then check the .

Following the we will now upgrade via Nuget until we get to this point:

Install the , and run it health check from the Developer section of the backoffice. This is done to identify and resolve some common database schema issues before migration.

If you're stopping at Umbraco 8, you can learn more about .

Learn more about the Section in the

Umbraco 15 changes the internal data format of all .

It is advised to before upgrading. This will make the migration run faster.

for Block List properties.

for Block Grid properties.

for Rich Text Editor properties.

Sometimes there are exceptions to general upgrade guidelines. These are listed in the . Be sure to read this article before moving on.

Check if your setup meets the for the new versions you will be upgrading your project to.

It is recommended that you upgrade to the closest version before upgrading to the latest version. For Umbraco 10, the closest long-term support version is Umbraco 13. Once upgraded to Umbraco 13, you can upgrade to Umbraco 14.

If you are upgrading a Cloud project locally from version 14 to 15, remove the Umbraco.Cloud.Cms.PublicAccess and Umbraco.Cloud.Identity.Cms packages. For more details, see in the Umbraco Cloud Documentation.

If you have other packages like Umbraco Forms installed, upgrade them before upgrading Umbraco.CMS. Consult the if relevant.

In Umbraco 13, we have moved to using the .

If your database experiences timeout issues after an upgrade, it might be due to 'startupTimeLimit' configuration.

To fix the issue, try increasing the in the web.config file. Additionally, you can set the value in the in the appsettings.json file.

Check out the section about .

Upgrade Umbraco via NuGet ()

Sometimes there are exceptions to these guidelines, which are listed in the .

If there are any specific configuration changes required for the version you are upgrading to then they will be noted in the .

Download the .zip file for the new version you are upgrading to from

Use a tool like to check changes between all of the config files. Depending on when you last did this there may have been updates to few of them.

Check out the section about .

Use the to complete the upgrade of your project.

Umbraco 15

Snapshots are removed

Snapshots have been removed, meaning any code using IPublishedSnapshot, and by extension IPublishedSnapshotAccessor, must be updated. Inject IPublishedContentCache or IPublishedMediaCache and use those directly instead.

Modelsbuilder models needs to be rebuilt

Models generated by ModelsBuilder used the IPublishedSnapshot interface, which has been removed. This means that the models need to be rebuilt. The approach to this will differ depending on the mode chosen:

InMemoryAuto

Remove the umbraco\Data\TEMP\InMemoryAuto folder to trigger a rebuild of the models.

SourceCodeAuto and SourceCodeManual

Remove the old models located in the \umbraco\models folder by default. This will cause your views to no longer be able to build due to missing types. To get around this you can disable the precompiled view temporarily by adding the following to your .csproj file:

<PropertyGroup>
  <RazorCompileOnBuild>false</RazorCompileOnBuild>
  <RazorCompileOnPublish>false</RazorCompileOnPublish>
</PropertyGroup>

This will allow your site to start up, but you will still see an error page when loading a page.

  1. Disregard the error.

  2. Enter the backoffice.

  3. Rebuild the models from the ModelsBuilder dashboard.

You can now re-enable precompiled views and rebuild your site.

If you have custom C# code that references the models this will also not build. You can either comment out your custom code temporarily until the models have been rebuilt or fix the models manually. To fix the models manually you need to find and replace IPublishedSnapshotAccessor with IPublishedContentTypeCache.

Handling Precompressed Files

When upgrading from Umbraco 14 to 15, you might notice that JavaScript and CSS files are automatically precompressed, adding additional .br and .gz files. This behavior is introduced in ASP.NET Core version 9, where static files are fingerprinted and precompressed by default at build and publish time.

To disable this feature, set <CompressionEnabled>false</CompressionEnabled> in your project file. If you are using Umbraco's templates - dotnet new umbraco, this setting is already included.

Set <CompressionEnabled>false</CompressionEnabled> in your Umbraco project to avoid compressing backoffice files unnecessarily. For your own web project, set it to true to improve performance by serving precompressed assets to users.

For more details, see the .

Umbraco 14

Read more about the release of Umbraco 14 in the .

Below you can find the list of breaking changes introduced in Umbraco 14 CMS.

This is by far the most impactful update of Umbraco in years. We’ve fundamentally changed the way you extend Umbraco. If you are experienced in developing Web Components you can now use your preferred framework for this. If you are unsure how to proceed, you can implement it with Typescript and the Lit library like we’ve done. In this case, please start with this article on how to .

The new Backoffice (Bellissima) is entirely built on the Umbraco UI Library. This means that you might experience some of your components not being rendered on the page because the name has been changed. You should be able to find equivalents to what you were used to. For example, the umb-button is now called uui-button, and umb-box is now uui-box. When extending the Backoffice, we encourage you to use our to ensure the same look and feel in your extensions. The UI Library is Open Source and , so feel free to contribute with new components or raise issues or discussions.

  • Icons are based on Lucide.

Umbraco 13 and earlier used sets of icons ranging from custom SVGs to Font Awesome. This has all been converged into the with icon names mapped from Umbraco 13.

  • Custom icons

To add custom icons to the Backoffice, you must add an extension type called “icons”, which can provide icons given a Name and a File. The file can reside anywhere on disk or in RCLs the only requirements being that it must be routable and it must be an SVG.

  • User provided translations

Translations used in the UI (which are most of them) have been migrated from XML to JavaScript modules. This means that if you wish to override any of the built-in translation keys for the UI, you have to add an extension type called “localization”. It is still possible to add XML translations, but they can no longer be used in the Backoffice UI. However, you may still find usage for them in server-to-server scenarios. Umbraco also keeps its e-mail templates as XML translations. Package and extension developers working with localization will find many benefits from this change seeing that you can add logic to JavaScript modules making your localization files more dynamic and even making them able to react to input parameters.

You can read more about .

  • BackOffice controllers have been replaced with the Management API

Following the implementation of the new Backoffice (Bellissima), Umbraco has now internally upgraded Headless to a first-class citizen. This means that all controllers previously available under the /umbraco/api route have been removed and replaced with controllers in the Management API. You can read more about the Management API on the article. You can also check out the Swagger UI in your local Umbraco instance available under /umbraco/swagger.

  • A new way of writing authorized controllers

If you have implemented API controllers in Umbraco before, we recommend you update or rewrite these. Please follow the article, as you’ll then ensure the same cool documentation of your APIs. Notice, that we’ve made a much better separation of concern between controllers and services so that there is no more business logic in controllers.

Although this sounds like it's not a big change, it’s one of the most breaking changes on the backend. Whereas Newtonsoft.Json was flexible and error-tolerant by default, System.Text.Json is strict but more secure by default. You can therefore run into things that will not be serialized. You can .

  • Nested Content and Grid Layout have been removed

These two property editors have been deprecated in Umbraco for some time as you can read in our breaking change announcements for and . The recommended action is to use blocks instead - Block Grid for the grid layout and either Block Grid or Block List for Nested Content.

We have for some time , and now it’s fully removed. You should use the default Media Picker instead.

  • Macros and Partial View Macros have been removed. Use partial views and/or blocks in the Rich Text Editor (RTE)

Depending on the usage of macros, you’ll be able to use either partial views or blocks in the Rich Text Editor. They are not the same kind of functionality, but they cover all the identified use cases in a way more consistent and supportable way.

  • XPath has been removed

An alternative is using the Dynamic Roots in the Multinode Treepicker and for ContentXPath the alternative is .

The package.manifest file is no longer supported and has been replaced with the umbraco-package.json file. The format is similar and after building your Umbraco solution, you have access to a JSON schema file which you can reference and thereby have type-safety in the file. You can read more about the new format on the article.

  • Smidge is no longer a default dependency

along with the RuntimeMinification setting and related classes. Smidge used to bundle up Backoffice and package assets before, however, with the Bellissima, we have migrated entirely to ESModules. This means we can no longer predict how modules work in automated bundles.

It's recommended that you bundle up your Backoffice static assets for instance by a tool called Vite. You can read more about this on the article. You can still use libraries like Smidge for frontend static assets by manually installing the package from NuGet.

You can read the on how to set up a similar setting to RuntimeMinification. For sites being upgraded from V13 or below, please remove from the _ViewImports.cshtml file.

  • Base classes for Backoffice controllers have been removed

The UmbracoAuthorizedApiController and UmbracoAuthorizedJsonController classes have been removed. We recommend basing your Backoffice APIs on the ManagementApiControllerBase class from the Umbraco.Cms.Api.Management project.

Read the for a comprehensive guide to writing APIs for the Management API.

  • Removal of certain AppSettings

Some AppSettings have been removed or found a new place. In general, any UI-related app settings will now have to be configured as .

  • RichTextEditor

The global configuration of TinyMCE has been removed in order to support more rich text editors in the future. Instead, a new extension type called “tinyMcePlugin” has been added. This extension type gives you access to each instance of TinyMCE allowing you to configure it exactly as you see fit. You can even make it dependent on more factors such as Document Type, user group, environment, and much more. You have access to the full array of contexts in the Backoffice.

  • ShowDeprecatedPropertyEditors

There are no deprecated property editors in Bellissima and this configuration will no longer have an effect.

  • HideBackOfficeLogo

This configuration will no longer have an effect. Instead, you can add a CSS file where you can modify the default CSS variables in the Backoffice. The Backoffice loads a CSS file which can be overwritten by placing a similar file in your project at /umbraco/backoffice/css/user-defined.css with the following content:

:root {
  --umb-header-logo-display: none;
}
  • IconsPath

This configuration will no longer have an effect. Instead, you should add icons through the “icons” extension type.

  • AllowedMediaHosts

This configuration will no longer have an effect.

  • Notifications

Notifications have changed their behavior to an extent. You can still implement notifications such as ContentSavingNotification to react to changes for related systems or add messages to be shown in the Backoffice. You can no longer modify the models being transferred through the API.

If you wish to modify the Backoffice UI, register the extensions through the manifest system that hook on to the desired areas of the Backoffice UI. If you used to modify the models because you needed more data on the models, it's recommended that you build your own API controller to achieve this. You can read more about and even learn how to register your controllers in the Swagger UI.

  • Property editors have been split in two

The new Backoffice and the Management API ushers in a shift in responsibility. Traditionally, a lot of UI responsibility has been misplaced on the server.

For example, it is hardly a server concern how many rows a text area should span by default.

To this end, property editors have been split into two, individually reusable parts; the server implementation and the client implementation.

As a consequence, a property editor must now define both which client and server implementation to use. Details can be found in article.

  • Property value converters for package.manifest based property editors

The package.manifest file format is no longer known on the server side. It has been changed to be a purely client-side responsibility (and it has adopted a new format and a new name). If you have implemented a property value converter for a property editor defined in a package.manifest file, you will likely need to make a small change to the property value converter.

The property value converter must implement IsConverter() to determine if it can handle a given property. In this implementation, it is common to use the EditorAlias of the passed in IPublishedPropertyType. However, in Umbraco 14 you should use the EditorUiAlias instead.

More details can be found in .

  • UmbracoApiController breakage

Due to the shift from Newtonsoft.Json to the System.Text.Json, the UmbracoApiController will yield camel-cased output in Umbraco 14, where it was pascal-cased in the previous versions.

Make sure to perform thorough testing of all usages of UmbracoApiController. As the class has now been marked as obsolete, we recommend these controllers to be based on the Controller class from ASP.NET Core moving forward.

  • Two-Factor Authentication requires a client registration

The C# models for Two-Factor Authentication previously supported setting a custom AngularJS view to setup the QR code. This has been moved to the Backoffice client and requires a registration through the new extension type :

    {
      "type": "mfaLoginProvider",
      "alias": "my.2fa.provider",
      "name": "My 2fa Provider",
      "forProviderName": "UmbracoUserAppAuthenticator",
      "meta": {
        "label": "Authenticate with a 2FA code"
      }
    }

This will use Umbraco’s default configuration of the two-factor provider. The user scans a QR code using an app such as Google Authenticator or Authy by Twilio.

It is additionally possible to register your own configurator similar to Umbraco 13. You can achieve this by providing a custom JavaScript element through the elementJs property.

More details and code examples can be found in the article.

  • External Login Providers require a client registration

The C# models for External Login Providers have changed and no longer hold configuration options for the “Sign in with XYZ” button. To show a button in the Backoffice to sign in with an external provider, you need to register this through the extension type called :

   {
      "type": "authProvider",
      "alias": "My.AuthProvider.Google",
      "name": "Google Auth Provider",
      "forProviderName": "Umbraco.Google",
      "meta": {
        "label": "Google",
        "defaultView": {
          "icon": "icon-google"
        },
        "linking": {
          "allowManualLinking": true
        }
      }
    }

This will use Umbraco’s default button to sign in with the provider. You can also choose to provide your own element to show in the login form. You can achieve this by adding the elementJs property.

Additionally, on the backend side, there is an additional helper available to do proper error handling. You can utilize this by using the options pattern to configure the provider.

More details and code examples can be found in the article.\

  • Deprecated SQLite provider name removed

In previous versions of Umbraco the umbracoDbDSN_ProviderName (and umbracoCommerceDbDSN_ProviderName) value could be Microsoft.Data.SQLite or Microsoft.Data.Sqlite with the former being deprecated in Umbraco 12.

The deprecated version, Microsoft.Data.SQlite, has been removed and will require the value to be updated to Microsoft.Data.Sqlite for installations using an SQLite database.

{
    ...
    "ConnectionStrings": {
        "umbracoDbDSN": "Data Source=|DataDirectory|/Umbraco.sqlite.db;Cache=Private;Foreign Keys=True;Pooling=True",
        "umbracoDbDSN_ProviderName": "Microsoft.Data.Sqlite",
        "umbracoCommerceDbDSN": "Data Source=|DataDirectory|/Umbraco.Commerce.sqlite.db;Mode=ReadWrite;Foreign Keys=True;Pooling=True;Cache=Private",
        "umbracoCommerceDbDSN_ProviderName": "Microsoft.Data.Sqlite"
    },
    ...
}

In-depth and further breaking changes for Umbraco 14 can be found on the repository and on .

Umbraco 14 RC Versions

Below you can find the list of breaking changes introduced in Umbraco 14 RC release versions.

RC 5

RC 4

RC 3

RC 2

RC 1 First RC release - 17th of April. Breaking changes since Beta 3:

Umbraco 14 Beta Versions

Below you can find the list of breaking changes introduced in Umbraco 14 Beta release versions.

Beta 3

Beta 2

There are a few breaking changes since Beta 1. Most of the changes concern property editors and getting them to work with migrations as well as new values.

Beta 1 Official release of Beta, 6th March 2023.

You can find more information about all breaking changes for v13.0.0 on website.

Most breaking changes are introduced due to updated dependencies. The breaking changes in .NET 7 and ASP.NET Core 7 are documented by .

If you are using TinyMCE plugins or custom TinyMCE configuration you need to migrate to the latest version. Learn more about this in the .

The breaking changes in TinyMCE are also documented in the official migration guides for and from .

A few methods and classes have also been moved and changed namespace. Decoupled dependencies are documented on the .

You can find a list of all the released Umbraco versions on website. When you visit Our Umbraco website, click on the version number to view the changes made in that specific version.

Are you looking to upgrade an Umbraco Cloud project from 9 to 10? Follow the guide made for instead, as it requires a few steps specific to Umbraco Cloud.

Angular JS has been removed in Umbraco 14. If you have extended your Umbraco project using Angular JS, it must be updated. for more information read the documentation.

For more information on what has changed in Umbraco 14 read the .

In Umbraco 15, the internal data format for has changed. This causes a content migration to run when upgrading.

This content migration can take a while to complete on a large site, causing it to be unresponsive for the duration. To speed up the migration, it is advised to before upgrading.

While we don't recommend this, it might be possible for you to skip the content migration. More details can be found in the article.

It is recommended that you upgrade to the closest version before upgrading to the latest version. For Umbraco 10, the closest long-term support version is Umbraco 13 so a direct upgrade is possible.

Watch the for a complete walk-through of all the steps.

Follow a community guide to migrate from a SQL CE database to SQL Server, like the

Setup a new database for v10 and use to transfer document types and content across.

Setup a new database for v10 and use a premium tool such as to copy database contents across.

Setup a new database for v10 and use a premium tool such as to transfer document types and content across.

If using Umbraco Forms, update your files and folders according to the for version 10 article.

If you are using Umbraco Forms, update your files and folders according to the for version 10 article.

There are a few breaking changes from 8.0.x to 8.1.0. Make sure to check the .

Due to the there are a few steps you will need to take, to make sure that your site works.

Version 7 had a document.GetCulture() method that was deriving a culture from domains configured in the tree. Somehow, that method was lost during version 8 development (issue ).

Umbraco 8.1 replaces AutoMapper with . This in itself will not break anything on your site. If you have used AutoMapper in your own code you will have to either include the package yourself or switch your implementation to use UmbracoMapper.

Follow the to complete the upgrade

For a full list of breaking changes see:

Follow the to complete the upgrade.

This is possible using Models Builder and through the inclusion of , a package by community member Jeavon Leopold.

Umbraco 7.6.0 also came with new pickers that store their data as a . We wanted to simplify the use of these new pickers and by default we wanted PVC's to always be enabled for those pickers.

Follow the to complete the upgrade.

Find a list of all the breaking changes below and

UrlRewriting.Net ()

UrlRewriting was old, leaking memory, and slowing down website startup when dealing with more than a few rules. It's entirely replaced by the extension.

Json.Net ()

Json.Net has been updated to version 10.0.0 to benefit from improvements in features, fixes, and performances (see ). This might be a breaking change for people relying on one of the changed functionality.

Log4net ()

ImageProcessor ()

HtmlAgilityPack ()

Membership Provider Encoding ()

Property Value Converters ()

Database ()

More details are available on on the 301 Redirect Tracker GitHub issue tracker.

Scopes ()

Introducing scopes means that some public APIs signatures are changing. Most of these changes target internal and/or non-breaking APIs (as per our ). This should therefore have no impact on sites but may break unit tests.

Property Editors storing UDI instead of ID ()

Rich Text Editor (RTE) Images attributes (, )

There are .

Follow the to complete the upgrade

You may experience an error saying Invalid object name 'umbracoUser' - this can be fixed by

Follow the to complete the upgrade.

See this article if you are using WebApiConfig.Register:

For general ASP.NET MVC 5 upgrade details see:

Follow the to complete the upgrade.

Follow the to complete the upgrade.

Follow the to complete the upgrade.

There is a breaking change to be aware of, full details can be found .

Follow the to complete the upgrade.

Follow the to complete the upgrade.

Read and follow

If your site was ever a version between 4.10.0 and 4.11.4 and you have upgraded to 6.0.0 install the and run it after the upgrade process is finished.

If your site was ever a version between 4.10.0 and 4.11.4 install the and run it after the upgrade process is finished.

For people using uComponents 3.1.2 or below, 4.8.0 breaks support for it. Either upgrade to a newer version beforehand or follow the workaround

We strongly encourage the use of HTTPS with Umbraco installations especially in production environments. Using HTTPS will greatly enhance the security of your website, see the for more information.

Sometimes there are exceptions to these guidelines, which are listed in the .

If there are any specific configuration changes required for the version you are upgrading to then they will be noted in the .

If you're not upgrading to 7.2.0 or higher then you should follow these extra instructions. If you are upgrading to 7.2.0+ then you can skip this and go to .

Download the .zip file for the new version you are upgrading to from

Use a tool like to check changes between all of the config files. Depending on when you last did this there may have been updates to a few of them.

If you are load balancing or require the scaling ("scale out") ability of Azure Web Apps then you need to consult the . This is due to the fact that a lot more needs to be configured to support scaling/auto-scaling.

Although Umbraco can be configured to use environmental storage it still requires its working-directory to be writable. If Umbraco is deployed to a read-only file system it will .

For example, Azure's is not supported by Umbraco. To check if your web app is using this feature you can check the WEBSITE_RUN_FROM_PACKAGE environment variable.

If you require the scaling ("scale out") ability of Azure Web Apps you need to consult the . This is due to the fact that a lot more needs to be configured to support scaling/auto-scaling.

Consult the if you would like to directly reference Azure Key Vault Secrets to your Azure Web App.

The still apply to this process as well.

for more details.

Details are listed here:

Umbraco is now shipped with minimal settings but the are still available

umbracoSettings is now a true ASP.NET configuration section

Ensure you read the and general documentation before you begin - you will need to ensure that your ASP.NET Core & logging configurations are correct.

The single instance Backoffice Administrative Web App should be set to use .

The multi-instance Scalable Public Web App should be set to use .

Umbraco runs within a .

Fix the backoffice environment to be the SCHEDULINGPUBLISHER scheduling server and the scalable public-facing environment to be SUBSCRIBERs - see

This mode disables both in-memory ModelsBuilder generation (see ) and Razor (cshtml) runtime compilation. Production mode requires you to compile your views at build/publish time and enforces the following settings for optimal performance/security:

To compile your views at build/publish time, remove the <RazorCompileOnBuild> and <RazorCompileOnPublish> properties from your project file (see the section). If you don't, Umbraco can't find the templates and will return 404 (Page Not Found) errors.

Static web assets are disabled when using Production mode, following . If you are running a non-Development environment using the Production runtime mode from source (non-published output), you will need to explicitly enable this. You can add the following line of code to your Program.cs file:

Download the .NET Core Runtime from the .

Ensure you download the version that matches your project’s requirements, which can be found in the article.

Download the to enable IIS to run ASP.NET Core applications.

To deploy Umbraco to IIS via Azure DevOps, you can use the . This task is a wrapper for MSDeploy.exe and can be configured as preferred.

runs the .NET application within the same process as the IIS worker process.

allows the .NET application to run separately from the IIS worker process. IIS acts as a reverse proxy to the Kestrel server, which hosts the .NET application.

steps outlined in the Umbraco Cloud documentation
a list of these known issues on our GitHub Issue Tracker
Pre-migration health checks
Issue #7914
ProWorks Umbraco 8 Migrations
ProWorks
Learn more about the package and the migration process on Prowork's blog
Umbraco-CMS codebase
DefaultPreValueMigrator
Umbraco-CMS codebase
Unversion
version specific upgrade instructions
general upgrade instructions
Pre-migration health checks plugin
rendering content on the Legacy Docs site
Sections article
Block Editors
clean up old content versions
ConvertBlockListEditorProperties
ConvertBlockGridEditorProperties
ConvertRichTextEditorProperties
version-specific guide
requirements
Minor upgrades for Umbraco 8
Minor upgrades for Umbraco 7
Long-term Support (LTS) major
Step 3: Upgrade the project locally using Visual Studio
version specific upgrade notes for Umbraco Forms
Minimal Hosting Model
ASP.NET Core Module's
startupTimeLimit
Connection Timeout
ConnectionString
version-specific guide
version-specific guide
https://our.umbraco.com/download
WinMerge
general upgrade guide
ASP.NET Core Documentation
Blog Post
AngularJS removed: A new backoffice built with Web Components, Lit, and fueled by the Umbraco UI Library
customize the Backoffice
Umbraco UI Library
hosted on GitHub
Lucide icon pack
localization on the Umbraco Documentation
Management API
Documenting your Controllers
Migration from Newtonsoft.Json to the System.Text.Json which removes Nested Content and Grid value converter and so on
read more about the differences between Newtonsoft.Json and System.Text.Json here
Nested Content
Grid Layout
The legacy media picker has been removed
encouraged to not use the legacy Media Picker
IContentLastChanceFinder
The package manifest format has changed
Package Manifest
Smidge has been removed from the default installation
Vite Package Setup
Smidge documentation
these two lines
Creating a Backoffice API article
extensions through the manifest system
building custom API controllers on the Umbraco Documentation
Creating a Property Editor
this article
mfaProvider
Two-Factor Authentication
authProvider
External Login Providers
CMS GitHub
Our Website
Bellissima (frontend/backoffice) changes
Backend (CMS) changes
Bellissima (frontend/backoffice) changes
Backend (CMS) changes
Bellissima (frontend/backoffice) changes
Backend (CMS) changes
Bellissima (frontend/backoffice) changes
Backend (CMS) changes
Bellissima (frontend/backoffice) changes
Backend (CMS) changes
Bellissima (frontend/backoffice) changes
Backend (CMS) changes
Bellissima (frontend/backoffice) changes
Backend (CMS) changes
Bellissima (frontend/backoffice) changes
Backend (CMS) changes
Use ISO codes instead of language IDs for fallback languages and translations
Breaking changes for the Delivery API
V13: New login screen
Updated NuGet Dependencies
Fix `JsonNetSerializer` settings leaking into derived implementations
Add default property value converters for all value types
V13: Add config to limit concurrent logins
Updates and support for re-use of CMS logic in Deploy
Dont explicitly index nested property by default
Blocks in the Rich Text Editor
Fix FurthestAncestorOrSelfDynamicRootQueryStep and FurthestDescendantOrSelfDynamicRootQueryStep
Remove parameter value/return nullability in `IImageSourceParser`, `ILocalLinkParser` and `IMacroParser`
Update PackageMigrationsPlans collection to be Weighted and not Lazy
Move IContextCache parameter to base Deploy interfaces and add checksum to artifact dependency
V13: Update IWebHookService to proper casing
V13: Implement webhook as i entity
Change `WebhookEventCollectionBuilder` to set collection
V13: Log webhook firing exceptions when they happen
Remove date header from webhook request and use constants
Our Umbraco
Microsoft
Rich Text Editor documentation
version 4 to 5
version 5 to 6
Umbraco Announcements repository
Update 'diff' from 3.5.0 to 5.0.0
Content Schedule performance
Removed redundant event handling code
Scope provider cleanup
Update to NPoco5
SQLite support
Update to ImageSharp v2
Migrate Member properties to columns on the Member table
Update examine to version 3
Async support for content finders
Improve redirect Content finder scalability
Fix Block List settings exception and optimize PVCs
Async tree search
Moved StackQueue to correct namespace
Our Umbraco
Upgrading your project from Umbraco 9 to 10
Customize Backoffice
Block Editors
clean up old content versions
Migrate content to Umbraco 15
Long-term Support (LTS) major
'Upgrading from Umbraco 9 to Umbraco 10 video tutorial'
article by Jan Reilink
uSync
redgate SQL Data Compare
Umbraco Deploy
Upgrading - version specific
Upgrading - version specific
full list
changes in IPublishedContent
#5269
UmbracoMapper
upgrade guide for Umbraco 8
Migrate your content to Umbraco 8
the list on the issue tracker
upgrade guide for Umbraco 7
core property value converters
UDI (Umbraco Identifier)
upgrade guide for Umbraco 7
a list of the items is also available on the tracker
U4-9004
IIS Url Rewrite
U4-9499
release notes
U4-1324
U4-8963
U4-9655
U4-6566
U4-7318
U4-9201
issue 146
U4-9406
guidelines
U4-9310
U4-6228
U4-6595
important Forms upgrade documentation that you will need to read.
upgrade guide for Umbraco 7
clearing your cookies on localhost
upgrade guide for Umbraco 7
https://www.asp.net/mvc/overview/releases/how-to-upgrade-an-aspnet-mvc-4-and-web-api-project-to-aspnet-mvc-5-and-web-api-2
https://www.asp.net/mvc/overview/releases/how-to-upgrade-an-aspnet-mvc-4-and-web-api-project-to-aspnet-mvc-5-and-web-api-2
upgrade guide for Umbraco 7
upgrade guide for Umbraco 7
upgrade guide for Umbraco 7
here
upgrade guide for Umbraco 7
upgrade guide for Umbraco 7
the full v7 upgrade guide
fixup package
fixup package
posted here
Security reference
File & folder permissions
Hosting v9+ in IIS
Load Balanced setup
Running Umbraco on Azure Web Apps
Runtime modes
version-specific guide
version-specific guide
https://our.umbraco.com/download
WinMerge
Before you upgrade
Upgrade to a new Major
Upgrade to a new Minor
Run an unattended upgrade
Unattended upgrades in a load balanced setup
see instructions above
Upgrade using NuGet
Upgrade manually from a Zip file
Run an unattended upgrade (v8.12+)
Unattended upgrades in a load balanced setup
Breaking changes in Umbraco 14
Upgrade using NuGet
Upgrade manually from a Zip file
Merge UI.xml and language
{
    "Umbraco": {
        "CMS": {
            "Global": {
                "MainDomLock" : "FileSystemMainDomLock"
            },
            "Hosting": {
                "LocalTempStorageLocation": "EnvironmentTemp"
            },
            "Examine": {
                "LuceneDirectoryFactory": "SyncedTempFileSystemDirectoryFactory"
            }
        }
    }
}
{
  "name": "UMBRACO__CMS__Global__MainDomLock",
  "value": "FileSystemMainDomLock",
  "slotSetting": false
},
{
  "name": "UMBRACO__CMS__Hosting__LocalTempStorageLocation",
  "value": "EnvironmentTemp",
  "slotSetting": false
},
{
  "name": "UMBRACO__CMS__Examine__LuceneDirectoryFactory",
  "value": "SyncedTempFileSystemDirectoryFactory",
  "slotSetting": false
}
<plugins>
    <plugin loadOnFrontend="true">code</plugin>
    <plugin loadOnFrontend="true">paste</plugin>
    <plugin loadOnFrontend="true">umbracolink</plugin>
    <plugin loadOnFrontend="true">anchor</plugin>
    <plugin loadOnFrontend="true">charmap</plugin>
    <plugin loadOnFrontend="true">table</plugin>
    <plugin loadOnFrontend="true">lists</plugin>
</plugins>
Could not load type umbraco.BusinessLogic.Utils.TypeFinder from assembly businesslogic, Version=1.0.5031.21336, Culture=neutral, PublicKeyToken=null.
{
    "Umbraco": {
        "CMS": {
            "Hosting": {
                "LocalTempStorageLocation" : "EnvironmentTemp"
            }
        }
    }
}
{
    "Umbraco": {
        "CMS": {
            "Global": {
                "MainDomLock" : "FileSystemMainDomLock"
            }
        }
    }
}
{
    "Umbraco": {
        "CMS": {
            "Runtime": {
                "Mode" : "Development"
            },
            "ModelsBuilder":{
                "ModelsMode": "SourceCodeAuto"
            }
        }
    }
}
<RazorCompileOnBuild>false</RazorCompileOnBuild>
<RazorCompileOnPublish>false</RazorCompileOnPublish>
{
  "Umbraco": {
    "CMS": {
      "Runtime": {
        "Mode": "Production"
      },
      "Hosting": {
        "Debug": false
      },
      "Global": {
        "UseHttps": true
      },
      "ModelsBuilder": {
        "ModelsMode": "Nothing"
      },
      "WebRouting": {
        "UmbracoApplicationUrl": "https://<REPLACE_WITH_YOUR_PRIMARY_DOMAIN>/"
      },
      "RuntimeMinification": {
        "UseInMemoryCache": true,
        "CacheBuster": "AppDomain"
      }
    }
  }
}
builder.WebHost.UseStaticWebAssets();
using System.Diagnostics.CodeAnalysis;
using Microsoft.Extensions.Options;
using Umbraco.Cms.Core.Composing;
using Umbraco.Cms.Core.Configuration.Models;
using Umbraco.Cms.Infrastructure.Runtime;
using Umbraco.Cms.Infrastructure.Runtime.RuntimeModeValidators;

public class RuntimeModeValidatorComposer : IComposer
{
    public void Compose(IUmbracoBuilder builder)
        => builder.RuntimeModeValidators()
            .Remove<UmbracoApplicationUrlValidator>()
            .Add<DisableElectionForSingleServerValidator>();
}

public class DisableElectionForSingleServerValidator : IRuntimeModeValidator
{
    private readonly IOptionsMonitor<GlobalSettings> _globalSettings;

    public DisableElectionForSingleServerValidator(IOptionsMonitor<GlobalSettings> globalSettings) => _globalSettings = globalSettings;

    public bool Validate(RuntimeMode runtimeMode, [NotNullWhen(false)] out string? validationErrorMessage)
    {
        if (runtimeMode == RuntimeMode.Production && _globalSettings.CurrentValue.DisableElectionForSingleServer == false)
        {
            validationErrorMessage = "Disable primary server election (and support for load balancing) to improve startup performance.";
            return false;
        }

        validationErrorMessage = null;
        return true;
    }
}
net stop was /y
net start w3svc
dotnet publish -o ../deployment-artefacts -f net9.0
<PropertyGroup>
  <AspNetCoreHostingModel>OutOfProcess</AspNetCoreHostingModel>
</PropertyGroup>
<modules runAllManagedModulesForAllRequests="false">
    <remove name="WebDAVModule" />
</modules>
You can read more about them here
Load Balancing documentation
fail to boot
Run from Package feature
Load Balancing documentation
Azure Key Vault documentation
standard upgrade instructions
See the list of breaking changes
https://issues.umbraco.org/issue/U4-2900
full settings
https://issues.umbraco.org/issue/U4-58
https://issues.umbraco.org/issue/U4-2742
Issue U4-2886
Issue U4-3015
Load Balancing overview
Azure Web Apps
.NET Host
Microsoft guidance
Download .NET page
requirements
ASP.NET Core Runtime Hosting Bundle
IIS Release task in Azure DevOps
In-process hosting
Out-of-process hosting
Development mode
Development mode
SyncedTempFileSystemDirectoryFactory
TempFileSystemDirectoryFactory
Setting Explicit Server Roles

Sections

In this article you can learn more about the various sections you can find within the Umbraco Backoffice.

A section in Umbraco is where you perform specific tasks related to a particular area of Umbraco. For example, Content, Settings, and Users are all sections. You can navigate between the different sections by clicking the corresponding icon in the section menu positioned at the top of the Backoffice.

Below is a short overview of the default sections in Umbraco CMS:

Content

The Content section contains the content nodes that make up the website. Content is displayed as nodes in the Content tree.

Nodes in Umbraco can display the following content states:

  • Grayed-out nodes are not published yet.

To create content, you must define it using Document Types.

Media

The Media section contains the media for the website. You can create folders and upload media files, such as images and PDFs. Additionally, you can customize the existing Media Types or define your own from the Settings section.

Settings

The Settings section allows you to manage website layout files, languages, media, and content types. It also gives you access to more advanced features such as the Log Viewer and extension insights.

The Settings section consists of:

Structure

  • Document Types

  • Media Types

  • Member Types

  • Data Types

  • Languages

  • Document Blueprints

Templating

  • Templates (.cshtml files)

  • Partial views (.cshtml files)

  • Stylesheets (.css files)

  • Scripts (.js files)

Advanced

  • Relations

  • Log Viewer

  • Extension Insights

  • Webhooks

The Settings section in the Umbraco backoffice has its own set of default dashboards.

Packages

In this section, you can browse the different packages available for your Umbraco solution. You can also get an overview of all the packages you have installed or created.

Users

The Users section allows administrators to manage user accounts, assign permissions, set user roles, and monitor user activity within the backoffice. It provides control over who can access and modify content, media, and settings in the CMS.

Members

The Members section allows to create and manage member profiles, set up member groups, and control Member's access to restricted content on the website.

Dictionary

The Dictionary section is where you create and manage Dictionary Items. By managing these dictionary items, you can ensure consistent and efficient content translation and maintenance across different languages.

Add-Ons

To enhance Umbraco's functionality, you can integrate plugins and extensions tailored to specific needs. These add-ons expand Umbraco's capabilities, allowing for a more customized and powerful content management experience.

For example, you can start with core Umbraco features and later decide to integrate additional products. Currently, Umbraco supports add-on products like:

  • Forms: Simplifies the creation and management of Forms.

  • Deploy: Facilitates smooth deployment processes.

  • Workflow: Enhances content workflows and approval processes.

  • Commerce: Adds e-commerce capabilities to your site.

  • UI Builder: Helps in designing and customizing the user interface.

When you add an add-on product to Umbraco, it appears in the Backoffice as a new section, seamlessly extending your content management capabilities.

Help Section

The Help section in Umbraco provides documentation and resources to assist in understanding and effectively using the Umbraco CMS. It typically includes the following in the Getting Started Dashboard:

  • Documentation: Comprehensive guides, tutorials, and references covering different aspects of Umbraco.

  • Community Forums: Access to forums where you can ask questions, share knowledge, and seek assistance from other Umbraco community members.

  • Resources: Stay updated with the latest news, access documentation, watch free video tutorials, and register for live demos.

  • Training: Learn how to effectively use Umbraco through structured courses, webinars, and hands-on tutorials designed to enhance your proficiency with the CMS.

The Help section serves as a valuable resource hub in navigating and leveraging the capabilities of the Umbraco CMS effectively.

Custom Sections

Access based on User Group

A User can access a particular section based on the User Group permissions.

Property Editors

Learn more about the default property editors that ships with an Umbraco installation.

A Property Editor is the editor that a Data Type references. A Data Type is defined by a user in the Umbraco backoffice and references a Property Editor. In Umbraco a Property Editor is defined in a JSON manifest file and associated JavaScript files.

Are you looking for the Grid Layout or Nested Content?

The following Property Editors have been removed with the release of Umbraco 14:

  • Grid Layout

  • Nested content

When creating a Data Type, specify the property editor for the Data Type to use by selecting from the "Property editor" list (as shown below).

Umbraco comes pre-installed with many useful property editors.

More information

Tutorials

Standalone File System

No file replication is configured, deployment handles updating files on the different servers.

If the file system on your servers isn't performing any file replication then no Umbraco configuration file changes are necessary. However Media will need to be configured to use a shared location such as Blob storage or S3.

Synchronised File System

The servers are performing file replication, updates to a file on one server, updates the corresponding file on any other servers.

If the file system on your servers is performing file replication then the Umbraco temporary folder (~/umbraco/Data/TEMP) must be excluded from replication.

If the file system on your servers is located on shared storage you will need to configure Umbraco to locate the Umbraco temporary folder outside of the shared storage.

Replication techniques

A common way to replicate files on Windows Server is to use [DFS](https://msdn.microsoft.com/en-us/library/windows/desktop/bb540031(v=vs.85), which is included with Windows Server.

Additional DFS resources:

There are other alternatives for file replication out there, some free and some licensed. You'll need to decide which solution is best for your environment.

Non-replicated files

When deploying Umbraco in a load balanced scenario using file replication, it is important to ensure that not all files are replicated - otherwise you will experience file locking issues. Here are the folders and files that should not be replicated:

  • ~/umbraco/Data/TEMP/*

Achieve this by changing the value of the LuceneDirectoryFactory setting to 'TempFileSystemDirectoryFactory' in the appsettings.json. The downside is that if you need to view temporary files you'll have to find it in the temp files. Locating the file this way isn't always clear.

Below is shown how to do this in a Json configuration source.

{
    "Umbraco": {
        "CMS": {
            "Examine": {
                "LuceneDirectoryFactory" : "TempFileSystemDirectoryFactory"
            }
        }
    }
}
  • ~/umbraco/Logs/*

    • This is optional and depends on how you want your logs configured (see below)

If for some reason your file replication solution doesn't allow you to not replicate specific files folders (which it should!!) then you can use an alternative approach by using virtual directories.

The following is not the recommended setup but it is a viable alternative:

  • Copy the ~/umbraco/Data/TEMP directory to each server, outside of any replication areas or to a unique folder for each server.

  • Create a virtual directory (not a virtual application) in the ~/umbraco/Data/ folder, and name it TEMP. Point the virtual directory to the folder you created in step 2.

  • You may delete the ~/umbraco/Data/TEMP folder from the file system - not IIS as this may delete the virtual directory - if you wish.

IIS Setup

IIS configuration is pretty straightforward with file replication. IIS is only reading files from its own file system like a normal IIS website.

Mixture of standalone & synchronised

In some scenarios you have a mixture of standalone and synchronised file systems. An example of this is Azure Web Apps where the file system isn't replicated between backoffice and front end servers but is replicated between all front end servers, in this configuration you should follow the steps for synchronised file systems.

Examine Directory Factory Options

  • The TempFileSystemDirectoryFactory allows Examine to store indexes directly in the environment temporary storage directory, and should be used instead of SyncTempEnvDirectoryFactory mentioned above.

{
    "Umbraco": {
        "CMS": {
            "Examine": {
                "LuceneDirectoryFactory" : "TempFileSystemDirectoryFactory"
            }
        }
    }
}
  • The SyncedTempFileSystemDirectoryFactory enables Examine to sync indexes between the remote file system and the local environment temporary storage directory, the indexes will be accessed from the temporary storage directory. This setting is needed because Lucene has issues when working from a remote file share so the files need to be read/accessed locally. Any time the index is updated, this setting will ensure that both the locally created indexes and the normal indexes are written to. This will ensure that when the app is restarted or the local environment temp files are cleared out that the index files can be restored from the centrally stored index files.

{
    "Umbraco": {
        "CMS": {
            "Examine": {
                "LuceneDirectoryFactory" : "SyncedTempFileSystemDirectoryFactory"
            }
        }
    }
}

Advanced techniques

Logging With Load Balancing

Umbraco v8+ uses Serilog for logging. When load balancing Umbraco consideration should be given as to how the log files from each server will be accessed.

There are many Serilog Sinks available and one of these may be appropriate to store logs for all servers in a central repository such as Azure Application Insights or Elmah.io.

Advanced Techniques With Flexible Load Balancing

This describes some more advanced techniques that you could achieve with flexible load balancing

The election process that runs during the startup of an Umbraco instance determines the server role that instance will undertake.

There are two server roles to be aware of for flexible load balancing:

  • SchedulingPublisher - The Umbraco instance usually used for backoffice access, responsible for running scheduled tasks.

  • Subscriber - A scalable instance that subscribes to content updates from the SchedulingPublisher server, not recommended to be used for backoffice access.

These new terms replace 'Master and Replica', in Umbraco versions 7 and 8.

Explicit SchedulingPublisher server

It is recommended to configure an explicit SchedulingPublisher server since this reduces the amount of complexity that the election process performs.

The first thing to do is create a couple of small classes that implement IServerRoleAccessor one for each of the different server roles:

public class SchedulingPublisherServerRoleAccessor : IServerRoleAccessor
{
    public ServerRole CurrentServerRole => ServerRole.SchedulingPublisher;
}

public class SubscriberServerRoleAccessor : IServerRoleAccessor
{
    public ServerRole CurrentServerRole => ServerRole.Subscriber;
}
// This should be executed on your single `SchedulingPublisher` server
builder.SetServerRegistrar<SchedulingPublisherServerRoleAccessor>();

// This should be executed on your `Subscriber` servers
builder.SetServerRegistrar<SubscriberServerRoleAccessor>();

Now that your subscriber servers are using your custom SubscriberServerRoleAccessor class, they will always be deemed 'Subscriber' servers and will not attempt to run the automatic server role election process or task scheduling.

By setting your SchedulingPublisher server to use your custom SchedulingPublisherServerRoleAccessor class, it will always be deemed the 'SchedulingPublisher' and will always be the one that executes all task scheduling.

Subscriber servers - Read-only database access

This description pertains only to Umbraco database tables

In some cases infrastructure admins will not want their front-end servers to have write access to the database. By default front-end servers will require write full access to the following tables:

  • umbracoServer

  • umbracoNode

This is because by default each server will inform the database that they are active and more importantly it is used for task scheduling. Only a single server can execute task scheduling and these tables are used for servers to use a server role election process without the need for any configuration. So in the case that a subscriber server becomes the SchedulingPublisher task scheduler, it will require write access to all of the Umbraco tables.

Now that your subscriber servers are using your custom SubscriberServerRoleAccessor class, they will always be deemed 'Subscriber' servers and will not attempt to run the automatic server role election process or task scheduling. Because you are no longer using the default ElectedServerRoleAccessor they will not try to ping the umbracoServer table.

  • umbracoLock

  • umbracoKeyValue

SQL Server Replica databases cannot be used as they are read-only without replacing the default MainDomLock with a custom provider.

Controlling how often the load balancing instructions from the database are processed and pruned

The configurations can be adjusted to control how often the load balancing instructions from the database are processed and pruned.

Below is shown how to do this from a JSON configuration source.

{
    "Umbraco": {
        "CMS": {
            "Global": {
                "DatabaseServerMessenger": {
                    "MaxProcessingInstructionCount": 1000,
                    "TimeBetweenPruneOperations": "00:01:00",
                    "TimeBetweenSyncOperations": "00:00:05",
                    "TimeToRetainInstructions": "2.00:00:00"
                }
            }
        }
    }
}

Options:

  • TimeToRetainInstructions - The timespan to keep instructions in the database; records older than this number will be pruned.

  • MaxProcessingInstructionCount - The maximum number of instructions that can be processed at startup; otherwise the server cold-boots (rebuilds its caches)

  • TimeBetweenSyncOperations - The timespan to wait between each sync operations

  • TimeBetweenPruneOperations - The timespan to wait between each prune operation

Backoffice

Learn more about the Umbraco backoffice which is the admin side of your Umbraco website

In this article you can learn more about the common terms and concepts that are used throughout the Umbraco backoffice.

When you go to the backoffice for the first time, you're presented with the login screen.

A section in Umbraco is where you do specific tasks related to that section. For example Content, Settings and Users. You can navigate between the different sections of the backoffice by clicking the corresponding icon in the section menu.

The Section menu is the horizontal menu located on the top of the backoffice.

A tree is a hierarchical list of items related (and usually restricted) to a specific concept, like for example content or media.

Node

A node is an item in a tree. Media section items appear as nodes in the Media tree, while pages and content are displayed in the Content tree, and so on.

A dashboard is the main view you are presented with when entering a section within the backoffice. It can be used to show valuable information to the users of the system.

Editor

An editor is what you use to edit different items within the backoffice. There are editors specific to editing stylesheets, there are editors for editing Partial Views, and so forth.

Content is what you find in the Content section. Each item in the tree is called a content node. Each content node in the content tree consists of different fields, and each of them is defined by a Document Type.

Document Type

Document Types define the types of content nodes that backoffice users can create in the content tree. Each Document Type contains different properties. Each property has a specific Data Type for example text or number.

Properties

Every Document Type has properties. These are the fields that the content editor is allowed to edit for the content node.

Each Document Type property has a Data Type that defines the type of input of that property. Data Types reference a Property Editor and are configured in the Umbraco backoffice in the Settings section. A Data Type can be something basic (text string, number, true/false) or more complex (multi-node tree picker, image cropper, etc).

A property editor is a view used by Data Types to insert content into Umbraco. An example of a property editor is the Textarea. It's possible to have many Textarea Data Types with different settings that all use the Textarea property editor.

Media items are used to store assets like images and video within the Media section and can be referenced from your content.

Media Types

Media Types are similar to Document Types in Umbraco, except they are specifically for media items in the Media section.

Umbraco includes the following default Media Types - Article, Audio, File, Folder, Image, Vector Graphics (SVG), and Video.

A member is someone who has access to signup, register, and login into your public website and is not to be confused with Users.

Member Types

Similar to a Document Type and a Media Type. You are able to define custom properties to store on a member such as Twitter username or website URL.

A Template is where you define the HTML markup of your website and also where you output the data from your content nodes.

Packages

Users

A user is someone who has access to the Umbraco backoffice and is not to be confused with Members. When Umbraco has been installed a user will automatically be generated with the login (email) and password entered during installation. Users can be created, edited, and managed in the User section.

Document Blueprint provide a blueprint for content nodes based on an existing node.

Checkbox List

Schema Alias: Umbraco.CheckBoxList

UI Alias: Umb.PropertyEditorUi.CheckBoxList

Returns: IEnumerable<string>

Displays a list of preset values as a list of checkbox controls. The text saved is an IEnumerable collection of the text values.

Unlike other property editors, the Option IDs are not directly accessible in Razor.

Data Type Definition Example

Content Example

MVC View Example

Without Modelsbuilder

@{
    if (Model.HasValue("superHeros"))
    {
        <ul>
            @foreach (var item in Model.Value<IEnumerable<string>>("superHeros"))
            {
                <li>@item</li>
            }
        </ul>
    }
}

With Modelsbuilder

@{
    if (Model.SuperHeros.Any())
    {
        <ul>
            @foreach (var item in Model.SuperHeros)
            {
                <li>@item</li>
            }
        </ul>
    }
}

Add values programmatically

The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.

@inject IContentService Services;
@using Umbraco.Cms.Core.Serialization
@using Umbraco.Cms.Core.Services;
@inject IJsonSerializer Serializer;
@{
    // Get access to ContentService
    var contentService = Services;

    // Create a variable for the GUID of the page you want to update
    var guid = Guid.Parse("32e60db4-1283-4caa-9645-f2153f9888ef");

    // Get the page using the GUID you've defined
    var content = contentService.GetById(guid); // ID of your page

    // Set the value of the property with alias 'superHeros'.
    content.SetValue("superHeros", Serializer.Serialize(new[] { "Umbraco", "CodeGarden"}));

    // Save the change
    contentService.Save(content);
}

Although the use of a GUID is preferable, you can also use the numeric ID to get the page:

@{
    // Get the page using it's id
    var content = contentService.GetById(1234);
}

If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string:

@inject IPublishedSnapshotAccessor _publishedSnapshotAccessor;
@using Umbraco.Cms.Core.PublishedCache;
@{

// Set the value of the property with alias 'superHeros'
content.SetValue(Home.GetModelPropertyType(_publishedSnapshotAccessor,x => x.SuperHeros).Alias, Serializer.Serialize(new[] { "Umbraco", "CodeGarden"}));
}

Content Picker

Schema Alias: Umbraco.ContentPicker

UI Alias: Umb.PropertyEditorUi.DocumentPicker

Returns: IEnumerable<IPublishedContent>

The Content Picker enables choosing the type of content tree to display and which specific part to render. It also allows you to set a dynamic root node for the content based on the current document using the Content Picker.

The Content Picker was formerly known as the Multinode Treepicker in version 13 and below.

The renaming is purely a client-side UI change, meaning the property editor still uses the Umbraco.MultiNodeTreePicker schema alias.

The change was made as the word Content in the backoffice acts as an umbrella term covering Documents, Media, and Members.

Are you looking for the original Content Picker?

Data Type Definition Example

Minimum/maximum number of items

Define a limit on the number of items allowed to be selected.

Ignore user start nodes

Checking this field allows users to choose nodes they normally cannot access.

Node Type

This option allows for configuring what type of content is available when using the Data Type. The available types of content are Content, Members, or Media items.

When selecting Content from the dropdown, the option to specify a root node, also called the origin, becomes available.

When picking the origin there are several different options available:

The following options are available when picking the origin:

  • Root: The root is the first level item of the sub-tree of the current node.

  • Parent: The parent is the nearest ancestor of the current node.

  • Current: The current node.

    • A picker that uses the current node, cannot pick anything when the current node is created, as it will not have any children.

  • Site: The nearest ancestor of the current node with a domain assigned.

  • Specific node: A specific node selected from the existing content.

When an origin has been specified, it becomes possible to continue to build a Dynamic Root by adding additional query steps.

Navigate the content tree relative to the specified origin to execute multiple query steps and find the root node needed.

The following options are available:

  • Nearest Ancestor or Self: Find the nearest ancestor or current item that fits with one of the configured Document Types.

  • Furthest Ancestor or Self: Find the furthest ancestor or current item that fits with one of the configured Document Types.

  • Nearest Descendant or Self: Find the nearest descendant or current item that fits with one of the configured Document Types.

  • Furthest Descendant or Self: Find the furthest descendant or current item that fits with one of the configured Document Types.

Each query step takes the output from the origin or the previous step as input. It is only ever the result of the last query step that is passed to the next step.

Adding a custom query step

Custom query steps can be used to solve specific use cases, such as traversing sibling documents or matching property values. Before the custom query steps can be selected in the Data Type settings, they must be defined via code.

When implementing a query step it requires a collection of origins and information about the query step. The collection is taken from where the name specified in the UI can be found.

Specifying the origin is required for the custom query step to become available.

You can inject dependencies into the constructor. These dependencies could be custom repositories or the IVariationContextAccessor, if you want to use the current culture.

The ExecuteAsync method receives a set of content keys from the last executed query step or the origin. It has to return a new set of content keys.

public class MyCustomDynamicRootQueryStep : IDynamicRootQueryStep
{
    private readonly IMyCustomRepository _myCustomRepository;

    public MyCustomDynamicRootQueryStep(IMyCustomRepository myCustomRepository)
    {
        _myCustomRepository = myCustomRepository;
    }

    // The string below is what you specify in the UI to execute this custom query step.
    public virtual string SupportedDirectionAlias { get; set; } = "MyCustomStep";

    public async Task<Attempt<ICollection<Guid>>> ExecuteAsync(ICollection<Guid> origins, DynamicRootQueryStep filter)
    {
        if (filter.Alias != SupportedDirectionAlias)
        {
            return Attempt<ICollection<Guid>>.Fail();
        }

        if (origins.Any() is false)
        {
            return Attempt<ICollection<Guid>>.Succeed(Array.Empty<Guid>());
        }

        // Replace the following with your custom logic
        var result = await _myCustomRepository.GetWhateverIWantAsync(origins);

        return Attempt<ICollection<Guid>>.Succeed(result);
    }
}

To register the custom query step, append it to the existing query steps, DynamicRootSteps(). This is done from a composer as shown below.

public class CustomQueryStepComposer : IComposer
{
    public void Compose(IUmbracoBuilder builder)
    {
        builder.DynamicRootSteps().Append<MyCustomDynamicRootQueryStep>();
    }
}

Finally, register the custom query step on the client side and provide a brief description.

You can do this in an umbraco-package.json file, as shown below:

{
  "$schema": "../../umbraco-package-schema.json",
  "name": "My.Test.Extension",
  "version": "0.1.0",
  "extensions": [
    {
      "type": "dynamicRootQueryStep",
      "alias": "Umb.DynamicRootQueryStep.MyCustomStep",
      "name": "Dynamic Root Query Step: My Custom Step",
      "meta": {
        "queryStepAlias": "MyCustomStep",
        "label": "My Custom Step",
        "description": "My custom step description.",
        "icon": "icon-coffee"
      },
      "weight": 0
    }
  ]
}

Allow items of type

Choose which types of content should be available to pick using the Content Picker.

This is done by selecting one or more Document Types.

Query Example

Consider the following tree structure where the Document Type alias is presented in square brackets.

  • Codegarden

    • 2023 [year]

      • Talks [talks]

        • ...

        • Umbraco anno MMXXIII [talk]

      • Stages [stages]

        • Social Space [stage]

        • No 10 [stage]

        • No 16 [stage]

        • The Theatre [stage]

    • 2022 [year]

      • Talks [talks]

        • ...

      • Stages [stages]

        • Main Stage [stage]

        • The Barn [stage]

        • The Theatre [stage]

Consider configuring a Content Picker on the talk Document Type to select a stage for the talk. Here, you want to display only the stages for the actual year. To do this, you need to set the parent as the origin.

For instance, if you are on the Umbraco anno MMXXIII node, the collection of content keys passed into the first query step will only contain the Talks content node.

  • First, query for the nearest ancestors of the type year. This will return 2023.

  • Second, query for the nearest descendants of the type stages.

When opening the picker on the Umbraco anno MMXXIII node, it will now show the children of the node on the path Codegarden > 2023 > Stages.

MVC View Example

Without Modelsbuilder

@{
    var typedContentPicker = Model.Value<IEnumerable<IPublishedContent>>("featuredArticles");
    if (typedContentPicker != null) {
        foreach (var item in typedContentPicker)
        {
            <p>@item.Name</p>
        }
}

With Modelsbuilder

@{
    var typedContentPicker = Model.FeaturedArticles;
    foreach (var item in typedContentPicker)
    {
        <p>@item.Name</p>
    }
}

Add values programmatically

The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.

@inject IContentService Services;
@using Umbraco.Cms.Core;
@using Umbraco.Cms.Core.Services

@{
    // Get access to ContentService
    var contentService = Services;

    // Create a variable for the GUID of the page you want to update
    var guid = Guid.Parse("32e60db4-1283-4caa-9645-f2153f9888ef");

    // Get the page using the GUID you've defined
    var content = contentService.GetById(guid); // ID of your page

    // Get the pages you want to assign to the Content Picker
    var page = Umbraco.Content("665d7368-e43e-4a83-b1d4-43853860dc45");
    var anotherPage = Umbraco.Content("1f8cabd5-2b06-4ca1-9ed5-fbf14d300d59");

    // Create Udi's of the pages
    var pageUdi = Udi.Create(Constants.UdiEntityType.Document, page.Key);
    var anotherPageUdi = Udi.Create(Constants.UdiEntityType.Document, anotherPage.Key);

    // Create a list of the page udi's
    var udis = new List<string>{pageUdi.ToString(), anotherPageUdi.ToString()};

    // Set the value of the property with alias 'featuredArticles'.
    content.SetValue("featuredArticles", string.Join(",", udis));

    // Save the change
    contentService.Save(content);
}

Although the use of a GUID is preferable, you can also use the numeric ID to get the page:

@{
    // Get the page using it's id
    var content = contentService.GetById(1234);
}

If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string:

@inject IPublishedSnapshotAccessor _publishedSnapshotAccessor;
@using Umbraco.Cms.Core.PublishedCache;

@{
    // Set the value of the property with alias 'featuredArticles'
    content.SetValue(Home.GetModelPropertyType(_publishedSnapshotAccessor ,x => x.FeaturedArticles).Alias, string.Join(",", udis));
}

Date

Schema Alias: Umbraco.DateTime

UI Alias: Umb.PropertyEditorUi.DatePicker

Returns: Date

Displays a calendar UI for selecting dates which are saved as a DateTime value.

Data Type Definition Example

Content Example

MVC View Example - displays a datetime

Typed

@(Model.Content.GetPropertyValue<DateTime>("datePicker").ToString("dd MM yyyy"))

Dynamic (Obsolete)

@{
    @CurrentPage.datePicker.ToString("dd-MM-yyyy")
}

Color Picker

Schema Alias: Umbraco.ColorPicker

UI Alias: Umb.PropertyEditorUi.ColorPicker

Returns: String (Hexadecimal)

Returns: Umbraco.Cms.Core.PropertyEditors.ValueConverters.ColorPickerValueConverter.PickedColor (When using labels)

The Color picker allows you to set some predetermined colors that the editor can choose between.

It is possible to add a label to use with the color.

Data Type Definition Example

Content Example

Example with Modelsbuilder

@{
     // Model has a property called "Color" which holds a Color Picker editor
    var hexColor = Model.Color;
    // Define the label if you've included it
    String colorLabel = Model.Color.Label;

    if (hexColor != null)
    {
        <div style="background-color: #@hexColor">@colorLabel</div>
    }
}

Example without Modelsbuilder

@using Umbraco.Cms.Core.PropertyEditors.ValueConverters
@{
    // Model has a property called "Color" which holds a Color Picker editor
    var hexColor = Model.Value("Color");
    // Define the label if you've included it
    var colorLabel = Model.Value<ColorPickerValueConverter.PickedColor>("Color").Label;

    if (hexColor != null)
    {
        <div style="background-color: #@hexColor">@colorLabel</div>
    }
}

Add values programmatically

The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.

Without labels

@inject IContentService Services;
@using Umbraco.Cms.Core.Services;
@{
    // Get access to ContentService
    var contentService = Services;

    // Create a variable for the GUID of the page you want to update
    var guid = Guid.Parse("32e60db4-1283-4caa-9645-f2153f9888ef");

    // Get the page using the GUID you've defined
    var content = contentService.GetById(guid); // ID of your page

    // Set the value of the property with alias 'color'. 
    // The value set here, needs to be one of the colors on the Color Picker
    content.SetValue("color", "38761d");

    // Save the change
    contentService.Save(content);
}

With labels

@inject IContentService Services;
@using Umbraco.Cms.Core.Services;
@{
    // Get access to ContentService
    var contentService = Services;

    // Create a variable for the GUID of the page you want to update
    var guid = Guid.Parse("32e60db4-1283-4caa-9645-f2153f9888ef");

    // Get the page using the GUID you've defined
    var content = contentService.GetById(guid); // ID of your page

    // Set the value of the property with alias 'color'. 
    // The value set here, needs to be one of the colors on the Color Picker
    content.SetValue("color", "{'value':'000000', 'label':'Black', 'sortOrder':1, 'id':'1'}");

    // Save the change
    contentService.Save(content);
}

Although the use of a GUID is preferable, you can also use the numeric ID to get the page:

@{
    // Get the page using it's id
    var content = contentService.GetById(1234); 
}

If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string:

@inject IPublishedSnapshotAccessor _publishedSnapshotAccessor;
@using Umbraco.Cms.Core.PublishedCache;
@{
    // Set the value of the property with alias 'color'
    content.SetValue(Home.GetModelPropertyType(_publishedSnapshotAccessor, x => x.Color).Alias, "38761d");
}

Decimal

Schema Alias: Umbraco.Decimal

UI Alias: Umb.PropertyEditorUi.Decimal

Returns: decimal

Data Type Definition Example

In the example above the possible values for the input field would be [8, 8.5, 9, 9.5, 10]

All other values will be removed in the content editor when saving or publishing.

If the value of Step Size is not set then all decimal values between 8 and 10 is possible to input in the content editor.

Content Example

MVC View Example

With Modelsbuilder

@Model.MyDecimal

Without Modelsbuilder

@Model.Value("MyDecimal")

Add values programmatically

The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.

@inject IContentService Services;
@using Umbraco.Cms.Core.Services;
@{
    // Get access to ContentService
    var contentService = Services;

    // Create a variable for the GUID of the page you want to update
    var guid = Guid.Parse("32e60db4-1283-4caa-9645-f2153f9888ef");

    // Get the page using the GUID you've defined
    var content = contentService.GetById(guid); // ID of your page

    // Set the value of the property with alias 'myDecimal'. 
    content.SetValue("myDecimal", 3);

    // Save the change
    contentService.Save(content);
}

Although the use of a GUID is preferable, you can also use the numeric ID to get the page:

@{
    // Get the page using it's id
    var content = contentService.GetById(1234); 
}

If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string:

@inject IPublishedSnapshotAccessor _publishedSnapshotAccessor;
@using Umbraco.Cms.Core.PublishedCache;
@{
    // Set the value of the property with alias 'myDecimal'
    content.SetValue(Home.GetModelPropertyType(_publishedSnapshotAccessor, x => x.MyDecimal).Alias, 3);
}

Document Picker

Schema Alias: Umbraco.ContentPicker

UI Alias: Umb.PropertyEditorUi.DocumentPicker

Returns: IPublishedContent

The Document Picker was formerly known as the Content Picker in version 13 and below.

The renaming is purely a client-side UI change, meaning the property editor still uses the Umbraco.ContentPicker schema alias.

The change was made as the word Content in the backoffice acts as an umbrella term covering the terms Document, Media, and Member.

Data Type Definition Example

Document Picker Example

MVC View Example

Without Modelsbuilder

@{
    IPublishedContent typedContentPicker = Model.Value<IPublishedContent>("featurePicker");
    if (typedContentPicker != null)
    {
        <p>@typedContentPicker.Name</p>
    }
}

With Modelsbuilder

@{
    IPublishedContent typedContentPicker = Model.FeaturePicker;
    if (typedContentPicker != null)
    {
        <p>@typedContentPicker.Name</p>
    }
}

Add values programmatically

The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.

@using Umbraco.Cms.Core.Services;

@inject IContentService Services;
@{
    // Get access to ContentService
    var contentService = Services;

    // Create a variable for the GUID of the page you want to update
    var guid = Guid.Parse("32e60db4-1283-4caa-9645-f2153f9888ef");

    // Get the page using the GUID you've defined
    var content = contentService.GetById(guid); // ID of your page

    // Get the page you want to assign to the document picker
    var page = Umbraco.Content("665d7368-e43e-4a83-b1d4-43853860dc45");

    // Create an Udi of the page
    var udi = Udi.Create(Constants.UdiEntityType.Document, page.Key);

    // Set the value of the property with alias 'featurePicker'.
    content.SetValue("featurePicker", udi.ToString());

    // Save the change
    contentService.Save(content);
}

Although the use of a GUID is preferable, you can also use the numeric ID to get the page:

@{
    // Get the page using it's id
    var content = contentService.GetById(1234);
}

If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string:

@using Umbraco.Cms.Core.PublishedCache;
@using Umbraco.Cms.Core;

@inject IPublishedSnapshotAccessor _publishedSnapshotAccessor;
@{
    // Set the value of the property with alias 'featurePicker'
    content.SetValue(Home.GetModelPropertyType(_publishedSnapshotAccessor, x => x.FeaturePicker).Alias, udi.ToString());
}

Eye Dropper Color Picker

Schema Alias: Umbraco.ColorPicker.EyeDropper

UI Alias: Umb.PropertyEditorUi.EyeDropper

Returns: string

The Eye Dropper Color picker allows you to choose a color from the full color spectrum using HEX and RGBA.

Data Type Definition Example

Content Example

Example with Modelsbuilder

Example without Modelsbuilder

Add values programmatically

The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.

Although the use of a GUID is preferable, you can also use the numeric ID to get the page:

If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string:

Media Picker

Schema Alias: Umbraco.MediaPicker3

UI Alias: Umb.PropertyEditorUi.MediaPicker

Returns: IEnumerable<MediaWithCrops> or MediaWithCrops

This property editors returns one of the following:

  • A collection (IEnumerable<MediaWithCrops>) if the Pick multiple items setting is enabled.

  • A single MediaWithCrops item if the Pick multiple items setting is disabled.

Data Type Definition Example

Accepted types

Use setting to limit the picker to only select Media Items of these types.

Pick multiple items

Use this setting to enable the property to contain multiple items. When this is enabled the property editor returns an IEnumerable<MediaWithCrops>.

You can still set the maximum amount to 1. Do so when you want to retrieve a collection but only allow the Content Editors to select one Media Item.

Amount

Use this setting to enforce a minimum and/or maximum amount of selected Media Items.

It is not possible to set a maximum amount when the "Pick multiple items" feature is disabled.

Start node

This setting is used to limit the Media Picker to certain parts of the Media Tree.

Ignore user start nodes

Use this setting to overrule user permissions, to enable any user of this property to pick any Media Item of the chosen Start node.

When this setting is enabled, a user can access the media available under the selected "Start Node" (/Design in this case). This applies even if they normally lack access. The access is granted specifically when using this particular Media Picker.

Enable Focal Point

Enable the focal point setter, do only enable this if the focal point is used or if you have Image crops defined.

Image Crops

Define local image crops. Local image crop data is stored on the document in this property. This means it can differentiate between documents.

This is different from Global crops as they are defined on the Media Item, making the crops shared between all usage of that Media Item.

Global crops are configured on the Image Cropper property of the Image Media Type

Content Example

MVC View Example

Multiple enabled without Modelsbuilder

Multiple enabled without Modelsbuilder to retrieve IEnumerable data

While MediaWithCrops is the default return type, IPublishedContent may be used in backward-compatible implementations or when working directly with core APIs.

Multiple enabled with Modelsbuilder

Multiple disabled without Modelsbuilder

Multiple disabled with Modelsbuilder

Using crops

Both local and global crops are retrieved using the method GetCropUrl. If crops with identical aliases are defined both locally and globally, the locally defined crops are always prioritized by GetCropUrl.

The following is an example of how to retrieve a crop from a MediaWithCrops entry:

Explicitly retrieving global crops

You can retrieve globally defined crops explicitly by using GetCropUrl on the UrlHelper:

Add values programmatically

The following sample will update a single image in a Media Picker.

The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.

Although the use of a GUID is preferable, you can also use the numeric ID to get the page:

If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string:

File Upload

Schema Alias: Umbraco.UploadField

UI Alias: Umb.PropertyEditorUi.UploadField

Returns: string

Adds an upload field, which allows documents or images to be uploaded to Umbraco.

You can define which file types should be accepted through the upload field.

For uploading and adding files and images to your Umbraco project, we recommend using the Media Picker.

Data Type Definition Example

Content Example

In code, the property is a string, which references the location of the file.

Example: "/media/o01axaqu/guidelines-on-remote-working.pdf"

MVC View Example

Without Modelsbuilder

With Modelsbuilder

Add values programmatically

The samples in this section have not been verified against the latest version of Umbraco.

The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.

Although the use of a GUID is preferable, you can also use the numeric ID to get the page:

If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string:

Member Group Picker

Schema Alias: Umbraco.MemberGroupPicker

UI Alias: Umb.PropertyEditorUi.MemberGroupPicker

Returns: string

The Member Group Picker opens a panel to pick one or more member groups from the Member section. The value saved is of type string (comma separated IDs).

Data Type Definition Example

Content Example

MVC View Example

Without Modelsbuilder

With Modelsbuilder

Add values programmatically

The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.

You can also add multiple groups by creating a comma separated string with the desired member group IDs.

Although the use of a GUID is preferable, you can also use the numeric ID to get the page:

If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string:

Email Address

In this article you can learn how to use the build in email property editor

Schema Alias: Umbraco.EmailAddress

UI Alias: Umb.PropertyEditorUi.EmailAddress

Returns: String

Displays an email address.

Settings

The Email Address Property Editor does not come with any further configuration. The property can be configured once it has been added to a Document Type.

Content Example

MVC View Example

Without Modelsbuilder

With Modelsbuilder

Add value programmatically

The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.

It is recommended that you set up validation on this property, in order to verify whether the value added is in the correct format.

Image Cropper

Schema Alias: Umbraco.ImageCropper

UI Alias: Umb.PropertyEditorUi.ImageCropper

Returns: MediaWithCrops

Returns a path to an image, along with information about focal point and available crops.

When the Image Cropper is used on a Media Type the crops are shared between all usages of a Media Item. This is called global crops.

If the Image Cropper is used on a Document Type, the file and crops will be local to the Document.

Settings

Define Crops

You can add, edit & delete crop presets the cropper UI can use.

Data Type Definition Example

Content Example

The Image Cropper provides a UI to upload an image, set a focal point on the image, and use predefined crops.

By default, images in the Image Cropper will be shown based on a set focal point and only use specific crops if they are available.

The Image Cropper comes with 3 modes:

  • Uploading an image

  • Setting a focal point

  • Cropping the image to predefined crops

Uploading images

The editor exposes a drop area for files. Select it to upload an image.

Set focal point

By default, the Image Cropper allows the editor to set a focal point on the uploaded image.

All the preset crops are shown to give the editor a preview of what the image will look like on the frontend.

Crop and resize

The editor can fit the crop to the image to ensure that the image is presented as intended.

Powered by ImageSharp.Web

Sample code

The Image Cropper comes with an API to generate crop URLs. You can also access the raw data directly as a dynamic object.

For rendering a cropped media item, the .GetCropUrl is used:

The third parameter is HtmlEncode and is by default set to true. This means you only need to define the parameter if you want to disable HTML encoding.

Example to output a "banner" crop from a cropper property with the property alias "customCropper"

Or, alternatively using the MediaWithCrops extension method:

Example to dynamically create a crop using the focal point - in this case 300 x 400px image

CSS background example to output a "banner" crop

Set the htmlEncode to false so that the URL is not HTML encoded

Add values programmatically

The following sample demonstrates how to add or change the value of an Image Cropper property programmatically. The sample creates an API controller with an action, which must be invoked via a POST request to the URL written above the action.

If you use Models Builder to generate source code (modes SourceCodeAuto or SourceCodeManual), you can use nameof([generated property name]) to access the desired property without using a magic string:

Get all the crop urls for a specific image

Crop URLs are not limited to usage within a view. IPublishedContent has a GetCropUrl extension method, which can be used to access crop URLs anywhere.

The following sample demonstrates how to use GetCropUrl to retrieve URLs for all crops defined on a specific image:

Sample on how to change the format of the image

Markdown Editor

Schema Alias: Umbraco.MarkdownEditor

UI Alias: Umb.PropertyEditorUi.MarkdownEditor

Returns: System.Web.HtmlString

This built-in editor allow the user to use the markdown formatting options, from within a tinyMCE-like interface.

Data Type Definition Example

There are three settings available for manipulating the Markdown editor property.

  • Preview toggles if a preview of the markdown should be displayed beneath the editor in the content view.

  • Default value is inserted if no content has been saved to the Document Type using this property editor.

  • Overlay Size is used to select the width of the link picker overlay in the content view.

Content Example

Explanation of buttons from left to right

Other functionality

MVC View Example

With Modelsbuilder

Without Modelsbuilder

Add values programmatically

The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.

Although the use of a GUID is preferable, you can also use the numeric ID to get the page:

If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string:

Member Picker

Schema Alias: Umbraco.MemberPicker

UI Alias: Umb.PropertyEditorUi.MemberPicker

Returns: IPublishedContent

The member picker opens a panel to pick a specific member from the member section. The value saved is of type IPublishedContent.

Data Type Definition Example

Content Example

MVC View Example

Without Modelsbuilder

With Modelsbuilder

Add values programmatically

The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.

Although the use of a GUID is preferable, you can also use the numeric ID to get the page:

If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string:

Multi Url Picker

Schema Alias: Umbraco.MultiUrlPicker

UI Alias: Umb.PropertyEditorUi.MultiUrlPicker

Returns: IEnumerable<Link> or Link

Multi Url Picker allows an editor to pick and sort multiple urls. This property editor returns a single item if the "Maximum number of items" Data Type setting is set to 1 or a collection if it is 0. These can either be internal, external or media.

Data Type Definition Example

Content Example

MVC View Example - value converters enabled

Typed

If Max number of items is configured to 1

Add values programmatically

The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.

Although the use of a GUID is preferable, you can also use the numeric ID to get the page:

If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string:

Numeric

Schema Alias: Umbraco.Integer

UI Alias: Umb.PropertyEditorUi.Integer

Returns: Integer

Numeric is an HTML input control for entering numbers. Since it's a standard HTML element the options and behaviour are all controlled by the browser and therefore is beyond the control of Umbraco.

Data Type Definition Example

Minimum

This allows you to set up a minimum value. If you will always need a minimum value of 10 this is where you set it up and whenever you use the datatype the value will always start at 10. It's not possible to change the value to anything lower than 10. Only higher values will be accepted.

Step Size

This allows you to control by how much value should be allowed to increase/decrease when clicking the up/down arrows. If you try to enter a value that does not match with the step setting then it will not be accepted.

Maximum

This allows you to set up a maximum value. If you will always need a maximum value of 100 this is where you set it up. It's not possible to change the value to anything higher than 100. Only lower values will be accepted.

Settings

Content Example

MVC View Examples

Rendering the output casting to an int (without Modelsbuilder)

By casting the output as an int it's possible for you to do mathematical operations with the value.

Rendering the output casting to a string (Without Modelsbuilder)

You can also render the output by casting it to a string, which means you will not be able to do mathematical operations

With Modelsbuilder

Add values programmatically

The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.

Although the use of a GUID is preferable, you can also use the numeric ID to get the page:

If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string:

image

Nodes that are currently locked using the Public Access feature.

Content nodes that contain a collection of nodes.

For more information, see the article.

For more information, see the article.

For more information, see the article.

For more information, see the article.

For more information, see the article.

For more information, see the article.

For more information, see the article.

If you wish to explore the unique features and use cases of Umbraco products, see the article.

For more information about extending the Umbraco platform through packages and integrations, see the documentation.

Along with the default sections that come with Umbraco, you can create your own .

Learn more about how to configure the permissions in the article about .

We recommend using the or the instead.

Depending on the configuration and performance of the environment's local storage you might need to consider and the .

Alternatively store the Umbraco temporary files in the local server's 'temp' folder and set Examine to use a .

There is a specific documentation for load balancing with

If you are load balancing with make sure to check out the article we have for that specific set-up.

Once you are familiar with how flexible load balancing works, you might be interested in some .

For more information, see .

then you'll need to replace the default IServerRoleAccessor for the your custom registrars. You'll can do this by using the SetServerRegistrar() extension method on IUmbracoBuilder from a .

In order to have read-only database access configured for your front-end servers, you need to implement the configuration mentioned above.

If using on Azure WebApps then write-permissions are required for the following tables for all server roles including 'Subscriber'.

These setting would normally be applied to all environments as they are added to the global app settings. If you need these settings to be environment specific, we recommend using .

.

.

You can expand trees by clicking the side arrow to the left of the node.

A package is the Umbraco term for an add-on or plugin used to extend the core functionalities in Umbraco. The packages can be found on the , and the can also be browsed directly in the backoffice of the Umbraco CMS.

You can use dictionary items to translate the options in a Checkbox List property editor in a multilingual setup. For more details, see the article.

See the example below to see how a value can be added or changed programmatically. To update a value of a property editor you need the .

The Content Picker from version 13 and below has been renamed .

The options above are all based on navigating the document hierarchy by locating ancestors and descendants. It is possible to execute custom steps to build even more complex queries. Once a custom query is available it will be added to the bottom of the Append steps to query dialog. Learn more about .

Read the above to learn more about this.

See the example below to see how a value can be added or changed programmatically. To update the value of a property editor you need the .

The only setting that is available for manipulating the Date property is to set a format. By default the format of the date in the Umbraco backoffice will be YYYY-MM-DD, but you can change this to something else. See for the supported formats.

See for more information about why the dynamic approach is obsolete.

See the example below to see how a value can be added or changed programmatically. To update a value of a property editor you need the .

See the example below to see how a value can be added or changed programmatically. To update a value of a property editor you need the .

The Document Picker opens a panel to pick a specific page from the content structure. The value saved is the selected nodes .

See the example below to see how a value can be added or changed programmatically. To update a value of a property editor you need the .

See the example below to see how a value can be added or changed programmatically. To update a value of a property editor you need the .

See the example below to see how a value can be added or changed programmatically. To update a value of a property editor you need the .

Find the full documentation for the property in the article.

Instead, we recommend using the for uploading files to your Umbraco website.

See the example below to see how a value can be added or changed programmatically. To update a value of this property editor you need the and the .

See the example below to see how a value can be added or changed programmatically. To update a value of a property editor you need the .

See the example below to learn how a value can be added or changed programmatically to an Email-address property. To update a value of a property editor you need the .

The value sent to an EmailAddress property needs to be a correct email address, For example: .

Notice that it is possible make local crops on shared Media Items via the .

is image processing middleware for ASP.NET.

We bundle this package with Umbraco and you can therefore take full advantage of all its features for resizing and format changing. Learn more about the built in processing commands in .

To update a content property value you need the .

Below the example to output a PNG using ImageSharp.Web command.

Function
Shortcut
Further explanation
Function
Shortcut

See the example below to see how a value can be added or changed programmatically. To update a value of a property editor you need the .

See the example below to see how a value can be added or changed programmatically. To update a value of a property editor you need the .

See the example below to see how a value can be added or changed programmatically. To update a value of a property editor you need the .

See the example below to see how a value can be added or changed programmatically. To update a value of a property editor you need the .

Defining Content
Creating Media
Settings Dashboards
Packages
Users
Members
Dictionary Items
Exploring the Umbraco Products
Umbraco DXP
Custom Sections
backoffice users
Block Editor
Rich Text Editor Blocks
Built-in Property Editors in Umbraco
Customizing Data Types
How to create a custom Property Editor
Overview of DFS Replication in Windows Server 2008 R2
Watch an intro to installing and working with DFS
Azure Web Apps
Azure Web Apps
advanced techniques
SeriLog Provided Sinks
Composer
environment specific appSetting files
Login screen
Read more about the login screen
Section
Read more about the section menu
Tree
Read more about the Tree
Dashboards
Read more about Dashboards
Content
Read more about Content
Data Type
Read more about Data Types
Property Editors
Read more about Property Editors
Media
Read more about Media
Members
Read more about Members
Templates
Read more about Templates
Umbraco Marketplace
Document Blueprints
Content Service
Document Picker
Content Service
MomentJS.com
Common pitfalls
Content Service
Content Service
UDI
Content Service
Umbraco temporary storage location
Examine Directory Factory Options
Directory Factory
Explicit SchedulingPublisher server
SqlMainDomLock
adding custom query steps in the section below
Node Type section
@{
    var color = Model.Color?.ToString();

    if (color != null)
    {
        <body style="background-color: @color"></body>
    }
}
@{
    var color = Model.Value<string>("Color");

    if (color != null)
    {
        <body style="background-color: @color"></body>
    }
}
@using Umbraco.Cms.Core.Services;
@inject IContentService Services;
@{
    // Get access to ContentService
    var contentService = Services;

    // Create a variable for the GUID of the page you want to update
    var guid = Guid.Parse("32e60db4-1283-4caa-9645-f2153f9888ef");

    // Get the page using the GUID you've defined
    var content = contentService.GetById(guid); // ID of your page

    // Set the value of the property with alias 'color'.
    content.SetValue("color", "#6fa8dc");
    
    // Save the change
    contentService.Save(content);
}
@{
    // Get the page using it's id
    var content = contentService.GetById(1234); 
}
@using Umbraco.Cms.Core.PublishedCache;
@inject IPublishedSnapshotAccessor _publishedSnapshotAccessor;
@{
    // Set the value of the property with alias 'color'
    content.SetValue(Home.GetModelPropertyType(_publishedSnapshotAccessor, x => x.Color).Alias, "#6fa8dc");
    
    // Set the value of the property with alias 'theme'
    content.SetValue(Home.GetModelPropertyType(_publishedSnapshotAccessor, x => x.Theme).Alias, "rgba(111, 168, 220, 0.7)");
}
@using Umbraco.Cms.Core.Models
@{
    var typedMultiMediaPicker = Model.Value<IEnumerable<MediaWithCrops>>("medias");
    foreach (var entry in typedMultiMediaPicker)
    {
        <img src="@entry.MediaUrl()" style="width:200px" />
    }
}
@using Umbraco.Cms.Core.Models
@{
    var listOfImages = Model.Value<IEnumerable<IPublishedContent>>("medias");
    foreach (var image in listOfImages)
    {
        <img src="@image.Url()" alt="@image.Name" />
    }
}
@{
    var typedMultiMediaPicker = Model.Medias;
    foreach (var entry in typedMultiMediaPicker)
    {
        <img src="@entry.MediaUrl()" style="width:200px" />
    }
}
@using Umbraco.Cms.Core.Models
@{
    var typedMediaPickerSingle = Model.Value<MediaWithCrops>("media");
    if (typedMediaPickerSingle != null)
    {
        <img src="@typedMediaPickerSingle.MediaUrl()" style="width:200px" alt="@typedMediaPickerSingle.Value("alt")" />
    }
}
@using Umbraco.Cms.Core.Models
@{
    var typedMediaPickerSingle = Model.Media;
    if (typedMediaPickerSingle is MediaWithCrops mediaEntry)
    {
        <img src="@mediaEntry.MediaUrl()" style="width:200px"/>
    }
}
@{
    foreach (var entry in Model.Medias)
    {
        <img src="@entry.GetCropUrl("cropAlias")"/>
    }
}
@{
    foreach (var entry in Model.Medias)
    {
        <img src="@Url.GetCropUrl(entry, "cropAlias")"/>
    }
}
@using Umbraco.Cms.Core;
@using Umbraco.Cms.Core.Services;
@inject IContentService Services;
@{
    // Get access to ContentService
    var contentService = Services;

    // Create a variable for the GUID of the page you want to update
    var guid = Guid.Parse("32e60db4-1283-4caa-9645-f2153f9888ef");

    // Get the page using the GUID you've defined
    var content = contentService.GetById(guid); // ID of your page

    // Get the media you want to assign to the media picker 
    var media = Umbraco.Media("bca8d5fa-de0a-4f2b-9520-02118d8329a8");

    // Create an Udi of the media
    var udi = Udi.Create(Constants.UdiEntityType.Media, media.Key);

    // Set the value of the property with alias 'featuredBanner'. 
    content.SetValue("featuredBanner", udi.ToString());

    // Save the change
    contentService.Save(content);
}
@{
    // Get the page using it's id
    var content = contentService.GetById(1234); 
}
@using Umbraco.Cms.Core.PublishedCache;
@inject IPublishedSnapshotAccessor _publishedSnapshotAccessor;
@{
    // Set the value of the property with alias 'featuredBanner'
    content.SetValue(Home.GetModelPropertyType(_publishedSnapshotAccessor, x => x.FeaturedBanner).Alias, udi.ToString());
}
@using System.IO;
@{
    if (Model.HasValue("myFile"))
    {
        var myFile = Model.Value<string>("myFile");

        <a href="@myFile">@System.IO.Path.GetFileName(myFile)</a>
    }

}
@if (!Model.HasValue(Model.MyFile))
{
   <a href="@Model.MyFile">@System.IO.Path.GetFileName(Model.MyFile)</a>
}
@using Umbraco.Cms.Core.IO
@using Umbraco.Cms.Core.Serialization
@using Umbraco.Cms.Core.Strings
@inject MediaFileManager _mediaFileManager;
@inject IShortStringHelper _shortStringHelper;
@inject IContentTypeBaseServiceProvider _contentTypeBaseServiceProvider;
@inject IContentService Services;
@inject IJsonSerializer _serializer;
@inject MediaUrlGeneratorCollection _mediaUrlGeneratorCollection;

@{
   // Get access to ContentService
    var contentService = Services;

    // Get access to MediaService 
    var mediaService = MediaService;

    // Create a variable for the GUID of the parent where you want to add a child item
    var guid = Guid.Parse("32e60db4-1283-4caa-9645-f2153f9888ef");

    // Get the page using the GUID you've defined
    var content = contentService.GetById(guid); // ID of your page

    // Create a variable for the file you want to upload, in this case the Our Umbraco logo
    var imageUrl = "https://our.umbraco.com/assets/images/logo.svg";

    // Create a request to get the file
    var request = WebRequest.Create(imageUrl);
    var webResponse = request.GetResponse();
    var responseStream = webResponse.GetResponseStream();

    // Get the file name 
    var lastIndex = imageUrl.LastIndexOf("/", StringComparison.Ordinal) + 1;
    var filename = imageUrl.Substring(lastIndex, imageUrl.Length - lastIndex);

    // Create a media file
    var media = mediaService.CreateMediaWithIdentity("myImage", -1, "File");
    media.SetValue(_mediaFileManager, _mediaUrlGeneratorCollection, _shortStringHelper, _contentTypeBaseServiceProvider, Constants.Conventions.Media.File, filename, responseStream);
    // Save the created media 
    mediaService.Save(media);

    // Get the published version of the media (IPublishedContent)
    var publishedMedia = Umbraco.Media(media.Id);

    // Set the value of the property with alias 'myFile' 
    content.SetValue("myFile", publishedMedia.Url());

    // Save the child item
    contentService.Save(content);
}
@{
    // Get the page using it's id
    var content = contentService.GetById(1234); 
}
@inject IPublishedSnapshotAccessor _publishedSnapshotAccessor;
@{
    // Set the value of the property with alias 'myFile'
    content.SetValue(Home.GetModelPropertyType(_publishedSnapshotAccessor, x => x.MyFile).Alias, publishedMedia.Url();
}
@if (Model.HasValue("memberGroup"))
{
    var memberGroup = Model.Value<string>("memberGroup"); 
    <p>@memberGroup</p>
}
@if (!string.IsNullOrEmpty(Model.MemberGroup))
{
    <p>@Model.MemberGroup</p>
}
@using Umbraco.Cms.Core.Services;

@inject IContentService Services;
@{
    // Get access to ContentService
    var contentService = Services;

    // Create a variable for the GUID of the page you want to update
    var guid = new Guid("796a8d5c-b7bb-46d9-bc57-ab834d0d1248");
    
    // Get the page using the GUID you've defined
    var content = contentService.GetById(guid); // ID of your page

    // Set the value of the property with alias 'memberGroup'. The value is the specific ID of the member group
    content.SetValue("memberGroup", 1067);
            
    // Save the change
    contentService.Save(content);
}
@{
    // Set the value of the property with alias 'memberGroup'. 
    content.SetValue("memberGroup", "1067","1068");
}
@{
    // Get the page using it's id
    var content = contentService.GetById(1234); 
}
@using Umbraco.Cms.Core.PublishedCache;
@using Umbraco.Cms.Core;

@inject IPublishedSnapshotAccessor _publishedSnapshotAccessor;
@{
    // Set the value of the property with alias 'memberGroup'
    content.SetValue(Home.GetModelPropertyType(_publishedSnapshotAccessor, x => x.MemberGroup).Alias, 1067);
}
@if (Model.HasValue("email"))
{
    var emailAddress = Model.Value<string>("email");
    <p>@emailAddress</p>
}
@if (!string.IsNullOrWhiteSpace(Model.Email))
{
    <p>@Model.Email</p>
}
@using Umbraco.Cms.Core.Services;

@inject IContentService Services;
@{
    // Get access to ContentService
    var contentService = Services;

    // Create a variable for the GUID of your page
    var guid = new Guid("796a8d5c-b7bb-46d9-bc57-ab834d0d1248");

    // Get the page using the GUID you've just defined
    var content = contentService.GetById(guid);
    // Set the value of the property with alias 'email'
    content.SetValue("email", "jpk@umbraco.dk");

    // Save the change
    contentService.Save(content);
}
<img src="@Url.GetCropUrl(Model.Photo,"square", true)" />
<img src="@Url.GetCropUrl(Model.SecondaryPhoto, "customCropper", "banner")" />
<img src="@Model.SecondaryPhoto.GetCropUrl("customCropper", "banner")" />
@if (Model.Photo is not null)
{
    <img src="@Url.GetCropUrl(Model.Photo, height: 300, width: 400)" alt="@Model.Photo.Name" />
}
@if (Model.Photo is not null)
{
    var cropUrl = Url.GetCropUrl(Model.Photo, "square", false);
    <style>
        .myCssClass {
            background-image: url("@cropUrl");
            height: 400px;
            width: 400px;
        }
    </style>
    <div class="product-image-container myCssClass"></div>
}
using Microsoft.AspNetCore.Mvc;
using Umbraco.Cms.Core.Models;
using Umbraco.Cms.Core.PropertyEditors;
using Umbraco.Cms.Core.PropertyEditors.ValueConverters;
using Umbraco.Cms.Core.Serialization;
using Umbraco.Cms.Core.Services;

namespace Umbraco.Docs.Samples.Web.Property_Editors_Add_Values;

[ApiController]
[Route("/umbraco/api/createimagecroppervalues")]
public class CreateImageCropperValuesController : Controller
{
    private readonly IContentService _contentService;
    private readonly IMediaService _mediaService;
    private readonly MediaUrlGeneratorCollection _mediaUrlGeneratorCollection;
    private readonly IJsonSerializer serializer;

    public CreateImageCropperValuesController(
        IContentService contentService,
        IMediaService mediaService,
        MediaUrlGeneratorCollection mediaUrlGeneratorCollection, IJsonSerializer serializer)
    {
        _contentService = contentService;
        _mediaService = mediaService;
        _mediaUrlGeneratorCollection = mediaUrlGeneratorCollection;
        this.serializer = serializer;
    }

    // /Umbraco/Api/CreateImageCropperValues/CreateImageCropperValues
    [HttpPost("createimagecroppervalues")]
    public ActionResult<bool> CreateImageCropperValues()
    {
        // Create a variable for the GUID of the page you want to update
        var contentKey = Guid.Parse("89974f8b-e213-4c32-9f7a-40522d87aa2f");

        // Get the page using the GUID you've defined
        IContent? content = _contentService.GetById(contentKey);
        if (content == null)
        {
            return false;
        }

        // Create a variable for the GUID of the media item you want to use
        var mediaKey = Guid.Parse("b6d4e98a-07c0-45f9-bfcc-52994f2806b6");

        // Get the desired media file
        IMedia? media = _mediaService.GetById(mediaKey);
        if (media == null)
        {
            return false;
        }

        // Create a variable for the image cropper and set the source
        var imageCropperValue = new ImageCropperValue
        {
            Src = media.GetUrl("umbracoFile", _mediaUrlGeneratorCollection)
        };

        // Serialize the image cropper value
        var propertyValue = serializer.Serialize(imageCropperValue);

        // Set the value of the property with alias "cropper"
        // - remember to add the "culture" parameter if "cropper" is set to vary by culture
        content.SetValue("cropper", propertyValue);

        return _contentService.Save(content).Success;
    }
}
// Set the value of the "Cropper" property on content of type MyContentType
// - remember to add the "culture" parameter if "cropper" is set to vary by culture
content.SetValue(nameof(MyContentType.Cropper).ToFirstLowerInvariant(), propertyValue);
public Dictionary<string, string> GetCropUrls(IPublishedContent image)
{
    // Get the Image Cropper property value for property with alias "umbracoFile"
    ImageCropperValue? imageCropperValue = image.Value<ImageCropperValue>("umbracoFile");
    if (imageCropperValue?.Crops == null)
    {
        return new Dictionary<string, string>();
    }

    // Return all crop aliases and their corresponding crop URLs as a dictionary
    var cropUrls = new Dictionary<string, string>();
    foreach (ImageCropperValue.ImageCropperCrop crop in imageCropperValue.Crops)
    {
        // Get the cropped URL and add it to the dictionary that I will return
        var cropUrl = crop.Alias != null
            ? image.GetCropUrl(crop.Alias)
            : null;
        if (cropUrl != null)
        {
            cropUrls.Add(crop.Alias!, cropUrl);
        }
    }

    return cropUrls;
}
<img src="@Url.GetCropUrl(Model.Photo, 500, 300, furtherOptions: "&format=png")" />

toggle bold text

Ctrl + B

toggle italic text

Ctrl + I

insert link

Ctrl + L

This opens the Select Link interface.

toggle quote

Ctrl + Q

toggle code block

Ctrl + K

insert image

Ctrl + G

This opens the Select Media interface.

toggle ordered list

Ctrl + O

toggle unordered list

Ctrl + U

toggle heading

Ctrl + H

This toggles between h1, h2 and off.

toggle a hr

undo

Ctrl + Z

redo

Ctrl + Y

select all

Ctrl + A

copy

Ctrl + C

paste

Ctrl + V

@Model.MyMarkdownEditor
@Model.Value("MyMarkdownEditor")
@using Umbraco.Cms.Core.Services;
@inject IContentService Services;
@{
    // Get access to ContentService
    var contentService = Services;

    // Create a variable for the GUID of the page you want to update
    var guid = Guid.Parse("32e60db4-1283-4caa-9645-f2153f9888ef");

    // Get the page using the GUID you've defined
    var content = contentService.GetById(guid); // ID of your page

    // Create markdown value
    var markdownValue = new HtmlString("#heading  \n**strong text**");
    
    // Set the value of the property with alias 'myMarkdownEditor'. 
    content.SetValue("myMarkdownEditor", markdownValue);

    // Save the change
    contentService.Save(content);
}
@{
    // Get the page using it's id
    var content = contentService.GetById(1234); 
}
@using Umbraco.Cms.Core.PublishedCache;
@inject IPublishedSnapshotAccessor _publishedSnapshotAccessor;
@{
    // Set the value of the property with alias 'myMarkdownEditor'
    content.SetValue(Home.GetModelPropertyType(_publishedSnapshotAccessor, x => x.MyMarkdownEditor).Alias, markdownValue);
}
@{
    if (Model.HasValue("author"))
    {
        var member = Model.Value<IPublishedContent>("author");
        @member.Name
    }
}
@{
    if (Model.Author != null)
    {
        var member = Model.Author;
        @member.Name
    }
}
@using Umbraco.Cms.Core.Services;

@inject IContentService Services;
@{
    // Get access to ContentService
    var contentService = Services;

    // Create a variable for the GUID of the page you want to update
    var guid = Guid.Parse("32e60db4-1283-4caa-9645-f2153f9888ef");

    // Get the page using the GUID you've defined
    var content = contentService.GetById(guid); // ID of your page

    // Create a variable for the GUID of the member ID
    var authorId = Guid.Parse("ed944097281e4492bcdf783355219450");

    // Set the value of the property with alias 'author'. 
    content.SetValue("author", authorId);

    // Save the change
    contentService.Save(content);
}
@{
    // Get the page using it's id
    var content = contentService.GetById(1234); 
}
@using Umbraco.Cms.Core.PublishedCache;
@using Umbraco.Cms.Core;

@inject IPublishedSnapshotAccessor _publishedSnapshotAccessor;
@{
    var udi = Udi.Create(Constants.UdiEntityType.Member, authorId);
    
    // Set the value of the property with alias 'author'
    content.SetValue(Home.GetModelPropertyType(_publishedSnapshotAccessor, x => x.Author).Alias, udi);
}
@using Umbraco.Cms.Core.Models
@{
    var links = Model.Value<IEnumerable<Link>>("footerLinks");
    if (links.Any())
    {
        <ul>
            @foreach (var link in links)
            {
                <li><a href="@link.Url" target="@link.Target">@link.Name</a></li>
            }
        </ul>
    }
}
@using Umbraco.Cms.Core.Models
@{
    var link = Model.Value<Link>("link");
    if (link != null)
    {
        <a href="@link.Url" target="@link.Target">@link.Name</a>
    }
}
@using Umbraco.Cms.Core;
@using Umbraco.Cms.Core.Serialization
@using Umbraco.Cms.Core.Services;
@using Umbraco.Cms.Core.Models;
@inject IContentService Services;
@inject IJsonSerializer Serializer;
@{
    // Get access to ContentService
    var contentService = Services;

    // Create a variable for the GUID of the page you want to update
    var guid = Guid.Parse("32e60db4-1283-4caa-9645-f2153f9888ef");

    // Get the page using the GUID you've defined
    var content = contentService.GetById(guid); // ID of your page

    // Get the media you want to assign to the footer links property 
    var media = Umbraco.Media("bca8d5fa-de0a-4f2b-9520-02118d8329a8");

    // Create an Udi of the media
    var mediaUdi = Udi.Create(Constants.UdiEntityType.Media, media.Key);

    // Get the content you want to assign to the footer links property 
    var contentPage = Umbraco.Content("665d7368-e43e-4a83-b1d4-43853860dc45");

    // Create an Udi of the Content
    var contentPageUdi = Udi.Create(Constants.UdiEntityType.Document, contentPage.Key);

    // Create a list with different link types
    var externalLinks = new List<Link>
    {
        // External Link
        new Link
        {
            Target = "_blank",
            Name = "Our Umbraco",
            Url = "https://our.umbraco.com/",
            Type = LinkType.External
        },
        // Media 
        new Link
        {
            Target = "_self",
            Name = media.Name,
            Url = media.MediaUrl(),
            Type = LinkType.Media,
            Udi = mediaUdi
        }, 
        // Content 
        new Link
        {
            Target = "_self",
            Name = contentPage.Name,
            Url = contentPage.Url(),
            Type = LinkType.Content,
            Udi = contentPageUdi
        }
    };

    // Serialize the list with links to JSON
    var links = Serializer.Serialize(externalLinks);


    // Set the value of the property with alias 'footerLinks'. 
    content.SetValue("footerLinks", links);

    // Save the change
    contentService.Save(content);
}
@{
    // Get the page using it's id
    var content = contentService.GetById(1234); 
}
@using Umbraco.Cms.Core.PublishedCache;
@inject IPublishedSnapshotAccessor _publishedSnapshotAccessor;
@{
    // Set the value of the property with alias 'footerLinks'
    content.SetValue(Home.GetModelPropertyType(_publishedSnapshotAccessor, x => x.FooterLinks).Alias, links);
}
@{
    int students = Model.HasValue("students") ? Model.Value<int>("students") : 0;
    int teachers = Model.HasValue("teachers") ? Model.Value<int>("teachers") : 0;
    int totalTravellers = students + teachers;

    <p>@totalTravellers</p>
}
@{
    if(Model.HasValue("students")){
        <p>@(Model.Value<string>("students"))</p>
    }
}
@{
    int students = Model.Students;
    int teachers = Model.Teachers;
    int totalTravellers = students + teachers;

    <p>@totalTravellers</p>
}
@using Umbraco.Cms.Core.Services;
@inject IContentService Services;
@{
    // Get access to ContentService
    var contentService = Services;

    // Create a variable for the GUID of the page you want to update
    var guid = new Guid("32e60db4-1283-4caa-9645-f2153f9888ef");

    // Get the page using the GUID you've defined
    var content = contentService.GetById(guid); // ID of your page

    // Set the value of the property with alias 'students'
    content.SetValue("students", 20);
    
    // Save the change
    contentService.Save(content);

}
@{
    // Get the page using it's id
    var content = contentService.GetById(1234); 
}
@using Umbraco.Cms.Core.PublishedCache;
@inject IPublishedSnapshotAccessor _publishedSnapshotAccessor;
@{
    // Set the value of the property with alias 'students'
    content.SetValue(Home.GetModelPropertyType(_publishedSnapshotAccessor, x => x.Students).Alias, 20);
}
Content Service
Read about the Image Cropper here
Content Service
Media Picker
Media Picker
Content Service
Media Service
Content Service
Content Service
name@domain.com
Media Picker Property Editor
ImageSharp.Web
the official ImageSharp documentation
Content Service
format
Content Service
Content Service
Content Service
Content Service

Toggle

Schema Alias: Umbraco.TrueFalse

UI Alias: Umb.PropertyEditorUi.Toggle

Returns: Boolean

Toggle is a standard checkbox which saves either 0 or 1, depending on the checkbox being checked or not.

Data Type Definition Example

The Toggle property has a setting which allows you to set the default value of the checkbox, either checked (true) or unchecked (false).

It is also possible to define a label, that will be displayed next to the checkbox on the content.

Content Example

MVC View Example

Without Modelsbuilder

@{
    if (!Model.Value<bool>("myCheckBox"))
    {
        <p>The Checkbox is not checked!</p>
    }
}

With Modelsbuilder

@{
    if (!Model.MyCheckbox)
    {
        <p>The Checkbox is not checked!</p>
    }
}

Add values programmatically

The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.

@using Umbraco.Cms.Core.Services;
@inject IContentService Services;
@{
    // Get access to ContentService
    var contentService = Services;

    // Create a variable for the GUID of the page you want to update
    var guid = new Guid("796a8d5c-b7bb-46d9-bc57-ab834d0d1248");
    
    // Get the page using the GUID you've defined
    var content = contentService.GetById(guid); // ID of your page

    // Set the value of the property with alias 'myCheckBox'
    content.SetValue("myCheckBox", true);
            
    // Save the change
    contentService.Save(content);
}

Although the use of a GUID is preferable, you can also use the numeric ID to get the page:

@{
    // Get the page using it's id
    var content = contentService.GetById(1234); 
}

If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string:

@using Umbraco.Cms.Core.PublishedCache;
@inject IPublishedSnapshotAccessor _publishedSnapshotAccessor;
@{
    // Set the value of the property with alias 'myCheckBox'
    content.SetValue(Home.GetModelPropertyType(_publishedSnapshotAccessor,x => x.MyCheckBox).Alias, true);

}

Textarea

Schema Alias: Umbraco.TextArea

UI Alias: Umb.PropertyEditorUi.TextArea

Returns: String

Textarea is an HTML textarea control for multiple lines of text. It can be configured to have a fixed character limit, as well as define how big the space for writing can be. By default, there is no character limit unless it's specifically set to a specific value like 200 for instance. If you don't specify the number of rows, 10 will be the amount of rows the textarea will be occupying, unless changed to a custom value.

Data Type Definition Example

Settings

Content Example

Without a character and rows limit

With a character limit and rows limit

MVC View Example

Without Modelsbuilder

@{
    if (Model.HasValue("description")){
        <p>@(Model.Value<string>("description"))</p>
    }
}

With Modelsbuilder

@if (!Model.HasValue(Model.Description))
{
   <p>@Model.Description</p>
}

Add value programmatically

The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.

@using Umbraco.Cms.Core.Services;
@inject IContentService Services;

@{
    // Get access to ContentService
    var contentService = Services;

    // Create a variable for the GUID of your page
    var guid = new Guid("796a8d5c-b7bb-46d9-bc57-ab834d0d1248");

    // Get the page using the GUID you've just defined
    var content = contentService.GetById(guid);
    // Set the value of the property with alias 'description'
    content.SetValue("description", "This is some text for the text area!");

    // Save the change
    contentService.Save(content);
}

Although the use of a GUID is preferable, you can also use the numeric ID to get the page:

@{
    // Get the page using it's id
    var content = contentService.GetById(1234); 
}

If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string:

@using Umbraco.Cms.Core.PublishedCache;
@inject IPublishedSnapshotAccessor _publishedSnapshotAccessor;
@{

    // Set the value of the property with alias 'description'
    content.SetValue(Home.GetModelPropertyType(_publishedSnapshotAccessor, x => x.Description).Alias, "This is some text for the text area!");
}

Slider

Schema Alias: Umbraco.Slider

UI Alias: Umb.PropertyEditorUi.Slider

Returns: decimal or Umbraco.Core.Models.Range<decimal>

Pretty much like the name indicates this Data type enables editors to choose a value with a range using a slider.

There are two flavors of the slider. One with a single value picker. One with a minimum and maximum value.

Data Type Definition Example

Content Example

MVC View Example

Without Modelsbuilder

@if (Model.HasValue("singleValueSlider"))
{
    var value = Model.Value<decimal>("singleValueSlider");
    <p>@value</p>
}

@if (Model.HasValue("multiValueSlider"))
{
    var value = Model.Value<Umbraco.Cms.Core.Models.Range<decimal>>("multiValueSlider");
    <p>@(value.Minimum) and @(value.Maximum)</p>
}

With Modelsbuilder

// with a range off
@if (Model.SingleValueSlider != null)
{
    var value = Model.SingleValueSlider;
    <p>@value</p>
}

// with a range on
@if (Model.MultiValueSlider != null)
{
    var minValue = Model.MultiValueSlider.Minimum;
    var maxValue = Model.MultiValueSlider.Maximum;
    <p>@minValue and @maxValue</p>
}

Add values programmatically

The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.

With a range off

@using Umbraco.Cms.Core.Services;
@inject IContentService Services;
@{
    // Get access to ContentService
    var contentService = Services;

    // Create a variable for the GUID of the page you want to update
    var guid = Guid.Parse("32e60db4-1283-4caa-9645-f2153f9888ef");

    // Get the page using the GUID you've defined
    var content = contentService.GetById(guid); // ID of your page

    // Set the value of the property with alias 'singleValueSlider'. 
    content.SetValue("singleValueSlider", 10);

    // Save the change
    contentService.Save(content);
}

With a range on

@using Umbraco.Cms.Core.Services;
@inject IContentService Services;
@{
    // Get access to ContentService
    var contentService = Services;

    // Create a variable for the GUID of the page you want to update
    var guid = Guid.Parse("32e60db4-1283-4caa-9645-f2153f9888ef");

    // Get the page using the GUID you've defined
    var content = contentService.GetById(guid); // ID of your page

    // Create a variable for the desired value of the 'multiValueSlider' property
    var range = new Range<decimal> {Minimum = 10, Maximum = 12};

    // Set the value of the property with alias 'multiValueSlider'. 
    content.SetValue("multiValueSlider", range);

    // Save the change
    contentService.Save(content);
}

Although the use of a GUID is preferable, you can also use the numeric ID to get the page:

@{
    // Get the page using it's id
    var content = contentService.GetById(1234); 
}

If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string:

@using Umbraco.Cms.Core.PublishedCache;
@inject IPublishedSnapshotAccessor _publishedSnapshotAccessor;
@{
    // Set the value of the property with alias 'singleValueSlider'
    content.SetValue(Home.GetModelPropertyType(_publishedSnapshotAccessor, x => x.SingleValueSlider).Alias, 10);

    // Set the value of the property with alias 'multiValueSlider'
    content.SetValue(Home.GetModelPropertyType(_publishedSnapshotAccessor, x => x.MultiValueSlider).Alias, new Range<decimal> {Minimum = 10, Maximum = 12});
}

Textbox

How to use the TextBox property editors in Umbraco CMS.

Schema Alias: Umbraco.TextBox

UI Alias: Umb.PropertyEditorUi.TextBox

Returns: String

Textbox is an HTML input control for text. It can be configured to have a fixed character limit. The default maximum amount of characters is 512 unless it's specifically changed to a lower amount.

Data Type Definition Example

Content Example

Without a character limit

With a character limit

MVC View Example

Without Modelsbuilder

@{
    // Perform an null-check on the field with alias 'pageTitle'
    if (Model.HasValue("pageTitle")){
        // Print the value of the field with alias 'pageTitle'
        <p>@(Model.Value("pageTitle"))</p>
    }
}

With Modelsbuilder

@{
    // Perform an null-check on the field with alias 'pageTitle'
    @if (!Model.HasValue(Model.PageTitle))
    {
        // Print the value of the field with alias 'pageTitle'
        <p>@Model.PageTitle</p>
    }
}

Add values programmatically

The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.

@using Umbraco.Cms.Core.Services;
@inject IContentService Services;
@{
    // Get access to ContentService
    var contentService = Services;

    // Create a variable for the GUID of the page you want to update
    var guid = new Guid("32e60db4-1283-4caa-9645-f2153f9888ef");

    // Get the page using the GUID you've defined
    var content = contentService.GetById(guid); // ID of your page

    // Set the value of the property with alias 'pageTitle'
    content.SetValue("pageTitle", "Umbraco Demo");

    // Save the change
    contentService.Save(content);
}

Although the use of a GUID is preferable, you can also use the numeric ID to get the page:

@{
    // Get the page using it's id
    var content = contentService.GetById(1234); 
}

If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string:

@using Umbraco.Cms.Core.PublishedCache;
@inject IPublishedSnapshotAccessor _publishedSnapshotAccessor;
@{

    // Set the value of the property with alias 'pageTitle'
    content.SetValue(Home.GetModelPropertyType(_publishedSnapshotAccessor, x => x.PageTitle).Alias, "Umbraco Demo");
}

User Picker

Schema Alias: Umbraco.UserPicker

UI Alias: Umb.PropertyEditorUi.UserPicker

Returns: IPublishedContent

The user picker opens a panel to pick a specific user from the Users section. The value saved is of type IPublishedContent.

Data Type Definition Example

Content Example

MVC View Example

Getting the Value of the property will return the user ID - properties of the User can be accessed by referencing UserService.

Without Modelsbuilder

@using Umbraco.Cms.Core.Services;
@inject IUserService UserService;
@{
    
    if (Model.Value("userPicker") != null)
    {
        var us = UserService;
        var username = us.GetUserById(Model.Value<int>("userPicker")).Name;

        <p>This is the chosen person: @username</p>
        <p>This returns the id value of chosen person: @Model.Value("userPicker")</p>
    }
}

With Modelsbuilder

@using Umbraco.Cms.Core.Services;
@inject IUserService UserService;
@{
    if (Model.UserPicker != null)
    {

        var us = UserService;
        var user = us.GetUserById((int)Model.UserPicker);

        <p>This is the chosen person: @user.Name</p>
        <p>This returns the id value of chosen person: @user.Id)</p>
    }
}

Add values programmatically

The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.

@inject IContentService Services;
@{
    // Get access to ContentService
    var contentService = Services;

    // Create a variable for the GUID of the page you want to update
    var guid = new Guid("796a8d5c-b7bb-46d9-bc57-ab834d0d1248");
    
    // Get the page using the GUID you've defined
    var content = contentService.GetById(guid); // ID of your page

    // Set the value of the property with alias 'userPicker'. The value is the specific ID of the user
    content.SetValue("userPicker", -1);
            
    // Save the change
    contentService.Save(content);
}

Although the use of a GUID is preferable, you can also use the numeric ID to get the page:

@{
    // Get the page using it's id
    var content = contentService.GetById(1234); 
}

If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string:

@inject IPublishedSnapshotAccessor _publishedSnapshotAccessor;
@{
    // Set the value of the property with alias 'userPicker'
    content.SetValue(Home.GetModelPropertyType(_publishedSnapshotAccessor, x => x.UserPicker).Alias, "Umbraco Demo");
}

Block Level Variance

An intro to achieving content variance at block level.

In a variant context, a Block Editor behaves like any other Umbraco property editor by default. The Blocks contained within the editor "belong" to the Document variant, and there is no connection between Blocks across variants.

In other words, both Block content and structure can vary between each Document variant.

This is the desired behavior for many cases. However, in some cases it is preferable to have a shared Block structure across all variants, where only the Block content varies.

This is known as Block Level Variance:

Block Level Variance is achieved when:

  • The Block Editor property is not configured for variance, and

The "unexposed" Block state

When adding a new variant Block to one Document variant, it is automatically added to all variants of the Document.

The Block will start out in an "unexposed" state for all other Document variants than the one where it was added. It will remain like that for each variant until it is edited in that variant.

"Unexposed" Blocks are omitted from the published Document output. So, you do not need to worry about defensive coding to avoid rendering these Blocks.

Invariance vs. Block Level Variance

It is entirely possible to mix and match variance and invariance within the scope of Block Level Variance. Invariance is fully supported, both at Block level and at Block property level.

Invariance within Block Level Variance follows the same rules as invariance at Document level:

  • Invariant content is added to and updated across all Document variants.

  • Invariant content is explicitly published for all published Document variants when one or more variants are published.

Examples

Consider a Document with English and Danish language variants, which is published in both languages.

  • An editor opens the English variant.

  • They add an invariant Block, and

  • They re-publish the English variant.

Result: The new block will appear in both the English and Danish published content.

  • An editor opens the Danish variant.

  • They update an invariant property value in a variant Block, and

  • They re-publish the Danish variant.

Result: The updated property value appears in both the English and Danish published content.

Structure vs. Block Level Variance

The Block Editor structure is invariant for Block Level Variance. This means that the structure follows the same rules for invariance as outlined in the section above.

In other words: If an editor changes the order of the Blocks in one Document variant, it changes for all Document variants. The change is applied to all published Document variants, as soon as one or more variants are published.

Block Editors

The Block Editors are property editors that enabled you to build advanced editor tools using a set of predefined Document Types.

This article is a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice.

Umbraco CMS currently ships with two Block Editors: the Block List and the Block Grid.

Customizing Block Editors

Learn how to create custom views for the blocks used in your Block Grid or Block List property editors.

Block List

Schema Alias: Umbraco.BlockList

UI Alias: Umb.PropertyEditorUi.BlockList

Returns: IEnumerable<BlockListItem>

This article is a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice.

The Block List replaces the obsolete Nested Content editor.

Configure Block List

The Block List property editor is configured in the same way as any standard property editor, via the Data Types admin interface.

To set up your Block List Editor property, create a new Data Type and select Block List from the list of available property editors.

Then you will see the configuration options for a Block List as shown below.

The Data Type editor allows you to configure the following properties:

  • Available Blocks - Here you will define the Block Types to be available for use in the property. Read more on how to set up Block Types below.

  • Amount - Sets the minimum and/or maximum number of blocks that should be allowed in the list.

  • Single block mode - When in Single block mode, the output will be BlockListItem<> instead of BlockListModel

  • Live editing mode - Enabling this will make editing of a block happening directly to the document model, making changes appear as you type.

  • Inline editing mode - Enabling this will change editing experience to inline, meaning that editing the data of blocks happens at sight as accordions.

  • Property editor width - Overwrite the width of the property editor. This field takes any valid css value for "max-width".

Setup Block Types

Block Types are Element Types which need to be created before you can start configuring them as Block Types. This can be done either directly from the property editor setup process, or you can set them up beforehand and add them to the block list after.

Once you have added an element type as a Block Type on your Block List Data Type you will have the option to configure it further.

Each Block has a set of properties that are optional to configure. They are described below.

Editor Appearance

By configuring the properties in the group you can customize the user experience for your content editors when they work with the blocks in the Content section.

  • Overlay editor size - Set the size for the Content editor overlay for editing this block.

Data Models

It is possible to use two separate Element Types for your Block Types. Its required to have one for Content and optional to add one for Settings.

  • Content model - This presents the Element Type used as model for the content section of this Block. This cannot be changed, but you can open the Element Type to perform edits or view the properties available. Useful when writing your Label.

  • Settings model - Add a Settings section to your Block based on a given Element Type. When picked you can open the Element Type or choose to remove the settings section again.

Catalogue appearance

These properties refer to how the Block is presented in the Block catalogue, when editors choose which Blocks to use for their content.

  • Background color - Define a background color to be displayed beneath the icon or thumbnail. Eg. #424242.

  • Icon color - Change the color of the Element Type icon. Eg. #242424.

  • Thumbnail - Pick an image or SVG file to replace the icon of this Block in the catalogue.

The thumbnails for the catalogue are presented in the format of 16:10, and we recommend a resolution of 400px width and 250px height.

Advanced

These properties are relevant when you work with custom views.

  • Force hide content editor - If you made a custom view that enables you to edit the content part of a block and you are using default editing mode (not inline) you might want to hide the content-editor from the block editor overlay.

Editing Blocks

When viewing a Block List editor in the Content section for the first time, you will be presented with the option to Add content.

Clicking the Add content button brings up the Block Catalogue.

The Block Catalogue looks different depending on the amount of available Blocks and their catalogue appearance.

Click the Block Type you wish to create and a new Block will appear in the list.

Depending on whether your Block List Editor is setup to use default or inline editing mode you will see one of the following things happening:

In default mode you will enter the editing overlay of that Block:

In inline editing mode the new Blocks will expand to show its inline editor:

More Blocks can be added to the list by clicking the Add content button or using the inline Add content button that appears on hover between or above existing Blocks.

To reorder the Blocks, click and drag a Block up or down to place in the desired order.

To delete a Block click the trash-bin icon appearing on hover.

Rendering Block List Content

Rendering the stored value of your Block List property can be done in two ways.

1. Default rendering

You can choose to use the built-in rendering mechanism for rendering blocks via a Partial View for each block.

The default rendering method is named GetBlockListHtml() and comes with a few options to go with it. The typical use could be:

@Html.GetBlockListHtml(Model, "MyBlocks")

"MyBlocks" above is the alias for the Block List editor.

If using ModelsBuilder the example can be simplified:

Example:

@Html.GetBlockListHtml(Model.MyBlocks)

To make this work you will need to create a Partial View for each block, named by the alias of the Element Type that is being used as Content Model.

These partial views must be placed in this folder: Views/Partials/BlockList/Components/. Example: Views/Partials/BlockList/Components/MyElementTypeAliasOfContent.cshtml.

A Partial View will receive the model of Umbraco.Core.Models.Blocks.BlockListItem. This gives you the option to access properties of the Content and Settings section of your Block.

In the following example of a Partial view for a Block Type, please note that the MyElementTypeAliasOfContentand MyElementTypeAliasOfSettings should correspond with the selected Element Type Alias for the given model in your case.

Example:

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockListItem>;
@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;
@{
    var content = (ContentModels.MyElementTypeAliasOfContent)Model.Content;
    var settings = (ContentModels.MyElementTypeAliasOfSettings)Model.Settings;
}

// Output the value of field with alias 'heading' from the Element Type selected as Content section
<h1>@content.Value("heading")</h1>

With ModelsBuilder:

// Output the value of field with alias 'heading' from the Element Type selected as Content section
<h1>@content.Heading</h1>

2. Build your own rendering

A built-in value converter is available to use the data as you like. Call the Value<T> method with a generic type of IEnumerable<BlockListItem> and the stored value will be returned as a list of BlockListItem entities.

Example:

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage;
@using Umbraco.Cms.Core.Models.Blocks;
@{
    var blocks = Model.Value<IEnumerable<BlockListItem>>("myBlocksProperty");
    foreach (var block in blocks)
    {
        var content = block.Content;

        @Html.Partial("MyFolderOfBlocks/" + content.ContentType.Alias, block)
    }
}

Each item is a BlockListItem entity that contains two main properties Content and Settings. Each of these is a IPublishedElement which means you can use all the value converters you are used to using.

Example:

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage;
@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;
@using Umbraco.Cms.Core.Models.Blocks;
@{
    var blocks = Model.Value<IEnumerable<BlockListItem>>("myBlocksProperty");
    foreach (var block in blocks)
    {
        var content = (ContentModels.MyAliasOfContentElementType)block.Content;
        var settings = (ContentModels.MyAliasOfSettingsElementType)block.Settings;

        <h1>@content.MyExampleHeadlinePropertyAlias</h1>
    }
}

Extract Block List Content data

In some cases, you might want to use the Block List Editor to hold some data and not necessarily render a view since the data should be presented in different areas on a page. An example could be a product page with variants stored in a Block List Editor.

In this case, you can extract the variant's data using the following, which returns IEnumerable<IPublishedElement>.

Example:

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage;
@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;
@using Umbraco.Cms.Core.Models.Blocks;
@{
    var variants = Model.Value<IEnumerable<BlockListItem>>("variants").Select(x => x.Content);
    foreach (var variant in variants)
    {
        <h4>@variant.Value("variantName")</h4>
        <p>@variant.Value("description")</p>
    }
}

If using ModelsBuilder the example can be simplified:

Example:

@inherits Umbraco.Web.Mvc.UmbracoViewPage
@using ContentModels = Umbraco.Web.PublishedModels;
@{
    var variants = Model.Variants.Select(x => x.Content).OfType<ProductVariant>();
    foreach (var variant in variants)
    {
        <h4>@variant.VariantName</h4>
        <p>@variant.Description</h4>
    }
}

If you know the Block List Editor only uses a single block, you can cast the collection to a specific type T using .OfType<T>() otherwise the return value will be IEnumerable<IPublishedElement>.

Build a Custom Backoffice View

Block Grid

Schema Alias: Umbraco.BlockGrid

UI Alias: Umb.PropertyEditorUi.BlockGrid

Returns: BlockGridModel

The Block Grid property editor enables editors to layout their content in the Umbraco backoffice. The content is made of Blocks that can contain different types of data.

This article is a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice.

Sample configuration

When testing out the property editor, you can use a set of predefined Blocks. The option will only be possible when there are no other Data Types using the Block Grid property editor.

  • Create a new Data Type.

  • Select the Block Grid as the Property editor.

  • Install the "Sample Configuration".

4 Blocks will be added to the property, ready for testing.

Configuring the Block Grid

The Block Grid property editor is configured via the Data Types backoffice interface.

To set up the Block Grid property editor, follow these steps:

  1. Navigate to the Settings section in the Umbraco backoffice.

  2. Click ... next to the Data Types folder.

  3. Select Create -> New Data Type.

  4. Select Block Grid from the list of available property editors.

You will see the configuration options for a Block Grid property editor as shown below:

The Data Type editor allows you to configure the following properties:

  • Amount - Sets the minimum and/or the maximum number of Blocks that should be allowed at the root of the layout.

  • Live editing mode - Enabling this option will allow you to see the changes as you are editing them.

  • Editor width - Overwrites the width of the property editor. This field takes any valid CSS value for "max-width". For example: 100% or 800px.

  • Grid Columns - Define the number of columns in your Block Grid. The default is 12 columns.

  • Layout Stylesheet - Replaces the built-in Layout Stylesheet. Additionally, you can retrieve the default layout stylesheet to use as a base for your own inspiration or for writing your own stylesheet.

  • Create Button Label - Overwrites the label on the Create button.

Setup Block Types

Once you have added an Element Type as a Block Type on your Block Grid Data Type you have the option to configure it.

Groups

Blocks can also be grouped. This is visible in the Block Catalogue and can also be used to allow a group of Blocks in an Area.

Block Configuration Settings

Each Block has a set of properties that are optional to configure. These are described below.

General

Customize the user experience for your content editors when they work with the Blocks in the Content section.

  • Label - Defines a label for the appearance of the Block in the editor. The label can use AngularJS template-string-syntax to display values of properties.

Label example: "My Block {=myPropertyAlias}" will be shown as: "My Block FooBar".

  • Content model - Presents the Element Type used as model for the Content section of this Block. This cannot be changed but you can open the Element Type to perform edits or view the properties available. Useful when writing your Label.

  • Settings model - Adds a Settings section to your Block based on a given Element Type. When selected you can open the Element Type or choose to remove the Settings section again.

Size options

Customize the Blocks size in the Grid. If you define multiple options, the Block becomes scalable.

By default, a Block takes up the available width.

A Block can be resized in two ways:

  1. A Block can have one or more Column Span options defined.

A Column Span option is used to define the width of a Block. With multiple Column Span options defined, the Content Editor can scale the Block to fit specific needs.

Additionally, Blocks can be configured to span rows, this enables one Block to be placed next to a few rows containing other Blocks.

  • Available column spans - Defines one or more columns, the Block spans across. For example: in a 12 columns grid, 6 columns is equivalent to half width. By enabling 6 columns and 12 columns, the Block can be scaled to either half width or full width.

  • Available row spans - Defines the amount of rows the Block spans across.

Catalogue appearance

These properties refer to how the Block is presented in the Block catalogue when editors choose which Blocks to use for their content.

  • Background color - Defines a background color to be displayed beneath the icon or thumbnail. Example: #424242.

  • Icon color - Changes the color of the Element Type icon. Example: #242424.

  • Thumbnail - Pick an image or Scalable Vector Graphics (SVG) file to replace the icon of the Block in the catalogue.

The thumbnails for the catalogue are presented in the format of 16:10. We recommend a resolution of 400px width and 250px height.

Permissions

  • Allow in root - Determines whether the Block can be created at the root of your layout. Turn this off if you only want a Block to appear within Block Areas.

  • Allow in areas - Determines whether the Block can be created inside Areas of other Blocks. If this is turned off it can still be allowed in Block Areas by defining specific allowed Blocks.

Areas

Blocks can nest other Blocks to support specific compositions. These compositions can be used as a layout for other Blocks.

To achieve nesting, a Block must have one or more Areas defined. Each Area can contain one or more Blocks.

Each Area has a size, defined by column and rows spans. The grid for the Areas are based on the same amount of columns as your root grid, unless you choose to change it.

To scale an Area, click and drag the scale-button in the bottom-right corner of an Area.

  • Grid Columns for Areas - Overwrites the amount of columns used for the Area grid.

  • Areas - Determines whether the Block can be created inside Areas of other Blocks.

Area configuration

  • Alias - The alias is used to identify this Area. It is being printed by GetBlockGridHTML() and used as name for the Area slot in Custom Views. The alias is also available for CSS Selectors to target the HTML-Element representing an Area.

  • Create Button Label - Overwrites the Create Button Label of the Area.

  • Number of blocks - Determines the total number of Blocks in an Area.

  • Allowed block types - When this is empty, all Blocks with Permissions for creation in Areas, will be available. This can be overwritten by specifying the allowed Blocks. Define the types of Blocks or Groups of Blocks that are allowed. Additionally, you can also set how many Blocks of each type/group should be present.

When allowing a Group of Blocks, you might want to require a specific amount for a certain Block of that Group. This can be done by adding that Block Type to the list as well and set the requirements.

Advanced

These properties are relevant when working with custom views or complex projects.

  • Custom view - Overwrites the AngularJS view for the block presentation in the Content editor. Use this view to make a more visual presentation of the Block or make your own editing experience by adding your own AngularJS controller to the view.

Notice that any styling of a Block is scoped. This means that the default backoffice styles are not present for the view of this Block.

  • Custom stylesheet - Pick your own stylesheet to be used by the Block in the Content editor.

  • Overlay editor size - Sets the size for the Content editor overlay for editing this block.

  • Hide content editor - Hides the UI for editing the content in a Block Editor. This is only relevant if you made a custom view that provides the UI for editing of content.

Editing Blocks

When viewing a Block Grid property editor in the Content section for the first time, you will be presented with the option to Add content.

Clicking the Add content button opens up the Block Catalogue.

The Block Catalogue looks different depending on the amount of available Blocks and their catalogue appearance.

Click the Block Type you wish to create and a new Block will appear in the layout.

More Blocks can be added to the layout by clicking the Add content button. Alternatively, use the Add content button that appears on hover to add new Blocks between, besides, or above the existing Blocks.

To delete a Block, click the trash icon which appears on the mouse hover.

Sorting Blocks

Blocks can be rearranged using the click and drag feature. Move them up or down to place them in the desired order.

Moving a Block from one Area to another is done in the same way. If a Block is not allowed in the given position, the area will display a red color and not allow the new position.

Scaling Blocks

If a Block has multiple size options it can be scaled via the UI. This appears in the bottom left corner of the Block.

The Block is resized using a click-and-drag feature. Moving the mouse will change the size to the size options closest to the mouse pointer.

Rendering Block Grid Content

Rendering the stored value of your Block Grid property editor can be done in two ways:

1. Default rendering

You can choose to use the built-in rendering mechanism for rendering Blocks using a Partial View for each block.

The default rendering method is named GetBlockGridHtmlAsync() and comes with a few options - for example:

@await Html.GetBlockGridHtmlAsync(Model, "myGrid")

In the sample above "myGrid" is the alias of the Block Grid editor.

If you are using ModelsBuilder, the example will look like this:

@await Html.GetBlockGridHtmlAsync(Model.MyGrid)

To use the GetBlockGridHtmlAsync() method, you will need to create a Partial View for each Block Type. The Partial View must be named using the alias of the Element Type that is being used as Content Model for the Block Type.

These Partial View files need to go into the Views/Partials/blockgrid/Components/ folder.

Example: Views/Partials/blockgrid/Components/MyElementTypeAliasOfContent.cshtml.

The Partial Views will receive a model of type Umbraco.Cms.Core.Models.Blocks.BlockGridItem. This model contains Content and Settings from your block, as well as the configured RowSpan, ColumnSpan, and Areas of the Block.

Rendering the Block Areas

The Partial View for the Block is responsible for rendering its own Block Areas. This is done using another built-in rendering mechanism:

@await Html.GetBlockGridItemAreasHtmlAsync(Model)

Here you will need to create a Partial View for each Block Type within the Block Area. For the name, use the alias of the Element Type that is being used as Content Model for the Block Type.

These Partial Views must be placed in the same folder as before, (Views/Partials/blockgrid/Components/), and will receive a model of type Umbraco.Cms.Core.Models.Blocks.BlockGridItem.

Putting it all together

The following is an example of a Partial View for a Block Type of type MyElementTypeAliasOfContent.

MyElementTypeAliasOfContent.cshtml
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridItem>;

@* Render the value of field with alias 'heading' from the Element Type selected as Content section *@
<h1>@Model.Content.Value("heading")</h1>

@* Render the block areas *@
@await Html.GetBlockGridItemAreasHtmlAsync(Model)

If you are using ModelsBuilder, you can make the property rendering strongly typed by letting your view accept a model of type BlockGridItem<T>. For example:

MyElementTypeAliasOfContent.cshtml
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridItem<ContentModels.MyElementTypeAliasOfContent>>;
@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;

@* Render the Heading property from the Element Type selected as Content section *@
<h1>@Model.Content.Heading</h1>

@* Render the block areas *@
@await Html.GetBlockGridItemAreasHtmlAsync(Model)

Stylesheet

Using the default rendering together with your layout stylesheet will provide what you need for rendering the layout.

To use the Default Layout Stylesheet, copy the stylesheet to your frontend. You can download the default layout stylesheet from the link within the DataType, we recommend putting the file in the css folder, example: wwwroot/css/umbraco-blockgridlayout.css.

<link rel="stylesheet" href="@Url.Content("~/css/blockgridlayout.css")" />

A set of built-in Partial Views are responsible for rendering the Blocks and Areas in a Block Grid. If you want to tweak or change the way the Block Grid is rendered, you can use the built-in Partial Views as a template:

  1. Copy the cloned views to the local folder Views/Partials/blockgrid/ .

  2. Make changes to your copied views. The entry point for GetBlockGridHtmlAsync() is the view default.cshtml .

2. Build custom rendering

The built-in value converter for the Block Grid property editor lets you use the block data as you like. Call the Value<T> method with a type of BlockGridModel to have the stored value returned as a BlockGridModel instance.

BlockGridModel contains the Block Grid configuration (like the number of columns as GridColumns) whilst also being an implementation of IEnumerable<BlockGridItem> (see details for BlockGridItem above).

The following example mimics the built-in rendering mechanism for rendering Blocks using Partial Views:

View.cshtml
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@using Umbraco.Cms.Core.Models.Blocks
@{
    var grid = Model.Value<BlockGridModel>("myGrid");

    // get the number of columns defined for the grid
    var gridColumns = grid.GridColumns;

    // iterate the block items
    foreach (var item in grid)
    {
        var content = item.Content;

        @await Html.PartialAsync("PathToMyFolderOfPartialViews/" + content.ContentType.Alias, item);
    }
}

If you do not want to use Partial Views, you can access the block item data directly within your rendering:

View.cshtml
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@using Umbraco.Cms.Core.Models.Blocks
@{
    var grid = Model.Value<BlockGridModel>("myGrid");

    // get the number of columns defined for the grid
    var gridColumns = grid.GridColumns;

    // iterate the block items
    foreach (var item in grid)
    {
        // get the content and settings of the block
        var content = item.Content;
        var settings = item.Settings;
        // get the areas of the block
        var areas = item.Areas;
        // get the dimensions of the block
        var rowSpan = item.RowSpan;
        var columnSpan = item.ColumnSpan;

        // render the block data
        <div style="background-color: #@(settings.Value<string>("color"))">
            <h2>@(content.Value<string>("title"))</h2>
            <span>This block is supposed to span <b>@rowSpan rows</b> and <b>@columnSpan columns</b></span>
        </div>
    }
}

Write a Custom Layout Stylesheet

The default layout stylesheet is using CSS Grid. This can be modified to fit your implementation and your project.

Adjusting the Default Layout Stylesheet

To make additions or overwrite parts of the default layout stylesheet, import the default stylesheet at the top of your own file.

@import 'css/umbblockgridlayout.css';

You need to copy the Default Layout Stylesheet to your frontend. You can download the default layout stylesheet from the link within the DataType, we recommend putting the file in the css folder, example: wwwroot/css/umbraco-blockgridlayout.css.

Write a new Layout Stylesheet

In this case, you would have to write the layout from scratch.

You are free to pick any style, meaning there is no requirement to use CSS Grid. It is, however, recommended to use CSS Grid to ensure complete compatibility with the Umbraco backoffice.

CSS Class structure and available data

When extending or writing your own layout, you need to know the structure and what data is available.

For example: You can use the below HTML structure:

<div class="umb-block-grid"
     style="--umb-block-grid--grid-columns: 12;"
>

    <!-- Notice this is the same markup used every time we will be printing a list of blocks: -->
    <div class="umb-block-grid__layout-container">

        <!-- repeated for each layout entry -->
        <div
            class="umb-block-grid__layout-item"
            data-content-element-type-alias="MyElementTypeAlias"
            data-content-element-type-key="00000000-0000-0000-0000-000000000000"
            data-element-udi="00000000-0000-0000-0000-000000000000"
            data-col-span="6"
            data-row-span="1"
            style="
            --umb-block-grid--item-column-span: 6;
            --umb-block-grid--item-row-span: 1;
            "
        >

            <!-- Here the Razor View or Custom View for this block will be rendered. -->

            <!-- Each razor view must render the 'area-container' them self.
            This can be done by the Razor helper method:

            @await Html.GetBlockGridItemAreasHtmlAsync(Model)

            The structure will be as printed below,
            Do notice targeting the 'area-container' needs a double selector as markup will be different in Backoffice.
            Here is an example of the CSS selector:
                .umb-block-grid__area-container, .umb-block-grid__block--view::part(area-container) {
                    position: relative;
                }
            -->
            <div
                class="umb-block-grid__area-container"
                style="--umb-block-grid--area-grid-columns: 9;"
            >

                <!-- repeated for each area for this block type. -->
                <div
                    class="umb-block-grid__area"
                    data-area-col-span="3"
                    data-area-row-span="1"
                    data-area-alias="MyAreaAlias"
                    style="
                    --umb-block-grid--grid-columns: 3;
                    --umb-block-grid--area-column-span: 3;
                    --umb-block-grid--area-row-span: 1;
                    ">

                        <!-- Notice here we print the same markup as when we print a list of blocks(same as the one in the root of this structure..):
                        <div class="umb-block-grid__layout-container">
                            ...
                        </div>
                        End of notice.  -->
                </div>
                <!-- end of repeat -->

            </div>


        </div>
        <!-- end of repeat -->

    </div>

</div>

Build a Custom Backoffice View

Building Custom Views for Block representations in Backoffice is based on the same API for all Block Editors.

Creating a Block Grid programmatically

In this example, we will be creating content programmatically for a "spot" Blocks in a Block Grid.

  1. On a Document Type add a property called blockGrid.

  2. Then add as editor Block Grid.

  3. In the Block Grid add a new block and click to Create new Element Type

  4. Name this element type spotElement with the following properties:

  • A property called title with the editor of Textstring

  • A property called text with the editor of Textstring

  1. Then on the Settings model click to add a new Setting.

  2. Then click to Create new Element Type.

  3. Name this element type spotSettings with the following properties:

  • A property called featured with the editor of True/false.

The raw input data for the spots looks like this:

new[]
{
    new { Title = "Item one", Text = "This is item one", Featured = false, ColumnSpan = 12, RowSpan = 1 },
    new { Title = "Item two", Text = "This is item two", Featured = true, ColumnSpan = 6, RowSpan = 2 }
}

The resulting JSON object stored for the Block Grid will look like this:

{
    "layout": {
        "Umbraco.BlockGrid": [{
                "contentUdi": "umb://element/bb23fe28160941efa506da7aa314172d",
                "settingsUdi": "umb://element/9b832ee528464456a8e9a658b47a9801",
                "areas": [],
                "columnSpan": 12,
                "rowSpan": 1
            }, {
                "contentUdi": "umb://element/a11e06ca155d40b78189be0bdaf11c6d",
                "settingsUdi": "umb://element/d182a0d807fc4518b741b77c18aa73a1",
                "areas": [],
                "columnSpan": 6,
                "rowSpan": 2
            }
        ]
    },
    "contentData": [{
            "contentTypeKey": "0e9f8609-1904-4fd1-9801-ad1880825ff3",
            "udi": "umb://element/bb23fe28160941efa506da7aa314172d",
            "title": "Item one",
            "text": "This is item one"
        }, {
            "contentTypeKey": "0e9f8609-1904-4fd1-9801-ad1880825ff3",
            "udi": "umb://element/a11e06ca155d40b78189be0bdaf11c6d",
            "title": "Item two",
            "text": "This is item two"
        }
    ],
    "settingsData": [{
            "contentTypeKey": "22be457c-8249-42b8-8685-d33262f7ce2a",
            "udi": "umb://element/9b832ee528464456a8e9a658b47a9801",
            "featured": "0"
        }, {
            "contentTypeKey": "22be457c-8249-42b8-8685-d33262f7ce2a",
            "udi": "umb://element/d182a0d807fc4518b741b77c18aa73a1",
            "featured": "1"
        }
    ]
}

For each item in the raw data, we need to create:

  • One contentData entry with the title and text.

  • One settingsData entry with the featured value (the checkbox expects "0" or "1" as data value).

  • One layout entry with the desired column and row spans.

All contentData and layoutData entries need their own unique Udi as well as the ID (key) of their corresponding Element Types. In this sample, we only have one Element Type for content (spotElement) and one for settings (spotSettings). In a real life scenario, there could be any number of Element Type combinations.

  1. First and foremost, we need models to transform the raw data into Block Grid compatible JSON. Create a class called Model.cs containing the following:

Models.cs
using Umbraco.Cms.Core;
using System.Text.Json.Serialization;
namespace My.Site.Models;

// this is the "root" of the block grid data
public class BlockGridData
{
    public BlockGridData(BlockGridLayout layout, BlockGridElementData[] contentData, BlockGridElementData[] settingsData)
    {
        Layout = layout;
        ContentData = contentData;
        SettingsData = settingsData;
    }

    [JsonPropertyName("layout")]
    public BlockGridLayout Layout { get; }

    [JsonPropertyName("contentData")]
    public BlockGridElementData[] ContentData { get; }

    [JsonPropertyName("settingsData")]
    public BlockGridElementData[] SettingsData { get; }
}

// this is a wrapper for the block grid layout, purely required for correct serialization
public class BlockGridLayout
{
    public BlockGridLayout(BlockGridLayoutItem[] layoutItems) => LayoutItems = layoutItems;

    [JsonPropertyName("Umbraco.BlockGrid")]
    public BlockGridLayoutItem[] LayoutItems { get; }
}

// this represents an item in the block grid layout collection
public class BlockGridLayoutItem
{
    public BlockGridLayoutItem(Udi contentUdi, Udi settingsUdi, int columnSpan, int rowSpan)
    {
        ContentUdi = contentUdi;
        SettingsUdi = settingsUdi;
        ColumnSpan = columnSpan;
        RowSpan = rowSpan;
    }

    [JsonPropertyName("contentUdi")]
    public Udi ContentUdi { get; }

    [JsonPropertyName("settingsUdi")]
    public Udi SettingsUdi { get; }

    [JsonPropertyName("areas")]
    // areas are omitted from this sample for abbreviation
    public object[] Areas { get; } = { };

    [JsonPropertyName("columnSpan")]
    public int ColumnSpan { get; }

    [JsonPropertyName("rowSpan")]
    public int RowSpan { get; }

}

// this represents an item in the block grid content or settings data collection
public class BlockGridElementData
{
    public BlockGridElementData(Guid contentTypeKey, Udi udi)
    {
        ContentTypeKey = contentTypeKey;
        Udi = udi;
    }

    [JsonPropertyName("contentTypeKey")]
    public Guid ContentTypeKey { get; }

    [JsonPropertyName("udi")]
    public Udi Udi { get; }

    [JsonExtensionData]
    public Dictionary<string, object>? Data { get; set;}
}
BlockGridTestController.cs
using Microsoft.AspNetCore.Mvc;
using My.Site.Models;
using Umbraco.Cms.Core;
using Umbraco.Cms.Core.Models;
using Umbraco.Cms.Core.Serialization;
using Umbraco.Cms.Core.Services;

namespace My.Site.Controllers;

[ApiController]
[Route("/umbraco/api/blockgridtest")]
public class BlockGridTestController : Controller
{
    private readonly IContentService _contentService;
    private readonly IContentTypeService _contentTypeService;
    private readonly IJsonSerializer _serializer;

    public BlockGridTestController(IContentService contentService, IContentTypeService contentTypeService, IJsonSerializer serializer)
    {
        _contentService = contentService;
        _contentTypeService = contentTypeService;
        _serializer = serializer;
    }

    // POST: /umbraco/api/blockgridtest/create
    [HttpPost("create")]
    public ActionResult Create()
    {
        // get the item content to modify
        IContent? content = _contentService.GetById(Guid.Parse("efba7b97-91b6-4ddf-b2cc-eef89ff48c3b"));
        if (content == null)
        {
            return NotFound("Could not find the content item to modify");
        }

        // get the element types for spot blocks (content and settings)
        IContentType? spotContentType = _contentTypeService.Get("spotElement");
        IContentType? spotSettingsType = _contentTypeService.Get("spotSettings");
        if (spotContentType == null || spotSettingsType == null)
        {
            return NotFound("Could not find one or more content types for block data");
        }

        // this is the raw data to insert into the block grid
        var rawData = new[]
        {
            new { Title = "Item one", Text = "This is item one", Featured = false, ColumnSpan = 12, RowSpan = 1 },
            new { Title = "Item two", Text = "This is item two", Featured = true, ColumnSpan = 6, RowSpan = 2 }
        };

        // build the individual parts of the block grid data from the raw data
        var layoutItems = new List<BlockGridLayoutItem>();
        var spotContentData = new List<BlockGridElementData>();
        var spotSettingsData = new List<BlockGridElementData>();
        foreach (var data in rawData)
        {
            // generate new UDIs for block content and settings
            var contentUdi = Udi.Create(Constants.UdiEntityType.Element, Guid.NewGuid());
            var settingsUdi = Udi.Create(Constants.UdiEntityType.Element, Guid.NewGuid());

            // create a new layout item
            layoutItems.Add(new BlockGridLayoutItem(contentUdi, settingsUdi, data.ColumnSpan, data.RowSpan));

            // create new content data
            spotContentData.Add(new BlockGridElementData(spotContentType.Key, contentUdi)
            {
                Data = new Dictionary<string, object>
                {
                    { "title", data.Title },
                    { "text", data.Text },
                }
            });

            // create new settings data
            spotSettingsData.Add(new BlockGridElementData(spotSettingsType.Key, settingsUdi)
            {
                Data = new Dictionary<string, object>
                {
                    { "featured", data.Featured ? "1" : "0" },
                }
            });
        }

        // construct the block grid data from layout, content and settings
        var blockGridData = new BlockGridData(
            new BlockGridLayout(layoutItems.ToArray()),
            spotContentData.ToArray(),
            spotSettingsData.ToArray());

        // serialize the block grid data as JSON and save it to the "blockGrid" property on the content item
        var propertyValue = _serializer.Serialize(blockGridData);
        content.SetValue("blockGrid", propertyValue);
        _contentService.Save(content);

        return Ok("Saved");
    }
}

For the above code IContent? content = _contentService.GetById(1203); change the id with your content node that is using the Block Grid.

  1. In order to test this implementation, run the project and add /umbraco/api/blockgridtest/create after your domain name. If the result shows as Saved then check your content node and you will see the 2 spotElement contents.

This can also be tested via Postman as well if preffered.

Change Rich Text Editor UI

Umbraco 15 includes two options for rich text editing: Tiptap and TinyMCE. TinyMCE will eventually be phased out of the CMS.

This article will guide you through switching from TinyMCE UI to the new Tiptap UI.

The following steps will guide you through changing the property editor used for rich text on an existing Document Type.

Create a new Data Type

The first step in this guide is to create a new Rich Text Editor Data Type using the Tiptap property editor.

As an alternative, you can create a new Data Type using the Tiptap property editor when updating the Document Type.

When swapping the UI used for the Rich Text Editor, you may need to reconfigure the toolbar.

  1. Navigate to the Settings section of the Umbraco Backoffice.

  2. Select + next to the Data Types folder.

  3. Select New Data Type....

  1. Give the new Data Type a name.

  2. Click Select a property editor.

  3. Choose Rich Text Editor [Tiptap].

  1. Save the Data Type.

Update the Document Type(s)

Once you have prepared the new Data Type you need to update the Document Types that should use it.

  1. Expand the Document Types folder.

  2. Select a Document Type that needs to be updated.

  3. Click on the Property used for rich text.

  1. Hover over the selected property editor and click Change.

  2. Search for the newly created Data Type and select it.

  1. Submit the changes.

  2. Save the Document Type.

  3. Repeat steps 2-7 for each Document Type that needs to use the new Data Type.

Verify your content

When you have updated all the relevant Document Types, it is recommended to verify the content that uses the Rich Text Editor.

Rich Text Editor TinyMce

Schema Alias: Umbraco.RichText

UI Alias: Umb.PropertyEditorUi.TinyMCE

Returns: HTML

This article is a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice.

Are you using custom configurations or plugins with TinyMCE?

In Umbraco 11 the TinyMCE version supported has been upgraded from version 4 to version 6. You need to migrate to the latest version if you are using TinyMCE plugins or custom configuration.

If your site is upgraded from an older version, follow the migration guides below to upgrade the TinyMCE version as well.

Customize everything from toolbar options to editor size to where pasted images are saved.

Use CSS to define specific editor styles and add them as formatting options of the Rich Text Editor.

Use Blocks to define specific parts that can be added as part of the markup of the Rich Text Editor.

Extend the functionality of the Rich Text Editor with plugins.

Data Type Definition Example

Content Example

MVC View Example

Without Modelsbuilder

With Modelsbuilder

Add values programmatically

The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.

Although the use of a GUID is preferable, you can also use the numeric ID to get the page:

If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string.

Blocks

This article is a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice.

It is possible to insert Blocks into the markup of the Rich Text Editor. Block can be created directly inside the Rich Text editor when

  • You have defined the Block Type as part of the RTE Data Type, and

  • Enabled the Blocks Toolbar Option.

Configure Blocks

The Block List property editor is configured in the same way as any standard property editor, via the Data Types admin interface.

To set up your Block List Editor property, create a new Data Type and select Block List from the list of available property editors.

Then you will see the configuration options for a Block List as shown below.

The Data Type editor allows you to configure the following properties:

  • Available Blocks - Here you will define the Block Types to be available for use in the property. Read more on how to set up Block Types below.

  • Blocks Live editing mode - Enabling this will edit a Block directly to the Rich Text Editor, making changes appear as you type.

Setup Block Types

Block Types are Element Types that need to be created before you can start configuring them as Block Types. This can be done either directly from the property editor setup process, or you can set them up beforehand. If they are set beforehand then they need to be added to the Rich Text Editor afterward.

Once you add an Element Type as a Block Type on your Rich Text Editor Data Type you will have options to configure it further.

Each Block has a set of properties that are optional to configure. They are described below.

Editor Appearance

By configuring the properties in the group you can customize the experience for your editors when they work with blocks in the Content section.

  • Label - Define a label for the appearance of the Block in the editor. The label can use AngularJS template string syntax to display values of properties.

  • Display Inline with text - When turned on the Block Element will be able to stay in line with text or other elements. If not the Block will stay on its own line.

  • Custom view - Overwrite the AngularJS view for the block presentation in the Content editor. Use this to make a more visual presentation of the block or even make your own editing experience by adding your own AngularJS controller to the view.

  • Custom stylesheet - Pick your own stylesheet to be used for this block in the Content editor. By adding a stylesheet the styling of this block will become scoped. Meaning that backoffice styles are no longer present for the view of this block.

  • Overlay editor size - Set the size for the Content editor overlay for editing this block.

Data Models

It is possible to use two separate Element Types for your Block Types. It's required to have one for Content and optional to add one for Settings.

  • Content model - This presents the Element Type used as a model for the content section of this Block. This cannot be changed, but you can open the Element Type to perform edits or view the properties available. Useful when writing your Label.

  • Settings model - Add a Settings section to your Block based on a given Element Type. When picked you can open the Element Type or choose to remove the settings section again.

Catalogue appearance

These properties refer to how the Block is presented in the Block catalog when editors choose which Blocks to use for their content.

  • Background color - Define a background color to be displayed beneath the icon or thumbnail. Eg. #424242.

  • Icon Color - Change the color of the Element Type icon. Eg. #242424.

  • Thumbnail - Pick an image or Scalable Vector Graphics (SVG) file to replace the icon of this Block in the catalog.

The thumbnails for the catalog are presented in the format of 16:10, and we recommend a resolution of 400px width and 250px height.

Advanced

These properties are relevant when you work with custom views.

  • Force hide content editor - If you made a custom view that enables you to edit the content part of a block and you are using default editing mode (not inline) you might want to hide the content editor from the block editor overlay.

Rendering Blocks

To render Blocks in the frontend, you must create Partial Views for each Block.

The Partial Views must be:

  • Named by the alias of the Element Type that is being used as the Content Model for the Block.

  • Placed in the folder Views/Partials/RichText/Components/.

For example, if the Element Type alias of the Content Model is myBlockType, a Partial View must be created at Views/Partials/RichText/Components/MyBlockType.cshtml.

The Partial View will receive the model of Umbraco.Cms.Core.Models.Blocks.RichTextBlockItem. This gives you the option to access properties of the Content and Settings Models of your Block, as illustrated in the following sample:

If you use ModelsBuilder, you can specify the Content Model (and optionally the Settings Model) in the Partial View model. This allows for type-safe access to the Block data.

The following example shows a Partial View of a Block with MyBlockType as the Content Model and MyBlockSettingsType as the Settings Model:

Build a Custom Backoffice View

Extensions

Information on how to work with Tiptap extensions in the rich text editor.

Out of the box, Tiptap has limited capabilities and everything is an extension by design. Basic text formatting features such as bold, italic, and underline are their own extensions. This offers great flexibility, making the rich text editor highly configurable. The implementation in Umbraco offers a wide range of built-in extensions to enhance the Tiptap editor capabilities.

Using the same extension points, this article will show you how to add a custom extension to the rich text editor.

Native Tiptap extensions

Tiptap extension types

There are two types of extension: tiptapExtension and tiptapToolbarExtension.

The tiptapToolbarExtension extension adds a toolbar action that interacts with the Tiptap editor (and native Tiptap extensions).

Adding a native extension

  1. Install the Highlight extension from the npm registry.

  1. Create the code to register the native Tiptap extensions in the rich text editor.

  1. Create the toolbar action to invoke the Highlight extension.

Upon restarting Umbraco, the new extension and toolbar action will be available in the Tiptap Data Type configuration settings.

Rich Text Editor

Schema Alias: Umbraco.RichText UI Alias: Umb.PropertyEditorUi.Tiptap

Returns: HTML

In Umbraco 15, the Rich Text Editor has a new default property editor UI that introduces Tiptap as an alternative.

Current limitations

Resizing media images has not been implemented yet.

Customize everything from toolbar options to editor size to where pasted images are saved.

Use Blocks to define specific parts that can be added as part of the markup of the Rich Text Editor.

Extend the functionality of the Rich Text Editor with extensions.

Data Type Definition Example

Content Example

MVC View Example

With Modelsbuilder

Without Modelsbuilder

Add values programmatically

The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.

Although the use of a GUID is preferable, you can also use the numeric ID to get the page:

If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string.

Styles

It is possible to define specific styles and fonts for the Rich Text Editor (RTE). Once you have defined the styles, and enabled them on the RTE Data Type, the styles can be accessed directly in the Content section.

Creating RTE Styles

The RTE styles are created and managed in the Umbraco backoffice.

  • Find the Stylesheets folder in the Settings section.

  • Click ... next to the Stylesheets folder and select Create....

  • Choose New Rich Text Editor style sheet file.

  • Give the new stylesheet a name and Save it.

This will generate an empty CSS file in your project.

At this point, you can start adding specific styles, that your editors can then use in the Content section when creating and writing new content.

The image above is an example of how an RTE style can be configured. When working with these styles, the Preview feature will show you how the style will look when applied.

Every style you add, will automatically be added to the CSS file. The file will be placed in the same location as the rest of your CSS files. It is possible to edit the file directly from the backoffice as well. Access it from the Code tab in the top-right corner.

Using RTE Styles

In order for your editors to be able to use the styles when working with content, two things needs to be done.

1. Enable "Style select"

The styles will be accessed by the editors using the "Formats" dropdown in the toolbar of the RTE. In order the enable the dropdown, the "Style select" toolbar option needs to be checked.

2. Select the styles

You can have as many different styles for your RTEs as you want. You might want to have different styles for different RTE Data Types.

When configuring your RTE Data Types, you can select which stylesheets your content editors should be able to use.

Plugins

Information on how to work with TinyMCE plugins in the rich text editor.

TinyMCE comes with a lot of plugins out of the box, but it is also possible to create your own plugins. This article will show you how to add a custom plugin to the rich text editor.

Open-Source Plugins

Premium Plugins

Adding a Plugin

The manifest file should be placed in a folder in App_Plugins/{YourPackageName}, with the name umbraco-package.json.

Creating a Custom Plugin

Examples

Load a custom plugin that gives you the ability to interact with the global tinymce editor object.

Here we are loading a custom plugin called myrteplugin and adding a button to the editor called myrtebutton. When the button is clicked, it will insert the text Hello World! into the editor.

1.Add a manifest file

First we create an umbraco-package.json file which will contain the manifest for the plugin. This adds a button to the toolbar in the rich text editor, which editors can enable on the Data Type. We are also letting the rich text editor know it should load the plugin from the plugin.js file.

2.Add the plugin.js file

The plugin.js file should contain the JavaScript code for the plugin. The file is loaded as a JavaScript module and must export a default class that extends the UmbTinyMcePluginBase class.

The UmbTinyMcePluginBase class is a class provided by Umbraco that you can use to create your own plugins. The class is a wrapper around the TinyMCE plugin API. We can use the args object on the constructor to access the TinyMCE editor instance and other useful properties.

The button must be added to the toolbar in the rich text editor configuration.

You can go to any Document Type that uses the rich text editor and click the button to insert the text Hello World! after.

You have full access to the tinymce editor object, so you can create any custom functionality you need.

Learn more

Adding a premium plugin

To add a premium plugin, you need to add the plugin name to the plugins array in the config object of a tinyMcePlugin extension. You also need to add a JavaScript module that can load up the cloud-hosted TinyMCE premium plugins bundle.

  1. Declaring the plugin

  1. Creating the plugin.js file

The plugin.js file should contain the JavaScript code to load the cloud-hosted TinyMCE premium plugins bundle. You must replace {Cloud API Key} with your own Cloud API key.

We have now enabled the powerpaste plugin. We have configured it to allow pasting in local images. It will prompt when pasting Word documents, but for HTML documents it will clean the HTML without prompting.

You can enable as many plugins as you want through the plugins array in the config object. You can even combine premium, open-source, and your own plugins as you see fit.

Configuration

In this article, you will learn about different ways to configure the Rich Text Editor (RTE).

Toolbar

You have full control over which options should be available on the RTE.

In the example above, all 34 options have been enabled. These options include copy/paste buttons, font styles like bold and italics, bullet lists, and options to embed videos and insert images.

Stylesheets

It is possible to define specific styles that can be used when editing content using the RTE. You can use as many of these styles with the RTE as you want.

Dimensions

Define the height and width of the editor displayed in the Content section.

Maximum size for inserted images

Define the maximum size for images added through the Rich Text Editor.

If inserted images are larger than the dimensions defined here, the images will be resized automatically.

Mode

The Rich Text Editor comes in two different modes: Classic and Inline.

Classic

The default mode which displays the toolbar at the top.

Inline

In this mode, the toolbar is hidden and only shows up when content in the editor is highlighted.

Blocks

Overlay Size

Select the width of the link picker overlay. The overlay size comes in three sizes: Small, Medium, and Large.

Hide Label

When this option is checked the label and description for the RTE property will be hidden.

Ignore User Start Nodes

Some backoffice users might be restricted to specific parts of the Content tree. When the "Ignore User Start Nodes" option is checked, users can pick any piece of content, when adding internal links.

Image Upload Folder

Images added through the RTE are by default added to the root of the Media library.

Sometimes you might want to add the images to a specific folder. This folder can be configured using the "Image Upload Folder" setting.

See the example below to see how a value can be added or changed programmatically. To update a value of a property editor you need the .

See the example below to learn how a value can be added or changed programmatically to a Textarea property. To update a value of a property editor you need the .

See the example below to see how a value can be added or changed programmatically. To update a value of a property editor you need the .

See the example below to see how a value can be added or changed programmatically. To update a value of a property editor you need the .

See the example below to see how a value can be added or changed programmatically. To update a value of a property editor you need the .

The is configured for variance, and

The Block Editor property editor is configured to use that do vary.

The "unexposed" state is visualized by a dimmed-down icon and title (or likely a missing title, if is used):

Block List is a list editing property editor, using to define the list item schema.

Label - Define a label for the appearance of the Block in the editor. The label uses to display values of properties.

Building Custom Views for Block representations in Backoffice is the same for all Block Editors.

Blocks - Defines the Block Types available for use in the property. For more information, see .

Block Types are based on . These can be created beforehand or while setting up your Block Types.

When a Block is placed in an Area, it will fit to the Areas width. Learn more about .

See the section of this article for an example of how scaling works.

Clone the views from . They can be found in src/Umbraco.Web.UI/Views/Partials/blockgrid .

By injecting and into an API controller, we can transform the raw data into Block Grid JSON. It can then be saved to the target content item. Create a class called BlockGridTestController.cs containing the following:

to match your needs.

The Rich Text Editor (RTE) is highly configurable and based on . Depending on the configuration, it will give your content editors more flexibility when working with content that should be more than plain text.

See the example below to see how a value can be added or changed programmatically. To update a value of a property editor you need the .

Building Custom Views for Block representations in Backoffice is the same for all Block Editors. .

The Rich Text Editor (RTE) in Umbraco is based on the open-source editor .

Tiptap has a library of supported native extensions. You can find a list of these extensions on the . While many of these are open source, there are also available for commercial subscriptions.

The tiptapExtension extension is used to register a native . These will enhance the capabilities of the rich text editor itself. For example, to enable text formatting, drag-and-drop functionality and spell-checking.

This example assumes that you will be creating an Umbraco package using the Vite/Lit/TypeScript setup. You can learn how to do this article.

In this example, you will take the native Tiptap open-source extension . Then register it with the rich text editor and add a toolbar button to invoke the Task List action.

Once you have the above code in place, they can be referenced using a .

You can continue to use the . This UI will be removed in Umbraco 16.

The Rich Text Editor (RTE) Tiptap property editor is highly configurable and based on . Depending on the configuration setup, it provides editors a lot of flexibility when working with content.

See the example below to see how a value can be added or changed programmatically. To update a value of a property editor you need the .

This can be done by accessing the RTE Data Type directly from the "Info" tab on the Content. You can also find the RTE Data Type in the Settings section of the backoffice and make the changes from there. Learn more about the configuration options in the article.

The Rich Text Editor (RTE) in Umbraco is based on the open source editor . TinyMCE is a highly customizable editor, and it is possible to extend the functionality of the editor by adding plugins.

TinyMCE has a lot of open-source plugins available. You can find a list of these plugins on the .

TinyMCE also has a number of available. These plugins are only available for . They can be added to the rich text editor by .

To enable plugins in the rich text editor, you need to add an extension type called tinyMcePlugin in a manifest file. The manifest file is a JSON file that describes the plugin and how it should be loaded. You can add a plugin such as the open source to the rich text editor. You can also define your own custom plugin to extend the functionality of the editor. This way you can add custom buttons, dialogs, or other features to the editor.

The example above shows how to add the open-source to the rich text editor. The plugin is added to the Plugins array in the configuration. The plugin itself will be shown in the statusbar of the rich text editor, so the statusbar option is also added to the config object.

If you want to create your own plugin, you should in general follow the . However, there are a few things you need to be aware of to load the plugin in Umbraco. See the example below.

Premium plugins require a subscription at . You can go there and sign up for a free trial. You will get a Cloud API key that you can use to try out the premium plugins.

Let us first add the plugin to the rich text editor. This plugin is a premium plugin that helps you paste content from Word documents and other sources. We will configure the plugin to allow local images and clean the HTML when pasting Word documents.

See all the on the TinyMCE website.

The RTE styles are defined in CSS files which can be created in the Settings section. Read the article to learn more about this feature.

Blocks can be added as elements in the Rich Text Editor. Configuration and rendering of Blocks are described in the article.

Content Service
Content Service
Content Service
Content Service
Content Service
Umbraco Flavored Markdown
Block List
Block Grid
Creating custom views for blocks
Umbraco Flavoured Markdown
Read about building a Custom View for Blocks here
GitHub
Read about building a Custom View for Blocks here
ContentService
ContentTypeService
Setup Block Types
Areas
scaling blocks
Default rendering
Build your own rendering
@{
    if (Model.HasValue("richText")){
        <p>@(Model.Value("richText"))</p>
    }
}
@{
    if (!string.IsNullOrEmpty(Model.RichText.ToString()))
    {
        <p>@Model.RichText</p>
    }
}
@using Umbraco.Cms.Core.Services;
@inject IContentService Services;
@{
    // Get access to ContentService
    var contentService = Services;

    // Create a variable for the GUID of the page you want to update
    var guid = Guid.Parse("32e60db4-1283-4caa-9645-f2153f9888ef");

    // Get the page using the GUID you've defined
    var content = contentService.GetById(guid); // ID of your page

    // Create a variable for the desired value
    var htmlValue = new HtmlString("Add some text <strong>here</strong>");

    // Set the value of the property with alias 'richText'.
    content.SetValue("richText", htmlValue);

    // Save the change
    contentService.Save(content);
}
@{
    // Get the page using it's id
    var content = contentService.GetById(1234);
}
@using Umbraco.Cms.Core.PublishedCache;
@inject IPublishedSnapshotAccessor _publishedSnapshotAccessor;
@{
    // Set the value of the property with alias 'richText'
        content.SetValue(Home.GetModelPropertyType(_publishedSnapshotAccessor, x => x.RichText).Alias, "Add some text <strong>here</strong>");
}
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.RichTextBlockItem>

@* Output the 'heading' field from the Content Model using the `backgroundColor` field from the Settings Model as background color *@
<h1 style="background-color:@Model.Settings.Value("backgroundColor")">@Model.Content.Value("heading")</h1>
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.RichTextBlockItem<MyBlockType, MyBlockSettingsType>>
@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;

@* Output the Heading of field with alias 'heading' from the 'MyBlockType' Content Model *@
<h1 style="background-color:@Model.Settings.BackgroundColor">@Model.Content.Heading</h1>
npm install @tiptap/extension-highlight
import { UmbTiptapExtensionApiBase } from '@umbraco-cms/backoffice/tiptap';
import { Highlight } from '@tiptap/extension-highlight';

export default class UmbTiptapHighlightExtensionApi extends UmbTiptapExtensionApiBase {
    getTiptapExtensions = () => [Highlight];
}
import { UmbTiptapToolbarElementApiBase } from '@umbraco-cms/backoffice/tiptap';
import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';

export default class UmbTiptapToolbarHighlightExtensionApi extends UmbTiptapToolbarElementApiBase {
    override execute(editor?: Editor) {
        editor?.chain().focus().toggleHighlight().run();
    }
}
manifests.ts
export const manifests: Array<UmbExtensionManifest> = [
    {
        type: 'tiptapExtension',
        kind: 'button',
        alias: 'My.Tiptap.Highlight',
        name: 'My Highlight Tiptap Extension',
        api: () => import('./highlight.tiptap-api.js'),
        meta:{
            icon: "icon-thumbnail-list",
            label: "Highlight",
            group: "#tiptap_extGroup_formatting"
        }
    },
    {
        type: 'tiptapToolbarExtension',
        kind: 'button',
        alias: 'My.Tiptap.Toolbar.Highlight',
        name: 'My Highlight Tiptap Toolbar Extension',
        js: () => import('./highlight.tiptap-toolbar-api.js'),
        forExtensions: ["My.Tiptap.Highlight"],
        meta:{
            alias: "highlight",
            icon: "icon-brush",
            label: "Highlight"
        }
    }
]
@{
    if (!string.IsNullOrEmpty(Model.RichText.ToString()))
    {
        <p>@Model.RichText</p>
    }
}
@{
    if (Model.HasValue("richText")){
        <p>@(Model.Value("richText"))</p>
    }
}
@using Umbraco.Cms.Core.Services;
@inject IContentService Services;
@{
    // Get access to ContentService
    var contentService = Services;

    // Create a variable for the GUID of the page you want to update
    var guid = Guid.Parse("32e60db4-1283-4caa-9645-f2153f9888ef");

    // Get the page using the GUID you've defined
    var content = contentService.GetById(guid); // ID of your page

    // Create a variable for the desired value
    var htmlValue = new HtmlString("Add some text <strong>here</strong>");

    // Set the value of the property with alias 'richText'.
    content.SetValue("richText", htmlValue);

    // Save the change
    contentService.Save(content);
}
@{
    // Get the page using it's id
    var content = contentService.GetById(1234);
}
@using Umbraco.Cms.Core.PublishedCache;
@inject IPublishedSnapshotAccessor _publishedSnapshotAccessor;
@{
    // Set the value of the property with alias 'richText'
        content.SetValue(Home.GetModelPropertyType(_publishedSnapshotAccessor, x => x.RichText).Alias, "Add some text <strong>here</strong>");
}
App_Plugins/YourPackageName/umbraco-package.json
{
    "name": "My TinyMCE Plugin",
    "version": "1.0.0",
    "extensions": [
        {
            "type": "tinyMcePlugin",
            "alias": "mytinymceplugin",
            "name": "My TinyMCE Plugin",
            "meta": {
                "config": {
                    "plugins": ["wordcount"],
                    "statusbar": true
                }
            }
        }
    ]
}
App_Plugins/MyRtePlugin/umbraco-package.json
{
    "name": "My TinyMCE Plugin",
    "version": "1.0.0",
    "extensions": [
        {
            "type": "tinyMcePlugin",
            "alias": "myrteplugin",
            "name": "My TinyMCE Plugin",
            "js": "/App_Plugins/MyRtePlugin/plugin.js",
            "meta": {
                "toolbar": [
                    {
                        "alias": "myrtebutton",
                        "label": "My RTE Button",
                        "icon": "code-sample"
                    }
                ]
            }
        }
    ]
}
App_Plugins/MyTinyMCEPlugin/plugin.js
import { UmbTinyMcePluginBase } from '@umbraco-cms/backoffice/tiny-mce';

export default class UmbTinyMceMediaPickerPlugin extends UmbTinyMcePluginBase {
    /**
     @param args {import('@umbraco-cms/backoffice/tiny-mce').TinyMcePluginArguments}
     */
    constructor(args: TinyMcePluginArguments) {
        super(args);

        // Add your plugin code here
        args.editor.ui.registry.addButton('myrtebutton', {
            text: 'My RTE Button',
            icon: 'code-sample',
            onAction: () => {
                args.editor.insertContent('Hello World!');
            }
        });
    }
}
App_Plugins/MyRtePlugin/umbraco-package.json
{
    "name": "My TinyMCE Plugin",
    "version": "1.0.0",
    "extensions": [
        {
            "type": "tinyMcePlugin",
            "alias": "mytinymceplugin",
            "name": "My TinyMCE Plugin",
            "js": "/App_Plugins/MyRtePlugin/plugin.js",
            "meta": {
                "config": {
                    "plugins": ["powerpaste"],
                    "powerpaste_allow_local_images": "true",
                    "powerpaste_word_import": "clean"
                }
            }
        }
    ]
}
App_Plugins/MyTinyMCEPlugin/plugin.js
import 'https://cdn.tiny.cloud/1/{Cloud API Key}/tinymce/6/plugins.min.js';
Configure the Data Type
TinyMCE
Migrate from version 4 to version 5
Migrate from version 5 to version 6
Configuration options
Styles
Blocks
Plugins
Content Service
Read about building a Custom View for Blocks here
Tiptap
Tiptap website
pro extensions
Tiptap Extension
Vite Package Setup
Highlight
bundle extension type
TinyMCE UI for the Rich Text Editor
Tiptap
Configuration options
Blocks
Extensions
Content Service
RTE Config
TinyMCE
TinyMCE website
Word Count Plugin
Word Count Plugin
TinyMCE documentation
TinyMCE documentation
TinyMCE tutorial: Creating a plugin
TinyMCE Cloud
powerpaste
available premium plugins
RTE Styles
Blocks in Rich Text Editor
premium plugins
paid TinyMCE subscriptions
adding a bit of configuration
Document Type
Element Types
Element Types
Element Types

Log Viewer

Information on using the Umbraco log viewer

Umbraco ships with a built-in Log Viewer feature. This allows you to filter, view log entries, perform complex search queries, and analyze logs for debugging. You can find the Log viewer in the Settings section of the Umbraco backoffice.

Benefits

Ever needed to find all log entries containing the same request ID? Or locate all logs where a property called Duration exceeds 1000ms?

With structured logging and a query language, you can efficiently search and identify log items for specific scenarios. This helps in debugging and finding patterns in your logs, making it easier to resolve issues.

Example Queries

Here are some example queries to help you get started. For more details on the syntax, see the https://github.com/serilog/serilog-filters-expressions project.

Find all logs that are from the namespace 'Umbraco.Core'StartsWith(SourceContext, 'Umbraco.Core')

Find all logs that have the property 'Duration' and the duration is greater than 1000msHas(Duration) and Duration > 1000

Find all logs where the message has localhost in it with SQL like@Message like '%localhost%'

Saved Searches

If you frequently use a custom query, you can save it for quick access. Type your query in the search box and click the heart icon to save it with a friendly name. Saved queries are stored in the umbracoLogViewerQuery table in the database.

Implementing Your Own Log Viewer

Umbraco allows you to implement a customn ILogViewer to fetch logs from alternative sources, such as Azure Table Storage.

Creating a Custom Log Viewer

To fetch logs from Azure Table Storage, implement the SerilogLogViewerSourceBase class from Umbraco.Cms.Core.Logging.Viewer.

This implementation requires the Azure.Data.Tables NuGet package.

using Azure;
using Azure.Data.Tables;
using Serilog.Events;
using Serilog.Formatting.Compact.Reader;
using Serilog.Sinks.AzureTableStorage;
using Umbraco.Cms.Core.Logging.Viewer;
using ITableEntity = Azure.Data.Tables.ITableEntity;

namespace My.Website;

public class AzureTableLogViewer : SerilogLogViewerSourceBase
{
    public AzureTableLogViewer(ILogViewerConfig logViewerConfig, Serilog.ILogger serilogLog, ILogLevelLoader logLevelLoader)
        : base(logViewerConfig, logLevelLoader, serilogLog)
    {
    }

    public override bool CanHandleLargeLogs => true;

    // This method will not be called - as we have indicated that this 'CanHandleLargeLogs'
    public override bool CheckCanOpenLogs(LogTimePeriod logTimePeriod) => throw new NotImplementedException();

    protected override IReadOnlyList<LogEvent> GetLogs(LogTimePeriod logTimePeriod, ILogFilter filter, int skip, int take)
    {
        //Replace ACCOUNT_NAME and KEY with your actual Azure Storage Account details. The "Logs" parameter refers to the table name where logs will be stored and retrieved from.
        var client =
            new TableClient(
                "DefaultEndpointsProtocol=https;AccountName=ACCOUNT_NAME;AccountKey=KEY;EndpointSuffix=core.windows.net",
                "Logs");

        // Table storage does not support skip, only take, so the best we can do is to not fetch more entities than we need in total.
        // See: https://learn.microsoft.com/en-us/rest/api/storageservices/writing-linq-queries-against-the-table-service#returning-the-top-n-entities for more info.
        var requiredEntities = skip + take;
        IEnumerable<AzureTableLogEntity> results = client.Query<AzureTableLogEntity>().Take(requiredEntities);

        return results
            .Skip(skip)
            .Take(take)
            .Select(x => LogEventReader.ReadFromString(x.Data))
            // Filter by timestamp to avoid retrieving all logs from the table, preventing memory and performance issues
            .Where(evt => evt.Timestamp >= logTimePeriod.StartTime.Date &&
                evt.Timestamp <= logTimePeriod.EndTime.Date.AddDays(1).AddSeconds(-1))
            .Where(filter.TakeLogEvent)
            .ToList();
    }

    public override IReadOnlyList<SavedLogSearch>? GetSavedSearches()
    {
        //This method is optional. If you store saved searches in Azure Table Storage, implement fetching logic here.
        return base.GetSavedSearches();
    }

    public override IReadOnlyList<SavedLogSearch>? AddSavedSearch(string? name, string? query)
    {
        //This method is optional. If you store saved searches in Azure Table Storage, implement adding logic here.
        return base.AddSavedSearch(name, query);
    }

    public override IReadOnlyList<SavedLogSearch>? DeleteSavedSearch(string? name, string? query)
    {
        //This method is optional. If you store saved searches in Azure Table Storage, implement deleting logic here.
        return base.DeleteSavedSearch(name, query);
    }
}

public class AzureTableLogEntity : LogEventEntity, ITableEntity
{
    public DateTimeOffset? Timestamp { get; set; }

    public ETag ETag { get; set; }
}

Azure Table Storage requires entities to implement the ITableEntity interface. Since Umbraco’s default log entity does not implement this, a custom entity (AzureTableLogEntity) must be created to ensure logs are correctly fetched and stored.

Register implementation

Umbraco needs to be made aware that there is a new implementation of an ILogViewer to register. We also need to replace the default JSON LogViewer that we ship in the core of Umbraco.

using Umbraco.Cms.Core.Composing;
using Umbraco.Cms.Infrastructure.DependencyInjection;

namespace My.Website;

public class LogViewerSavedSearches : IComposer
{
    public void Compose(IUmbracoBuilder builder) => builder.SetLogViewer<AzureTableLogViewer>();
}

Configuring Logging to Azure Table Storage

With the above two classes, the setup is in place to view logs from an Azure Table. However, logs are not yet persisted into the Azure Table Storage account. To enable persistence, configure the Serilog logging pipeline to store logs in Azure Table Storage.

  • Install Serilog.Sinks.AzureTableStorage from NuGet.

  • Add a new sink to appsettings.json with credentials to persist logs to Azure.

{
"Name": "AzureTableStorage",
"Args": {
  "storageTableName": "LogEventEntity",
  "formatter": "Serilog.Formatting.Compact.CompactJsonFormatter, Serilog.Formatting.Compact",
  "connectionString": "DefaultEndpointsProtocol=https;AccountName=ACCOUNT_NAME;AccountKey=KEY;EndpointSuffix=core.windows.net"}
}

Compact Log Viewer - Desktop App

Language Variants

Learn how to use language variants to output your content in multiple languages.

Language Variants allows you to vary content by culture, so you can allow a content node to exist in multiple languages.

This article will cover the different aspects of enabling and working with language variants on your Umbraco website.

Contents

Video tutorial

How to enable Language Variants

To work with Language Variants you need to have more than one language enabled. This can be done from the Settings section:

You will always have one default language but each language can be set to mandatory.

Enabling Language Variants on Document Types

Now that there are two languages to vary the content with, it needs to be enabled on the Document Types. To do so:

  1. Go to the Document Type in the structure section.

  2. Open the settings page.

  3. Toggle Allow vary by culture.

To allow a property on the Document Type to be varied it will have to be enabled for the property:

Working with Language Variants on content

When you return to your content node you will notice two things:

  1. At the top of the Content tree there will now be a dropdown so you can show the Content tree in the language of your choice.

  2. To the right of the content name there is now a dropdown where you can select a language. You can also open a split view so you can see two languages at once.

Each Property Editor that does not allow variants (an Invariant Property) will by default need to be unlocked in order to be edited. The lock exists to make it clear that this change will affect more languages. Since the value of the invariant properties are shared between all variants on the website.

Whether or not the lock is enabled on the invariant properties depends on the AllowEditInvariantFromNonDefault setting in the appsettings.json file.

For projects created on Umbraco version 10.2 or later, the setting is true, by default. If the project is upgraded to version 10.2 or later, the setting will by default be false.

Test your language variants

Culture and hostnames must be added to your language sites before the content can be tested for variants:

  1. Click ... next to the Home node and select Culture and Hostnames.

  2. Add a specific URL per language and save. For eg: An English language variant with English (United States) as the language can be given a specific URL https://yourwebsite.com/en-us and a Danish language variant can be given a specific URL https://yourwebsite.com/dk.

The Info content app should now show specific URLs for your language variants.

Control User Group permissions on language variants

This feature is available from Umbraco version 10.2.

When you are working with a multilingual site you might want to control who can edit the different variations of the content on the website.

This can be controlled on a User Group level. All default User Groups, except the Sensitive data group, have access to all languages out of the box.

When "Allow access to all languages" is not checked, languages can be added and/or removed. This is to determine which variants the users in the user group have access to.

Even though the language permissions have been set, a user will still be able to view and browse all the language variations. The permission setting will ensure that only the added languages are editable by users of the User Group.

Related Links

Document Blueprints

In this article you can learn about how to create and use Document Blueprints in Umbraco.

Document Blueprints was previously called Content Templates.

Document Blueprints Overview

Document Blueprints allows a content editor to create a blueprint for new content nodes based on an existing node.

Create - Method 1

Select a Content node from the Content menu:

Click ... next to the Content node and select the Create Document Blueprint option.

Give your document blueprint a Name:

Click the Save button and if the creation was successful, you will see a success notification:

The new document blueprint will be created in Document Blueprints node of the Settings tree:

Refresh your browser, if you do not see the new document blueprint in the Document Blueprints folder.

Create - Method 2

Go to the Settings section:

Click ... next to the Document Blueprints tree and select the Create Document Blueprint menu item:

Select the Document Type you want to create a document blueprint for:

You can create document blueprints only from Document Types or Document Types with Templates

Give your document blueprint a Name and click the Save button:

The new document blueprint will be created in Document Blueprints folder of the Settings tree:

Edit

To edit an existing document blueprint, select a document blueprint from the Document Blueprints folder of the Settings tree. When you have finished editing click the Save button:

Use

Once you have created a document blueprint, you can use the template to create new content nodes. To use a document blueprint, Click ... next to the Content tree and select Create:

When you click on a Document Type that has a document blueprint, you will see two options:

  • Create a new node based on a document blueprint

  • Create a blank one

Login

In this article you can learn the various ways of customizing the Umbraco backoffice login screen and form.

To access the backoffice, you will need to login. You can do this by adding /umbraco at the end of your website URL, for example http://mywebsite.com/umbraco.

You will be presented with a login form similar to this:

The login screen contains a short greeting, a login form and an optional Forgotten password link.

Below, you will find instructions on how to customize the login screen.

Greeting

The login screen features a greeting text: The "Welcome" headline. This can be personalized by overriding the existing language translation keys.

To do this follow the steps below:

  1. Register a 'localization' manifest for the default language of your Umbraco site, (usually en-US) to override the greetings.

App_Plugins/Login/umbraco-package.json
{
    "alias": "login.extensions",
    "name": "Login extensions",
    "version": "1.0.0",
    "allowPublicAccess": true,
    "extensions": [
        {
            "type": "localization",
            "alias": "Login.Localize.EnUS",
            "name": "English",
            "js": "/App_Plugins/Login/en-us.js",
            "meta": {
                "culture": "en-US"
            }
        }
    ]
}
  1. Add an en-us.js file containing the following:

App_Plugins/Login/en-us.js
export default {
  auth: {
    instruction: "Log in again to continue",
    greeting0: "Is is Sunday",
    greeting1: "Is is Monday",
    greeting2: "Is is Tuesday",
    greeting3: "Is is Wednesday",
    greeting4: "Is is Thursday",
    greeting5: "Is is Friday",
    greeting6: "Is is Saturday",
  }
}

This will override the default greetings with the ones you provide. The login screen will now display "It is Sunday" instead of "Welcome" for example.

Password reset

The Forgotten password? link allows your backoffice users to reset their password. To use this feature, you will need to add the following key to the Umbraco.Cms.Security section in the appsettings.json file:

"Umbraco": {
    "CMS": {
      "Security": {
        "AllowPasswordReset": true
      }
   }
}

Set it to true to enable the password reset feature, and false to disable the feature.

You will also need to configure a Simple Mail Transfer Protocol (SMTP) server in your appsettings.json file. When you get a successful result on the SMTP configuration when running a health check in the backoffice, you are good to go!

An example:

"Umbraco": {
    "CMS": {
      "Global": {
        "Id": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
        "Smtp": {
          "From": "noreply@test.com",
          "Host": "127.0.0.1",
          "Username": "username",
          "Password": "password"
        }
      }
    }
}

Custom background image and logo

It is possible to customize the background image and the logo for the backoffice login screen by adding the "Content" section in the appsettings.json file:

"Umbraco": {
    "CMS": {
      "Content": {
        "LoginBackgroundImage": "../myImagesFolder/myLogin.jpg",
        "LoginLogoImage": "../myImagesFolder/myLogo.svg",
        "LoginLogoImageAlternative": "../myImagesFolder/myLogo.svg"
      }
   }
}

The LoginBackgroundImage, LoginLogoImage, and LoginLogoImageAlternative are referenced from the /wwwroot/umbraco/ folder.

The LoginLogoImage is displayed on top of the LoginBackgroundImage and the LoginLogoImageAlternative is displayed when the LoginLogoImage is not available, for example on small resolutions.

Custom CSS

You can also customize the login screen by adding a custom CSS file. To do this, you will need to add a new file inside the ~/App_Plugins folder, for example ~/App_Plugins/Login/my-custom-login-screen.css.

You can then add your custom CSS to the file:

:root {
    --umb-login-curves-color: rgba(0, 0, 0, 0.1);
}

This will change the color of the SVG graphics (curves) shown on the login screen. You can also hide the curves by adding the following CSS:

:root {
    --umb-login-curves-display: none;
}

Load the custom CSS file

To tell Umbraco about your custom CSS file, you will need to add a umbraco-package.json file. The umbraco-package.json file should look like this:

{
    "alias": "login.extensions",
    "name": "Login extensions",
    "version": "1.0.0",
    "allowPublicAccess": true,
    "extensions": [
        {
            "type": "appEntryPoint",
            "alias": "MyCustomLoginScreen",
            "name": "My Custom Login Screen",
            "js": "/App_Plugins/Login/my-custom-login-screen.js"
        }
    ]
}

Next add a JavaScript file, for example ~/App_Plugins/Login/my-custom-login-screen.js, and add the following code to load the custom CSS file:

const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '/App_Plugins/Login/my-custom-login-screen.css';
document.head.appendChild(link);

This will load the custom CSS file into Umbraco.

Be aware that the custom CSS file will be loaded on all Umbraco screens, not only the login screen.

Custom CSS properties reference

The following CSS properties are available for customization:

CSS Property
Description
Default Value

--umb-login-background

The background of the layout

#f4f4f4

--umb-login-primary-color

The color of the headline

#283a97

--umb-login-text-color

The color of the text

#000

--umb-login-header-font-size

The font-size of the headline

3rem

--umb-login-header-font-size-large

The font-size of the headline on large screens

4rem

--umb-login-header-secondary-font-size

The font-size of the secondary headline

2.4rem

--umb-login-image

The background of the image wrapper

--umb-login-image-display

The display of the image wrapper

flex

--umb-login-image-border-radius

The border-radius of the image wrapper

38px

--umb-login-content-background

The background of the content wrapper

none

--umb-login-content-display

The display of the content wrapper

flex

--umb-login-content-width

The width of the content wrapper

100%

--umb-login-content-height

The height of the content wrapper

100%

--umb-login-content-border-radius

The border-radius of the content wrapper

0

--umb-login-align-items

The align-items of the main wrapper

unset

--umb-login-button-border-radius

The border-radius of the buttons

45px

--umb-login-curves-color

The color of the curves

#f5c1bc

--umb-login-curves-display

The display of the curves

inline

The Time Out Screen

The time out screen is displayed when the user has been inactive for a certain amount of time. The screen resembles the login screen in many ways and the two are sometimes confused. The most notable difference is that the time out screen does not have a login form. It only has a message and a button to log in again with Umbraco.

If you have added more than one login provider, the users will also see this screen first. This is because they need to choose which provider to use first. In that case, the screen is also referred to as the Choose provider screen.

You can customize the time out screen in the same way as the login screen. The time out screen uses the same localization files as the rest of the Backoffice and not those of the login screen. The notable difference is that the time out screen is scoped to the login section. The login screen is scoped to the auth section of the localization files.

Greeting

To update the greeting message on this screen, you will have to change the section to login:

App_Plugins/Login/umbraco-package.json
{
    "alias": "login.extensions",
    "name": "Login extensions",
    "version": "1.0.0",
    "allowPublicAccess": true,
    "extensions": [
        {
            "type": "localization",
            "alias": "Login.Localize.EnUS",
            "name": "English",
            "js": "/App_Plugins/Login/en-us.js",
            "meta": {
                "culture": "en-US"
            }
        }
    ]
}

The en-us.js file should contain the following:

App_Plugins/Login/en-us.js
export default {
  auth: {
    instruction: "Log in again to continue",
    greeting0: "Is is Sunday",
    greeting1: "Is is Monday",
    greeting2: "Is is Tuesday",
    greeting3: "Is is Wednesday",
    greeting4: "Is is Thursday",
    greeting5: "Is is Friday",
    greeting6: "Is is Saturday",
  }
}

The instruction key is shown when the user has timed out, and the greeting0..6 keys are shown when the user has to choose a login provider.

Image

You can update the image on the time out screen through a custom CSS variable. The default value is --umb-login-image and it is set to the same value as the login screen. You can override this value in your custom CSS file:

:root {
    --umb-login-image: url(../myImagesFolder/myTimeout.jpg);
}

Sidebar

This section explains how the concept of infinite editing using the Sidebar in the Umbraco backoffice works.

Sidebar was previously called Infinite editor.

This feature enables you to work with your content without losing the context of what you are doing.

Document Types are in different sections than content but the sidebar enables you to make changes to them directly from the content you are editing.

In the example showcased above, new options are being added to a Data Type, without losing the context of the content. The example also shows how you can edit images, without being sent to the 'Media' section.

Customize

The sidebar is a feature that comes out of the box with Umbraco. The feature can be customized, which enables you as a developer to improve the workflow for your editors.

Default Document Types

On this page, you will find the default Document Types in Umbraco. If you want to use these document types, you can create them in the Settings section.

On this page, you will find the default Document Types in Umbraco. If you want to use these Document Types, you can create them in the Settings section.

Document Type

A Document Type defines the content structure and fields that can be used across different content items. When creating a Document Type without a template, you focus solely on structured content without tying it to a specific design or layout. This is ideal for content that doesn’t require direct front-end rendering, such as reusable blocks or items managed within a headless CMS setup.

Use a Document Type without a template for structured, reusable content like metadata schemas, settings, or components such as product details and author profiles.

Document Type with Template

A Document Type with a Template combines the content structure with a predefined visual presentation. This approach links your structured content with a specific page design, ensuring a consistent and cohesive look and feel across your site. It allows you to manage content and its appearance separately, which makes updates more efficient.

Use a Document Type with a template for pages like blog posts, landing pages, or services that appear directly on the website.

Element Type

An Element Type is a Document Type without a template designed for reusabale and repeatable set of properties. These are primarily used in editors like the Block List Editor or Block Grid Editor to create structured, nested content.

Element Types are not part of the Content tree and cannot render directly on the front end. When created, the Is an Element Type flag in the Permissions tab is automatically set to True.

Use an Element Type when defining building blocks for complex page layouts, such as grid blocks or call-to-action sections. They are an essential part of modular content design.

Folder

The Folder in the Document Types section is used to organize and structure your Document Types within the Settings section. It serves purely as an organizational container, with no impact on the Content section or site functionality.

Use a Folder to create logical groupings, like a folder named Compositions to hold all your Composition Document Types. This makes it easier to navigate and manage your Document Types, especially in larger projects.

Folders are a powerful tool to keep your Document Types organized and your backoffice tidy.

Defining Content

Here you'll find an explanation of how content is defined in Umbraco

Before a piece of content can be created in the Umbraco backoffice, first it needs to be defined. That is why, when opening a blank installation of Umbraco, it is not possible to create content in the Content section.

All content needs a blueprint that holds information about what kind of data can be stored on the content node or which editors are used.

Additionally, it also needs information on how it is organized, where in the structure it is allowed, and so forth. This blueprint or definition is called a Document Type.

What is a Document Type?

Document Types define what kind of content can be created in the Content section and what an end-user sees and can interact with.

It can define entire pages or more limited content that can be reused on other nodes ie. a Search Engine Optimization (SEO) group. This means that you are in complete control of what type of content can be created and where.

Another example is if there is a "Blog post" Document Type that has some properties containing a thumbnail, a name, and an author image. Then all blog posts using the "Blog post" Document Type, will allow the end user to fill in a thumbnail, author name, and an author image.

A Document Type contains fieldsets (or groups) where you can apply rules about where the content can be created, allowed template(s), backoffice icons, etc.

1. Creating a Document Type

A Document Type is created using the Document Type editor in the Settings section.

  • Go to the Settings section in the backoffice.

  • On the Document Types node click the menu icon (•••) to bring up the context menu.

  • Here choose Document Type with Template. This will create a new Document Type with a template. The Template can be found under Templates in the Settings section which will be assigned as the default template for the Document Type.

2. Defining the root node

Name the Document Type

First, we're prompted to give the Document Type a name. This first Document Type will be the root node for our content, name it "Home".

The alias of the Document Type is automatically generated based on the property name. If you want to change the auto-generated alias, click the "lock" icon. The alias must be in camel case. For example: homePage.

Having a root node lets you quickly query content as you know everything will be under the root node.

Adding Icons to the Document Type

Choosing appropriate icons for your content nodes is a good way to give editors a better overview of the content tree.

To set an icon for the Document Type click the document icon in the top left corner. This will open the icon select dialog. Search for "Home"and select the icon. This icon will be used in the content tree.

Setting Permissions

This will allow this Document Type to be created as the first content in the Content section.

  • Go to the Structure tab

  • Tick the Allow as root toggle

  • Save the Document Type by clicking save in the bottom right corner.

3. Creating the content

Now that we have the Document Type in place, we can create the content.

  • Go to the Content section

  • Click on the menu icon next to Content

  • Select the "Home" Document Type. We'll name it "Home"

  • Then click the Save and Publish button.

As we haven't created our properties, all we can see on the "Home" node is the Properties tab. This tab contains the default properties that are available on all content nodes in Umbraco.

Let's add some properties of our own.

4. Groups and properties

In order to add the option to create different content on the same Document Type, some groups and properties need to be added.

Groups

Groups are a way to organize and structure the properties within the content, making it more manageable. It also makes it more user-friendly for content editors when creating or editing content on a website.

A name can be added to the group and after properties can be added.

Properties

Each field on a Document Type is called a property. The property is given a name, an alias (used to output the properties contained in a template), and an editor.

Some editors require configuration where a configured editor is saved as a Data Type and can be reused for multiple properties and document types. These can be seen in the Settings section under Data Types.

  • Go to the Settings section

  • Expand Document Types by clicking the arrow to the left

  • Select the "Home" Document Type.

Keyboard Shortcuts

Keyboard shortcuts are available when you are working with the Document Type editor. To see which shortcuts are available, click ALT + SHIFT + K.

Adding groups

Before we start adding properties to the Document Type we need to create a group to hold the property.

  • Click Add group and name the group "Content".

If you have multiple groups and/or properties you can order them with drag and drop or by entering a numeric sort order value. This is done by clicking Reorder.

Adding properties

Now that we have created a group we can start adding properties. Let's add a Rich Text editor to the Content group.

  • Click the Add property link in the Content group. This opens the property settings dialog. Here you can set the metadata for each property (name, alias, description)

  • Choose which Data Type/property editor to use, and add validation if needed.

  • Give the property a name. The name will be shown to the editor to make it relevant and understandable. Notice the alias is automatically generated based on the name. We'll name this "Body Text".

Property Editors

  • Clicking Select Editor will open the Select Editor dialog. Here, you can choose between all the available editors on the Create a new Configuration tab. This will create a new configuration or already configured editors in the Available Configurations tab.

  • To make it easier to find what you need use the search field to filter by typing "Rich". Filtering will display configured properties first (under Available configurations) and all available editors under that.

  • Select the Rich Text editor under Create new. This will let you configure the editor settings - the Rich Text editor for this property.

The name of the Data Type is based on the name of the Document Type, the name of the property, and the property editor. Flor example: Home - Body Text - Rich Text editor.

  • Let's rename it to "Basic Rich Text editor" and only select the most necessary options.

    • bold

    • italic

    • alignLeft

    • alignCenter

    • link

    • umbMediaPicker

  • When you are happy with the settings click Submit.

Selecting the Mandatory toggle makes the property mandatory and the content cannot be saved if no value is entered (in this case, the Richtext editor).

You have the option to add additional validation by selecting a predefined validation method under the Custom validation dropdown (such as email, number, or URL). Or by selecting a custom validation and adding a regular expression.

  • Save the Document Type.

  • If you go to the Content section and click on the Home node you will now see the Contentgroup with the Body Text property.

Property descriptions

The description of the property is not necessary, but it´s a best practice as it guides the editor to use the property correctly. The property description supports some markdown and one custom collapse syntax:

Bold

You can make text in the description bold by wrapping it with **

This is **bold**
Italic

You can make text in the description italic by wrapping it with *

This is *italic*
Links

You can make links by using the syntax:

[This is an absolute link](https://google.com)
[This is a relative link](/umbraco#/media)

Note: Links will always have thetarget="_blank" set. This is currently not configurable.

Images

You can embed images by using this syntax:

![Image alt text](https://media.giphy.com/media/bezxCUK2D2TuBCJ7r5/giphy.gif)
Collapsible description

You can make the description collapsible by using this syntax:

<details>
  <summary>This is displayed</summary>
  This is hidden.
</details>

Now if we put it all together we get something like this:

This is **bold**
This is *italic*
[This is an absolute link](https://google.com)
[This is a relative link](/umbraco#/media)
--
![Image alt text](https://media.giphy.com/media/bezxCUK2D2TuBCJ7r5/giphy.gif)

5. Defining child nodes

Next up we'll create a text page Document Type that will be used for subpages on the site.

  • Go back to the Settings section

  • Create a new Document Type

  • Name it "Text Page".

  • Add a group called "Content"

  • This time we'll add two properties:

    • First, make a property called "Summary" using the Textarea editor

    • Secondly, create a property called "Body Text" and reuse the Rich Text Editor Data Type.

Creating child nodes

Before creating a Text Page in Content section, allow the Text Page Document Type to be created as a child node to the Home node.

  • Select the "Home" Document Type

  • Go to the Structure group.

  • Click Add child

  • Select "Text Page".

  • Go to the Content section

  • Click the menu icon (•••) next to the "Home" node

  • Select the "Text page" Document Type. We'll name the page "About us". We now have a basic content structure.

Document Types are flexible and can be used for defining pieces of reusable content or an entire page, to act as a container or repository.

6. Exporting/Importing the Document Type

You can also export document types from an already existing project/installation and import them into another project/installation.

  • Go to the Settings section

  • Click ... next to the Document type

  • Select Export. When you click on the Export button, the Document Type is saved as a *.udt file.

To import a Document Type:

  • Go to the Settings section

  • Click ... next to the Document type

  • Select Import Document Type

  • Click on the Import button and browse to the Document Type you exported. The Name and Alias of the Document Type are displayed.

  • Click Import to complete the process.

  1. If your Document Type contains compositions or inherits from another Document Type, then you need to export/import the Composition/Document Type too.

  2. You cannot export/import document types on Umbraco Cloud.

More information

Related Services

Tutorials

Data

This section focuses on how to create data using the Umbraco backoffice

This section focuses on how to create data using the Umbraco backoffice.

There are three kinds of content in Umbraco:

  • Your normal website content exists in the content section.

  • Media content such as images, videos, and PDFs are stored in the Media section.

  • Finally, Members, are used for user profiles and frontend authentication which you can find in the Members section.

A fundamental principle in Umbraco is that all content types have a definition (Document Types, Media Types, Member Types). These definitions are highly customizable, meaning you can add properties and have complete control over how the data is organized.

Defining Document Types, adding properties, and creating content.

Defining Media Types and uploading files to the media section, using upload fields and image cropper.

Defining Member Types and creating members for authentication and user profiles.

Creating and editing Data Types.

Schedule when content should be published / unpublished automatically.

Overview of how to add and reorder tabs, convert a group to a tab, and manage the “Generic” tab

Control who has access to the Umbraco backoffice and what permissions they have.

An introduction to Relations and Relation Types, creating, and managing relationships between different entities in Umbraco.

Using Dictionary Items, you can store a value for each language. Dictionary Items have a unique key that is used to fetch the value of the Dictionary Item.

How to keep the noise down whilst ensuring your important content versions stick around indefinitely.

Document Type Localization

Here you will learn how to apply localization for Document Types in Umbraco.

This article is a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice.

When defining a Document Type, you can apply localization to:

  • Document Type name and description.

  • Property names and descriptions.

  • Custom property validation messages.

  • Tab and group names.

Setting up localization for Document Types is a two-step process:

  • Apply the localizations to the Document Type.

Creating localizations

doctype-en.js
export default {
    contentTypes: {
        article: 'Article page',
        'article-desc': 'A textual, article-like page on the site. Use this as the main type of content.',
        landing: 'Landing page',
        'landing-desc': 'An inviting, very graphical page. Use this as an entry point for a campaign, and supplement with Articles.'
    },
    tabs: {
        content: 'Page content',
        seo: 'SEO configuration',
    },
    groups: {
        titles: 'Page titles'
    },
    properties: {
        title: 'Main title',
        'title-desc': 'This is the main title of the page.',
        'title-message': 'The main title is required for this page.',
        subTitle: 'Sub title',
        'subTitle-desc': 'This is the sub title of the page.',
    }
};

Umbraco must be restarted to register the localization manifest. Any subsequent localization text changes will need to be reloaded within the browser.

Applying localizations

The localizations are applied by using the syntax #{area alias}_{key alias}.

  1. Create a Document Type with template called #contentTypes_article with alias: articlePage.

  2. Under the newly created Document Type follow these steps:

  • Name the description to #contentTypes_article-desc.

  • Create a new tab called #tabs_content.

  • Add a new group called #groups_titles.

  • Add a property called #properties_title with alias title.

    • Set description to {#properties_title-desc}.

    • Use a TextString editor.

    • Enable to Set this field as mandatory.

    • Under validation add #properties_title-message.

  • Add a property called #properties_subTitle with alias subTitle.

    • Set description to {#properties_subTitle-desc}.

    • Use a TextString editor.

  • Enable Allow at root in the Structure tab.

  1. When creating and editing the content, you will see that the backoffice now uses the configured localizations.

  1. Create a new "Article" content:

  1. When trying to save the content without adding the mandatory content, you will see a warning as expected:

Default Data/Media Types

On this page you will find the media types and Data Types in Umbraco. These types are not created automatically after an upgrade. If you want to use the new types, you can create them yourself.

Data Types

UploadArticle

The UploadArticle Data Type has the following configuration:

  • Property editor: FileUpload

  • Accepted file extensions: pdf, docx, doc

UploadAudio

The UploadAudio Data Type has the following configuration:

  • Property editor: FileUpload

  • Accepted file extensions: mp3, weba, oga, opus

UploadVectorGraphics

The UploadVectorGraphics Data Type has the following configuration:

  • Property editor: FileUpload

  • Accepted file extensions: svg

UploadVideo

The UploadVideo Data Type has the following configuration:

  • Property editor: FileUpload

  • Accepted file extensions: mp4, webm, ogv

Media Types

UmbracoMediaArticle

The UmbracoMediaArticle media type has the following properties:

  • umbracoFile - Upload File

  • umbracoExtension - Label (string)

  • umbracoBytes - Label (bigint)

UmbracoMediaAudio

The UmbracoMediaAudio media type has the following properties:

  • umbracoFile Upload Audio

  • umbracoExtension Label (string)

  • umbracoBytes Label (bigint)

UmbracoMediaVectorGraphics

The UmbracoMediaVectorGraphics media type has the following properties:

  • umbracoFile - Upload Vector Graphics

  • umbracoExtension Label (string)

  • umbracoBytes Label (bigint)

UmbracoMediaVideo

The UmbracoMediaVideo media type has the following properties:

  • umbracoFile - Upload Video

  • umbracoExtension - Label (string)

  • umbracoBytes - Label (bigint)

Blocks

This article is a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice.

It is possible to insert Blocks into the markup of the Rich Text Editor (RTE). Once you've defined the Block Type as part of the RTE Data Type and enabled the Blocks Toolbar Option. Then Blocks can be created directly inside the Rich Text Editor.

Configure Blocks

The Block List property editor is configured in the same way as any standard property editor, via the Data Types admin interface.

To set up your Block List Editor property, create a new Data Type and select Block List from the list of available property editors.

Then you will see the configuration options for a Block List as shown below.

The Data Type editor allows you to configure the following properties:

  • Available Blocks - Here you will define the Block Types to be available for use in the property. Read more on how to set up Block Types below.

  • Blocks Live editing mode - Enabling this will make editing of a Block happen directly to the Rich Text Editor, making changes appear as you type.

Setup Block Types

Block Types are Element Types that need to be created before you can start configuring them as Block Types. This can be done either directly from the property editor setup process, or you can set them up beforehand. If they are set beforehand then they need to be added to the Rich Text Editor afterward.

Once you add an Element Type as a Block Type on your Rich Text Editor Data Type you will have options to configure it further.

Each Block has a set of properties that are optional to configure. They are described below.

Editor Appearance

By configuring the properties in the group you can customize the user experience for your content editors when they work with the blocks in the Content section.

  • Label - Define a label for the appearance of the Block in the editor. The label can use AngularJS template string syntax to display values of properties.

  • Display Inline with text - When turned on the Block Element will be able to stay in line with text or other elements. If not the Block will stay on its own line.

  • Custom view - Overwrite the AngularJS view for the block presentation in the Content editor. Use this to make a more visual presentation of the block or even make your own editing experience by adding your own AngularJS controller to the view.

  • Custom stylesheet - Pick your own stylesheet to be used for this block in the Content editor. By adding a stylesheet the styling of this block will become scoped. Meaning that backoffice styles are no longer present for the view of this block.

  • Overlay editor size - Set the size for the Content editor overlay for editing this block.

Data Models

It is possible to use two separate Element Types for your Block Types. It's required to have one for Content and optional to add one for Settings.

  • Content model - This presents the Element Type used as a model for the content section of this Block. This cannot be changed, but you can open the Element Type to perform edits or view the properties available. Useful when writing your Label.

  • Settings model - Add a Settings section to your Block based on a given Element Type. When picked you can open the Element Type or choose to remove the settings section again.

Catalogue appearance

These properties refer to how the Block is presented in the Block catalog when editors choose which Blocks to use for their content.

  • Background color - Define a background color to be displayed beneath the icon or thumbnail. Eg. #424242.

  • Icon Color - Change the color of the Element Type icon. Eg. #242424.

  • Thumbnail - Pick an image or Scalable Vector Graphics (SVG) file to replace the icon of this Block in the catalog.

The thumbnails for the catalog are presented in the format of 16:10, and we recommend a resolution of 400px width and 250px height.

Advanced

These properties are relevant when you work with custom views.

  • Force hide content editor - If you made a custom view that enables you to edit the content part of a block and you are using default editing mode (not inline) you might want to hide the content editor from the block editor overlay.

Rendering Blocks

To render Blocks in the frontend, you must create Partial Views for each Block.

The Partial Views must be:

  • Named by the alias of the Element Type that is being used as the Content Model for the Block.

  • Placed in the folder Views/Partials/RichText/Components/.

For example, if the Element Type alias of the Content Model is myBlockType, a Partial View must be created at Views/Partials/RichText/Components/MyBlockType.cshtml.

The Partial View will receive the model of Umbraco.Cms.Core.Models.Blocks.RichTextBlockItem. This gives you the option to access properties of the Content and Settings Models of your Block, as illustrated in the following sample:

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.RichTextBlockItem>

@* Output the 'heading' field from the Content Model using the `backgroundColor` field from the Settings Model as background color *@
<h1 style="background-color:@Model.Settings.Value("backgroundColor")">@Model.Content.Value("heading")</h1>

If you use ModelsBuilder, you can specify the Content Model (and optionally the Settings Model) in the Partial View model. This allows for type-safe access to the Block data.

The following example shows a Partial View of a Block with MyBlockType as Content Model and MyBlockSettingsType as Settings Model:

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.RichTextBlockItem<MyBlockType, MyBlockSettingsType>>
@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;

@* Output the Heading of field with alias 'heading' from the 'MyBlockType' Content Model *@
<h1 style="background-color:@Model.Settings.BackgroundColor">@Model.Content.Heading</h1>

Build a Custom Backoffice View

Creating Media

Learn how to work with different types of Media content on your Umbraco website.

Media in Umbraco CMS is handled the same way as content. You define Media Types that act as a base for media items. The following default Media Types are available:

  • Article - used for uploading and storing documents.

  • Audio - used for uploading and storing digital audio files.

  • File - used for uploading and storing different types of files in the Media section.

  • Folder - a container for organizing media items in the Media section tree.

  • Image - used for uploading and storing images.

  • Vector Graphics (SVG) - used for uploading and storing Scalable Vector Graphics (SVG) files which are text files containing source code to draw the desired image.

  • Video - used for uploading and storing video files.

The default Media Types aim to cover most needs for media on a website. You do not need to define your Media Types to start using the Media section. The tools for organizing and uploading the media are already in place.

Uploading Media

You can upload media in two different ways:

Add media through the Media section

From the Media section in the Umbraco backoffice, you can add new media items by following either of the approaches defined below:

  • Use the Create dialog to create a new Media item in the Media section

    • The Media item will be created based on the type you choose.

    • Upload the image or file, give the Media item a name, and click Save.

  • Use the Drag and drop feature to add your files to the Media section.

    • Umbraco will automatically detect the Media Type and create the Media item.

    • You can drop entire folder structures to recreate that same structure in the Media section.

Add media through the Content section

New media items can be added to your site without interrupting the content creation flow. This can be done following either of the two approaches outlined below.

  • Drag and drop the image(s) from your file explorer directly into the Media Picker property on the Content page.

    • Images added this way is automatically added to the user's start node in the Media section of the Umbraco backoffice.

  • Select the "+" icon to open the "Select media" dialog where you can add images from your file explorer directly or using drag and drop.

Creating a folder

It is always a good idea to start by creating a folder for your media items. It can be a good idea to align these folders with the content on your website. This will give the editors a better overview of the files and enable them to upload media items in the correct place.

Follow these steps to create a folder in the Media section:

  1. Go to the Media section.

  2. Select ... next to Media.

  3. Select Create.

  4. Select Folder.

  5. Enter a name for the folder and select Save in the bottom-right corner.

Media Type properties

The Image Media Type has 5 properties: Upload Image, Width, Height, Size, and Type. These are populated once the image is uploaded. The properties can be viewed in the Media section and accessed in your Templates.

Except for the Folder Media Type, the other Media Types have 3 properties: Upload Image, Type, and Size.

Organizing and editing media items

The default view for the Media section is a card view that lets you preview the different files that have been uploaded.

By selecting multiple media items it is possible to perform bulk operations like moving or deleting the items.

To edit properties on a single media item, click the name of the item, which you will see once you hover over the item.

Using media items in the Content section

By adding a Media Picker property to a Document Type the editor will have the ability to select media items when creating content.

Creating a Media Type

You can create custom Media Types and control the structure of the Media tree as you would with Document Types. This means you can store information that is specific to the media on the item itself.

Video tutorial

A Media Type is created in the Settings section using the Media Type editor.

  1. Go to the Settings section.

  2. Click ... next to Media Types.

  3. Click Create > New Media Type.

  4. Name the new Media Type Employee Image.

  5. Choose an icon by selecting the icon left of the name field.

You will now see the Media Type editor. It is similar to the editor used for creating Document Types.

Having different folders for different Media Types makes it possible to restrict where media items can be created and added. Only allowing PDF uploads in a certain folder and employee images in another make it easier to keep the Media section organized.

Adding groups

Before we start adding properties to the Media Type we need to add a group to put these in.

  1. Click on Add group.

  2. Call the group Image.

Adding properties

We need to add the same properties as on the default Image Media Type. These are:

  • umbracoFile

  • umbracoWidth

  • umbracoHeight

  • umbracoBytes

  • umbracoExtension

Follow the steps outlined below to add the properties to the Media Type:

  1. Click Add property.

  2. Name it Upload image.

  3. Change the alias to umbracoFile.

  4. Click Select property editor.

  5. Select Image cropper.

  6. Rename the editor Employee Image Cropper.

  7. Add two new crops called Thumbnail (200px x 350px) and wideThumbnail (350px x 200px).

As mentioned before these properties will automatically be populated once an image has been uploaded.

Defining a Media Type folder

Next up, we will create a folder to hold the employee images. We could use the existing Folder Media Type but that would mean editors can upload employee images to any folder of that type. If we create a folder specifically for employee images there is only one place to put them.

  1. Go back to the Settings section and create a new Media Type.

  2. Name it Employee Images.

  3. Select the folder icon by clicking the icon to the left of the name.

  4. Navigate to the Structure tab.

  5. Click Configure as a Collection under Presentation.

  6. Choose List view - Media.

The new folder is created under the Media Types folder. We also need to only allow the Employee Image Media Type in our new folder. Both of these configurations can be set on the Structure tab.

  1. Go to the Structure tab of the Employee Images folder.

  2. Toggle the Allow at root.

  3. Click Choose in the Allowed Child Node Types.

  4. Select Employee Image.

  5. Click Choose.

Creating the folder and media items

  1. Go to the Media section.

  2. Select ... next to Media.

  3. Name it Employee Images.

  4. Click Save.

Uncheck the Allow at root option on the Employee Images Media Type to prevent the creation of multiple folders of this type. This will only disable the creation of new ones and not affect existing folders.

Cropping the images

If you select an image that has been uploaded to the folder you will see the full image and the two defined crops.

Moving the focal point circle on the image will update the crops to focus accordingly. You can also edit the individual crops by selecting them and moving the image or adjusting the slider to zoom.

More information

Related Services

Members

Members are used for registering and authentication external / frontend users of an Umbraco installation. This could be Forum members and Intranet members.

Members are used for registering and authenticating external users of an Umbraco installation (ie. forum members, intranet users and so forth).

This guide will explain how to define and create members in the backoffice. If you want to work with members using the service APIs, links can be found at the end of the document.

There is a default Member Type that can be used to create members. You can customize this to fit your needs or create your own Member Type from scratch.

Creating a Member

Go to the Members section and click Create.

Members have a number of mandatory properties that need to be filled in before a member can be saved. Some of the properties are Username, Email, two Password fields and so on.

There are also a number of default properties which are stored in the database in the tables Member andTwoFactorLogin:

  • umbracoMemberFailedPasswordAttempts

  • umbracoMemberApproved

  • umbracoMemberLockedOut

  • umbracoTwoFactorLogin

  • umbracoMemberLastLockoutDate

  • umbracoMemberLastLogin

  • umbracoMemberLastPasswordChangeDate

Once the Member is created and saved you can access it by expanding the Members tree and clicking All Members to get a collection. You can also view members of a specific type by selecting the member type in the Members tree.

Sensitive properties on a members data will not be displayed to backoffice users unless they have appropriate permissions. In order to see the values of the default properties in the Member tab you need to have the Sensitive data User Group. By having this group added to a user they will also have the option to mark member type properties as sensitive.

Creating a Member Type

You can create your own Member Types and add tabs, groups and properties as you would with Document Types.

Go to the Settings section, click ... next to Member Types and select Create. You will now be taken to the Member Type editor that is used to define and edit the Member Type. Name the new Member Type and click Save.

Once created, the Member Type will have no properties, so you have the freedom to add your own properties or compositions.

Assigning a Member Composition

When creating a Member Type you can assign compositions. Compositions allow you to inherit tabs and properties from existing member types instead of creating them from scratch.

For example on the member type that you have created, click on Composition. Then you can choose the existing Member type which then you will inherit its tabs, groups, and properties.

The default Member type has a Membership group which includes umbracoMemberComments property along with the other default properties. The other properties can be seen only in the Member tab when creating a member.

It is possible to add more groups and more properties to each of the Member Types you create, as well as the default Member Type.

Creating Member Groups

Member Groups define roles for your members that can be used for role-based protection. A member can be in multiple groups.

To create a new Member Group click the menu icon next to the Member Groups node in the Members section. Choose Create, name the group, and save the group.

Assigning a Member Group

To assign a member to a specific group find the member you wish to assign and find the Properties group. Here you can see which groups the member is already part of. You can also add the member to more groups or remove the member from already assigned groups:

Technical

As a developer you are able to leverage your website when you build on the Members section of Umbraco. The member's section is by default in the Umbraco backoffice, but you can still use it to implement some work on your front end. Members are created using ASP.NET Core Identity, so there are some provider settings that can be set in appsettings.json - here are the defaults:

{
  "$schema": "appsettings-schema.json",  
  "Umbraco": {
    "CMS": {      
      "Security": {
        "AllowPasswordReset": true,
        "AuthCookieDomain": "(No default, but takes a string)",
        "AuthCookieName": "UMB_UCONTEXT",
        "KeepUserLoggedIn": false,
        "UsernameIsEmail": true,
        "HideDisabledUsersInBackoffice": false,
        "AllowedUserNameCharacters": "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-._@+\\",
        "MemberPassword": {
          "RequiredLength": 10,
          "RequireNonLetterOrDigit": false,
          "RequireDigit": false,
          "RequireLowercase": false,
          "RequireUppercase": false,
          "MaxFailedAccessAttemptsBeforeLockout": 5,
          "HashAlgorithmType": "HMACSHA256"
        }
      }
    }
  }
}

You can find out more about the services methods in the reference section of the documentation by following the links below.

References

Related Services

API Users

This guide will explain the API Users concept and how they differ from regular Users how to define

Instead, API Users hold the Client Credentials used to authorize against the Management API. When an external source authorizes using Client Credentials, it effectively assumes the identity of the API User.

Since API Users are identical to regular Users their backoffice access can be controlled in the same way. This allows for imposing detailed access control on the external sources connected to the Management API.

Client IDs for API Users are explicitly prefixed with umbraco-back-office-. This guards against API Users accidentally taking over one of the Client IDs used by the Umbraco core.

Scheduled Publishing

Each document in Umbraco can be scheduled for publishing and unpublishing on a pre-defined date and time.

Each document in Umbraco can be scheduled for publishing and unpublishing on a pre-defined date and time.

You can find the options to do this click on the arrow next to the Save and publish button and pick Schedule...

This will open a Schedule Publishing dialog where you can specify dates and time.

Timezones

Your server may be in a different timezone than where you are located. You are able to select a date and time in your timezone and Umbraco will make sure that the item gets published at that time. So, if you select 12 PM then the item will be published at 12PM in the timezone you are in. This may be 8 PM on the server, which is indicated when you select the date and time.

If you are in the same timezone as the server, this message will not appear under the date picker.

In Umbraco versions lower than 7.5, the time you select has to be the time on the server. These older versions of Umbraco do not detect your local time zone.

Permissions

All users with access to the Content section in the Umbraco backoffice are able to schedule content for publishing/unpublish.

Configuration

In some cases you will need to adjust your configuration to ensure that scheduled publishing/unpublishing works. The schedule works by the server sending an HTTP(S) request to itself.

If you are not load balancing, the way that Umbraco determines the base URL to send the scheduled HTTP(S) request to is as follows:

  • Else umbracoSettings:settings/scheduledTasks/@baseUrl if it exits (deprecated)

  • Else umbracoSettings:distributedCall/servers if we have the server in there (deprecated, see load balance docs)

  • Else it's based on the first request that the website receives and uses the base URL of this request (default)

If the umbracoApplicationUrl is used, the value also specifies the scheme (either HTTP or HTTPS). The request for scheduled publishing will always be sent over HTTPS if the appSettings umbracoUseSSL is set to true.

Troubleshooting

If your scheduled publishing/unpublishing is not working as expected it is probably an issue that your server cannot communicate with the scheduled publishing endpoint. This can be caused by a number of reasons such as:

  • Url rewrites in place that prevent the endpoint from being reached

  • DNS misconfiguration not allowing the server to communicate to the base URL used in the first request that the website receives - which could be directly affected by a firewall/Network Address Translation (NAT)/load balancer that your server sites behind

  • Secure Sockets Layer (SSL) and/or umbracoUseSSL misconfiguration not allowing the server to communicate to the scheduled publishing endpoint on the correct http/https scheme

To better diagnose the issue you can temporarily change your log4net config settings to be DEBUG instead of INFO. This will give you all sorts of information including being able to see whether or not the scheduled publishing endpoint is being reached or not.

Using Tabs

In this section, an overview is given of how to add and reorder tabs, convert a group to a tab and manage the “Generic” tab.

Adding a tab

Using tabs, you can organize properties in the backoffice to provide a tailored and efficient workflow for editors creating and maintaining Content, Media and Members.

Tabs allow you to add horizontal organization in your Document Types, Media Types and Member Types. This is handy for types that need a more defined hierarchy or have many properties and groups.

To add a tab, follow these steps:

  1. Go to Settings.

  2. Create or select a Document Type/Media Type/Member Type and click Add tab.

When adding the first tab, all existing groups are automatically added to the tab.

Reordering tabs

To reorder tabs, follow these steps:

  1. Go to Settings.

  2. Select a Document Type/Media Type/Member Type.

  3. Select Reorder.

  4. You can drag the tab where you want, manually add a numeric value next to the tab name or use the arrows to set a value.

    This is important when using compositions, as you want to always display a tab/group at a certain position by setting a manual numeric value.

  5. Select I am done reordering.

  6. Click Save.

Convert a group to a tab

To convert a group to a tab, follow these steps:

  1. Go to Settings.

  2. Select a Document Type/Media Type/Member Type.

  3. Select Reorder.

  4. You can drag the group to the Convert to tab option.

  5. Select I am done reordering.

  6. Click Save.

Converting a tab back into a group is not possible, as tabs can contain groups, and nested groups are unsupported. To overcome this, create a new group and transfer all tab properties into it, then delete the empty tab.

Managing the “Generic” tab

Once you start adding tabs, you might see a “Generic” tab appear. This is done to hold groups and properties that are not assigned to a tab. For example, a group of properties coming from a composition that has no tab. In order to display the groups and properties correctly and have a solid data structure, they will be displayed under the “Generic” tab.

To manage the Generic tab on a Document Type/Media Type:

  1. Go to the Composition Document Type/Media Type.

  2. Click Add tab and enter the Name for the tab. All existing groups and properties are added to the tab.

  3. Go to the Document Type/Media Type, the Generic tab will now be replaced by the tab from the composition.

Users

This guide will explain how to define, create, and manage users in the backoffice

This guide will explain how to define, create, and manage users in the backoffice.

Creating a user

Go to the Users section. Here, you will see an overview of all the current backoffice users.

To create a new user select the Invite user button. You will be prompted to add a Name and an Email for the new user. You will also need to select which User group the new user should be added to and enter a Message for the invitation.

Once you have created the user, an autogenerated password will be provided. This password needs to be used to access the account.

User profiles

There are default properties on every user that can be defined:

  • Change/Remove photo.

  • Change Password (provides an option to set a new password).

  • Disable (allows one to disable service access).

  • Update the email for the user.

  • Language (sets the backoffice language of the user account).

  • User Group (determines the scope of access in the backoffice)

  • Start nodes for both Content and Media sections to limit access

Default User Groups

By default, the User Groups available to new users are Administrators, Writers, Editors, Translators, and Sensitive Data.

  • Administrator: Can do anything when editing nodes in the content section (has all permissions).

  • Editor: Allowed to create and publish content items or nodes on the website without approval from others or restrictions (has permissions to Public Access, Rollback, Browse Node, Create Content Template, Delete, Create, Publish, Unpublish, Update, Copy, Move and Sort).

  • Writer: Allowed to browse nodes, create nodes, and request for publication of items. Not allowed to publish directly without someone else's approval like an Editor (has permissions to Browse Node, Create, Send to Publish, and Update).

  • Translator: These are used for translating your website. Translators are allowed to browse and update nodes as well as grant dashboard access. Translations of site pages must be reviewed by others before publication (has permissions to Browse Node and Update).

Creating a User Group

You can also create your own custom User Groups and add properties and tabs as you would with Document Types and Member Types.

Go to the Users section and select the Groups tab in the top-right corner.

Select Create Group and you will be taken to the User Group editor. Here you can define and edit the User Group through custom settings and properties.

User Group Parameters

Shows basic information about the User Group and settings for custom properties.

  • Name: The name of the User Group is shown in the User Group tab.

  • Alias: Used to reference the User Group in code - the alias will be auto-generated based on the name.

  • Assign access: Define which sections and languages the users will have access to, and if the users should have access to only some or all content and media.

  • Default Permissions: Select the default permissions granted to users of the User Group.

  • Granular permissions: Define a specific node the users in the group should have access to.

  • Users: Add users to the new group.

User Permissions

Depending on which User Group a user is added to, each user has a set of permissions associated with their accounts. These permissions either enable or disable a user's ability to perform its associated function.

The available user permissions are defined under Default Permissions in the User group.

Setting User Permissions

When a new user is created, you can set specific permissions for that user on different domains and subdomains. You can also set permissions on different User Groups, even for the default types.

Technical

As a developer, you are only able to leverage your website from the backoffice when you build on the Users section of Umbraco. This is because the Users section is restricted to the Umbraco backoffice.

Umbraco Forms has a backoffice security model integrated with Umbraco Users. You can manage the details in the Users section of the backoffice, within a tree named Forms Security.

Default Data Types

Learn about the default data types in Umbraco.

Approved Color

Adds a list of approved colors. The approved colors are added as hex values by using the color picker. Optionally, you can enable labels to give the colors different names.

Checkbox List

Displays a list of preset options as a list of checkbox controls. The preset options are added when configuring a Property Editor using the Data Type. Alternatively, the options can also be updated in the Settings section under Data Types. The value saved is a comma-separated string of IDs.

Content Picker

The Content Picker opens a modal to pick a specific page from the content structure. The value saved is the selected page's ID.

Date Picker

Displays a calendar UI for selecting date and time. The value saved is a standard DateTime value but does not contain time information.

Date Picker with time

Displays a calendar UI for selecting date and time. The value saved is a standard DateTime value.

Dropdown

Displays a list of preset options as a list where only a single value can be selected. The default Data Type does not contain any predefined options. The value saved is the selected value as a string.

Dropdown multiple

Displays a list of preset options as a list where multiple values can be selected. The default Data Type does not contain any predefined options. The value saved is a comma-separated string of IDs.

Image Cropper

Allows to upload and crop images by using a focal point. Specific crop definitions can also be added. This Data Type is used by default on the Image Media Type.

Image Media Picker

The Image Media Picker opens a modal to pick images from the Media tree or images from your Computer. The value saved is the selected media node UDI.

Label

Is a non-editable control and can be used to only display the value. It can also be used in the Media section to load in values related to the node, such as width, height and file size.

There are six Label Data Types:

  • Label (bigint) - Allows to save a big integer value for a Label.

  • Label (datetime) - Allows to set a DateTime value for a Label.

  • Label (decimal) - Allows to set a decimal value for a Label.

  • Label (integer) - Allows to set an integer value for a Label.

  • Label (string) - Allows to set a long string value for a Label.

  • Label (time) - Allows to set time for a Label

List View - Content

This Data Type is used by Document Types that are set to display as a Collection.

List View - Media

This Data Type is used by Media Types that is set to display as a Collection.

List View - Members

This Data Type is used by Member Types that is set to display as a Collection.

Media Picker

The picker opens a modal to pick a specific media item from the Media tree. The value saved is the selected media node UDI.

Member Picker

Displays a dropdown with all the available members. A single member can be selected. The value saved is the ID of the member.

Multi URL Picker

This Data Type allows an editor to add an array of links. These can either be internal Umbraco pages external URLs or links to media in the Media section. The Data Type can be configured by limited number of links it is possible to add.

Multiple Image Media Picker

The picker opens a modal to pick multiple images from the Media tree. The value saved is a comma separated string of media node UDIs.

Multiple Media Picker

The picker opens a modal to pick multiple media items from the Media tree. The value saved is a comma separated string of media node UDIs.

Numeric

A textbox to input a numeric value.

Radiobox

This Data type enables editors to choose from a list of radiobuttons.

Richtext Editor

A TipTap-based What You See Is What You Get (WYSIWYG) editor. This is the standard editor used to edit a larger amount of text. The editor has a lot of settings, which can be changed on the Richtext editor Data Type in the Settings section.

Tags

A textbox that allows you to use multiple tags on a Document Type. You can specify a Tag Group for the Data Type, if you need to use Tags on different sections of your site.

Textarea

A textarea provides a multi-line plain-text editing control. You can set the maximum allowed characters for the textarea and the number of rows, if any.

Textstring

A normal HTML input text field.

True/False

A checkbox which saves either 0 or 1, depending on the checkbox being checked or not. A common use is to create a property with the 'umbracoNaviHide' alias and the Data Type True/False. This will provide editors with the option to hide nodes in the navigation menu on the website.

Upload

Adds an upload field, which allows documents or images to be uploaded to Umbraco. This does not add them to the media library, they are added to the document data.

There are five Upload Data Types:

  • Upload Article - Used for uploading and storing documents.

  • Upload Audio - Used for uploading and storing digital audio files.

  • Upload File - Used for uploading and storing different types of files in the Media section

  • Upload Vector Graphics - Used for uploading and storing Scalable Vector Graphics (svg) files which are text files containing source code to draw the desired image.

  • Upload Video - Used for uploading and storing video files.

Data Types

Learn about the data types in Umbraco.

A Data Type defines the type of input for a property. So when adding a property (on Document Types, Media Types and Members) and selecting the Type you are selecting a Data Type. There are preconfigured Data Types available in Umbraco and more can be added in the Settings section.

What is a Data Type?

A Data Type can be something basic such as TextString, Number, True/False and so on. Or it can be more complex such as Multi Node Tree Picker, Image Cropper, Block Grid and so on.

The Data Type references a Property Editor and if the Property Editor has settings these are configured on the Data Type. This means you can have multiple Data Types referencing the same Property Editor.

An example of this could be to have two dropdown Data Types both referencing the same dropdown Property Editor. One configured to show a list of cities, the other a list of countries.

Creating a new Data Type

Follow these steps to create a new Dropdown Data Type:

  1. Go to the Settings section within the backoffice.

  2. Select the + icon to the right of the Data Types folder.

  3. Choose New Data Type....

  4. Name the Data Type.

  5. Click on Select a property editor.

  6. Find and click on the Dropdown editor.

  7. Click Select.

  8. Choose whether to enable multiple selections.

  9. Add options.

  10. Save the Data Type once you have added the required configuration.

Data Type configuration

In the Settings box below, the configuration options specific to the chosen Property Editor UI will be available. Some Property Editors have many configuration options while some only have a few.

When you're happy with the list press Save. It is now possible to select this Data Type for a property on Document Types, Media Types, and Members. Doing this will then create a dropdown list for the editor to choose from and save the choice as a string.

Customizing Data Types

To customize an existing Data Type go to the Settings section, expand the Data Types folder and select the Data Type you want to edit.

Besides the Data Types that are available out of the box there are some additional Property Editors. For example, think of the Slider and Block List.

Viewing Data Type References

To view the Data Type reference, go to the Settings section and expand the Data Types folder. Select the Data Type you wish to view the reference for and click the Info tab.

This gives you an overview of the Types that currently use the Data Type.

More information

Related Services

Umbraco Learning Base Channel

The following sink needs to be added to the array.

For more in-depth information about logging and how to configure it, see the article.

. A desktop tool is available for viewing and querying JSON log files in the same way as the built-in Log Viewer in Umbraco.

Learn more about the AllowEditInvariantFromNonDefault setting in the article.

To read about how you render variant content in Templates, check out the .

Before following this method you should have some created beforehand.

The login screen has its own set of localization files independent of the rest of the Backoffice. You can read more about Backoffice localization in the article.

You can customize other text on the login screen as well. First, grab the default values and keys from the in the Umbraco CMS GitHub repository. Thereafter copy the ones you want to translate into ~/App_Plugins/Login/umbraco-package.json file.

The value of the setting

The CSS custom properties may change in future versions of Umbraco. You can always find the latest values in the in the Umbraco CMS GitHub repository.

Element type

You can also choose to create a Document Type without a template and create Folders to organize your Document Types. Other options are to create Compositions and Element types, which you can read more about in the section.

The editor determines what type of data the property will store and the input method. There is a wide range of default and you can .

To convert a group to a tab, see the section in the article.

The Umbraco backoffice is localized to match the .

Create the localizations in .

Everything in this article also applies to defining and Member Types.

Once you have , you can add your localization texts for use in Document Types. The following localizations are used for the samples in this article:

Property descriptions support , which uses a different syntax (wrapped in brackets) to avoid conflicts with Markdown headers.

You can also create localization files for Media Types. You can read more about this in the article.

Building Custom Views for Block representations in Backoffice is the same for all Block Editors. .

If you have upgraded from an older version than 8.14 the Media Types listed above are not added automatically. You can add those types manually yourselves by following the steps below . On the , you will find a detailed overview of all Media Types.

and

Learn more about each Media Type in .

From the top-right corner of the Media section, you can toggle between the list and grid view. There is also an option to search for the items in the Media section.

8. Click Save. 9. Click Add. 10. Name the remaining four properties Width, Height, Size, and Type, and give them the aliases as mentioned above. They should all use the Label editor.

7. Click Save.

Click Create > Employee Images folder.

More information can be found under .

Video:

Video:

Video:

API Users allow for authorizing to the Management API.

An API User is identical to a except for one thing: It has no password. In fact, API Users are not allowed to log into the backoffice like regular Users.

If you are in a load balanced environment special care must be given to ensure you've configured this correctly,

umbracoSettings:settings/web.routing/@umbracoApplicationUrl if it exists (see for details)

In some cases it might be easiest to specify the setting. This is to ensure that your server is communicating to itself on the correct URL.

Users (not to be confused with ) are people who have access to the Umbraco backoffice. These could include Content Editors, Translators, Web Designers, and Developers.

Sensitive data: Any users added to this User group will have access to view any data marked as sensitive. Learn more about this feature in the article.

Here's a list of the default Data Types that come installed with Umbraco. There are plenty more that you can create based on the installed .

Learn more about the configuration options in the .

Property Editor This is where you pick the Property Editor UI that the Data Type will be referencing. By default, Umbraco ships with a wide selection to choose from. Learn more about each of them in the article.

Learn more about viewing references or implementing tracking in the article.

Serilog:WriteTo
Logging
Compact Log Viewer
Security Settings
rendering content section
Umbraco 8: Language Variants (official blog post from Umbraco HQ)
Language variations
Render varied content in Templates
UI Localization
en.ts
login layout element
Default Document Types
property editors available
customize additional editors
Rendering Content
Customizing Data Types
ContentService
ContentTypeService
Creating a basic website with Umbraco
Defining Content
Creating Media
Creating Members
Customizing Data Types
Scheduled Publishing
Adding Tabs
Users
Relations
Dictionary Items
Content Version Cleanup
user's configured language
user defined backoffice localization file
Media Types
registered a backoffice localization file
Umbraco Flavored Markdown
Document Type Localization
Read about building a Custom View for Blocks here
the article about default Media Types
Rendering Media
Customizing Data Types
MediaService
Sensitive data
security
Adding a member
Member Type Properties
Role-Based Protection
MemberService
MemberType Service
MemberGroup Service
Video tutorial
How to enable Language Variants
Enabling Language Variants on Document Types
Working with Language Variants on content
Test your language variants
Control User Group permissions on language variants
Related Links
content
default media types page
'Creating a new Media Type'
Through the Media section
Through the Content section
Using Tabs
Convert a group to a tab
Learn how to use the Log Viewer to read and understand logs for your Umbraco CMS website.
How to use Language Variants in Umbraco
Watch this tutorial and learn how to create your own Media Types in Umbraco CMS.
external access
regular User
see the docs here
these docs
umbracoSettings:settings/web.routing/@umbracoApplicationUrl
Members
Sensitive Data
Managing Forms Security
Property Editors
Rich Text Editor articles
Default Data Types
Tracking References
List of available Data Types
Property Editors
DataTypeService
LoginBackgroundImage
InstallMissingDatabase
Creating a Multilingual Site

Relations

Learn about relations and how to create and manage them.

Umbraco sections are built around the concept of 'trees' and there is an implicit relationship between items in a section tree.

We refer to these relationships in the manner of a 'Family Tree'. One content item might be the 'Parent' of some content items, and those items would be referred to as the 'Children' of that parent. Items within the same branch of the tree can also be described as 'Ancestors' or 'Descendants' of an item.

There are methods available to support querying content items by their relative position to the current page. This is possible using the following concepts: Model.Ancestors(), Model.Children(), or Model.Descendants().

In some cases there are no direct relationships between two items in a tree, but they are still somehow 'related'. This could be the alternate language translation pages of a content page.

In other cases there is a 'relation' between different types of entities. This could be a relation between Content and Member, or Member and MediaFolder. You might need to be able to retrieve and display the uploaded images from a specific logged-in Member.

These are the scenarios where the concept of Umbraco Relations provides a solution.

The Concept of Umbraco Relations

Umbraco Relations allow you to relate almost any object in Umbraco to almost any other Umbraco object. This is done by defining a new Relation Type.

How is this different to pickers?

With a Content, Member, or Media picker the relationship only works as a 1-way street. The content item knows it has 'picked' another content item but that other content item does not know where it has been picked.

Umbraco Relations works as a 2-way street. When creating a relation between two different types of entities, it will be possible to find one entity from the other and vice versa. As an example this provides the option to list out all the pages that a content banner had been picked on.

Relation Types

A Relation Type specifies how two types of entities are related. Two items might be related under multiple Relation Types, and you might only be interested in your 'Related Language Page' Relation Type.

Viewing Relations

It is possible to view the existing Relation Types from the Umbraco backoffice:

  1. Access the Umbraco Backoffice.

  2. Navigate to the Settings section.

  3. Locate the Advanced group in the sidebar.

  4. Select Relations.

On the dashboard all defined relations will be listed. Select a Relation to view a list of all the objects that have been related for that specific Relation Type.

Creating Relations

You can create Relations using the RelationService API via code.

Use cases

You might want to create a 'Relation' between two objects either as:

  • A response to a backoffice event. For example, a content item being published that has picked other content items. Storing a relationship between these items would make querying between them easier. Perhaps show all the pages on which a particular 'banner' has been picked.

  • A logged-in member on the front end of an Umbraco website might have the facility to upload images. In response, the implementation could store the photos programmatically in the Media Section and at the same time, create a Relation to record the relationship between the member and their uploaded pictures. On an image gallery page, it would be possible to display all the gallery images for the current logged-in Member using the relations.

Community Packages

Some of the community packages that use Relations are listed below:

Dictionary Items

Creating Dictionary Items in Umbraco

Depending on how your site is set up, not all content is edited through the Content section. There might be some text in your templates that needs translation. Using Dictionary Items, you can store a value for each language. Dictionary Items have a unique key that is used to fetch the value of the Dictionary Item.

Dictionary Items can be managed from the Translation section. Let's take a look at an example. In this example, we will translate "Welcome to Umbraco" from within the template and add it to the dictionary:

Adding a Dictionary Item

To add a Dictionary Item:

  1. Go to the Translation section.

  2. Click on Dictionary in the Translation tree and select Create.

  3. Enter the Name for the dictionary item. Let's say Welcome.

  4. Enter the values for the different language versions.

  5. Click Save.

Grouping Dictionary Items

To group dictionary items:

  1. Go to the Translation section.

  2. Click on Dictionary in the Translation tree and select Create.

  3. Enter the Name for the dictionary item. Let's say Contact.

  4. Click Create.

  5. Click on Contact and select Create.

  6. Enter the Name of the item to be created under the Contact group.

  7. Click Create.

  8. Enter the values for the different language versions.

  9. Click Save.

Editing Dictionary Items

To edit a dictionary item, follow these steps:

  1. Go to the Translation section.

  2. Use the Dictionary tree to locate the item you need to update/edit.

    • Alternatively, you can use the search field in the top-right corner.

  3. Make the edits you need to make.

  4. Click Save to save the changes.

It will only be possible to edit the language(s) that the given user has access to. The value of the remaining languages will be read-only.

Fetching Dictionary Values in the Template

To fetch dictionary values in the template, replace the text with the following snippet:

@Umbraco.GetDictionaryValue("Welcome")

Alternatively, you can specify an altText which will be returned if the dictionary value is empty.

@Umbraco.GetDictionaryValueOrDefault("Welcome", "Another amazing day in Umbraco")

Importing and exporting Dictionary Items

In some cases, you might want to use the same Dictionary Items on multiple Umbraco websites. For this, you can use the export and import functionality to quickly copy the items from one website to another.

Exporting Dictionary Items

  1. Go to the Translation section in the Umbraco backoffice.

  2. Locate the Dictionary Item (or group) you want to copy in the section tree.

  3. Click ... next to the Dictionary item (or group).

  4. Select Export....

  5. Decide whether you want to also include descendants.

  6. Click Export.

This will download a .udt file which you can use to import the Dictionary items on another Umbraco website.

Importing Dictionary Items

  1. Go to the Translation section in the Umbraco backoffice.

  2. Click ... next to the Dictionary tree.

  3. Select Import....

  4. Click on Import.

  5. Find and select the .udt file containing the Dictionary Items.

  6. Click Open in the file browser.

  7. Review the Dictionary Items for import.

  8. Choose where to import the items.

  9. Click on Import.

The Dictionary Items have now been added to your website.

Using Dictionary Item in a Multilingual website

Related Links

Installing Nightly Builds

Instructions on installing nightly builds of Umbraco.

In this article, we'll explain how you can get the latest builds of Umbraco. You can do this in three steps:

Adding the nightly feed as a NuGet source

The NuGet feed containing the nightly builds is https://www.myget.org/F/umbraconightly/api/v3/index.json.

You can either add this feed through the command line or use an IDE of your choice. In this article, we'll provide steps for:

Option 1: Using the command line

To add the nightly feed using the command line:

  1. Open a command prompt of your choice.

  2. Run the following command:

dotnet nuget add source "https://www.myget.org/F/umbraconightly/api/v3/index.json" -n "Umbraco Nightly"

Now the feed is added as a source named Umbraco Nightly.

Option 2: Using Visual Studio

To add the nightly feed using Visual Studio:

  1. Open Visual Studio.

  2. Go to Tools > NuGet Package Manager > Package Manager Settings.

  1. The Options window open.

  2. Select the Package Sources option in the NuGet Package Manager section.

  3. Click the + icon.

  4. A new Package source will be added automatically and highlighted.

  5. Enter the desired name for the feed in the Name field.

  6. Enter the link https://www.myget.org/F/umbraconightly/api/v3/index.json into the Source field.

  7. Click OK.

Now the feed is added as a source named Umbraco Nightly.

Option 3: Using Rider

To add the nightly feed using Rider:

  1. Open Rider.

  2. Go to View > Tool Windows > NuGet.

  3. Go to Sources tab.

  4. Choose the C:\Users\Úmbraco\AppData\Roaming\NuGet\NuGet.Config to add the feed globally.

  5. Cick the green + button in the New Feed field.

  1. The New feed dialog opens.

  2. Enter the desired name in the Name field.

  3. Enter https://www.myget.org/F/umbraconightly/api/v3/index.json in the URL field.

Leave the User, Password fields empty, and the Enabled checkbox ticked.

  1. Click OK.

Now the feed is added as a source named Umbraco Nightly.

Finding the latest nightly version

In the previous steps, we've added the feed and are now ready to install the nightly build.

However, which version should we install? This is, in particular, an issue if we want to create a new site using the dotnet template. The dotnet command does not allow us to use wildcard characters to install the newest version.

Using IDE, we can see a list of available versions in both Visual Studio and Rider. We can then use that version to install the template.

Here we're going to assume that you want to create a brand new site with the dotnet template. The approach is the same if you're updating an existing site. You'll click the Update button for the Umbraco.Cms package instead of installing the template through the terminal.

Let's look at how we can find the latest version of the nightly build:

Option 1: Using Visual Studio

You can use the package manager in Visual Studio to browse the available template versions.

  1. Open Visual Studio.

  2. Go to Tools > NuGet Package Manager > Manage NuGet Packages For Solution...

  1. Select Umbraco Nightly from the Package source dropdown in the NuGet - Solution window.

  1. Check the Include prerelease checkbox.

  2. Search for Umbraco.Templates in the Browse field.

  3. Choose that package.

  4. Click on the Version dropdown and see the available nightly builds.

  5. Choose the applicable version and note down the version number.

Option 2: Using Rider

You can use the NuGet window in Rider to browse the available template versions.

  1. Open Rider.

  2. Go to the Packages tab in the NuGet window..

  3. Select Umbraco Nightly from the All Feeds dropdown.

  1. Check the Prerelase checkbox.

  2. Search for Umbraco.Templates in the Search field.

  3. Choose that package.

  4. Click on the Version drop down and see the available nightly builds.

  5. Choose the applicable version and note down the version number

Installing the latest nightly version template

Now that our feed is added and we know the exact version we're ready to install our template.

To install the latest nightly version template:

  1. Open your command prompt.

  2. Run the following command using the latest version:

dotnet new install Umbraco.Templates

With that, we've successfully installed the latest nightly build of Umbraco.

All we have to do now is to create a site using the dotnet new umbraco -n MyAwesomeNightlySite command.

Upgrade from Umbraco 8 to the latest version

Learn how to upgrade your Umbraco 8 project to Umbraco 10.

It is currently not possible to upgrade directly from Umbraco 8 to the latest version.

Since the underlying framework going from Umbraco 8 to the latest version has changed, there is no direct upgrade path. That said, it is possible to re-use the database from your Umbraco 8 project on your new project in order to maintain the content.

It is not possible to migrate the custom code as the underlying web framework has been updated from ASP.NET to ASP.NET Core. All templates and custom code will need to be reimplemented.

You also need to make sure that the packages you are using are available on the latest version.

Prerequisites

  • A Umbraco 8 project running the latest version of Umbraco 8.

  • A backup of your Umbraco 8 project database.

  • A clean installation of the latest version of Umbraco.

If you use Umbraco Forms, then on the clean installation of Umbraco, you will need to install Umbraco.Forms package as well.

Video Tutorial

The video below shows how to complete the upgrade on an Umbraco Cloud project. Most of the process is the same, however, the video does contain some Cloud-specific elements.

Step 1: Content Migration

  1. Import the database backup into SQL Server Management Studio.

  2. Update the connection string in the new projects appsettings.json file so that it connects to the Umbraco 8 database:

You can also add the connection details if you spin up a clean installation.

  1. Run the new project and login to authorize the upgrade.

  2. Select "Upgrade" when the upgrade wizard appears.

  3. Once the upgrade has been completed, it's recommended to login to the backoffice to verify if your project is upgraded to new version.

This is only content migration and the database will be migrated.

You need to manually update the view files and custom code implementation. For more information, see Step 3 of this guide.

Step 2: File Migration

  1. The following files/folders need to be copied from the Umbraco 8 project into the new project:

    • ~/Views - Do not overwrite the default Macro and Partial View Macro files unless changes have been made to these.

    • ~/Media - Media folder from v8 needs to be copied over into the wwwroot - media folder

    • Any files/folders related to Stylesheets and JavaScript.

  2. Migrate custom configuration from the Umbraco 8 configuration files (.config) into the appsettings.json file on the new project.

    • As of Umbraco Forms version 9, it is only possible to store Forms data in the database. If Umbraco Forms was used on the Umbraco 8 project, the files need to be migrated to the database.

  3. Run the new project.

    • It will give you an error screen on the frontend as none of the Template files have been updated. Follow Step 3 to resolve the errors.

Step 3: Custom Code in the latest version

The latest version of Umbraco is different from Umbraco 8 in many ways. With all the files and data migrated it is now time to rewrite and re-implement all custom code and templates.

Examples of changes

One of the changes is how published content is rendered through Template files. Due to this, it will be necessary to update all the Template files (.cshtml) to reflect these changes.

  • Template files need to inherit from Umbraco.Cms.Web.Common.Views.UmbracoViewPage<ContentModels.HomePage> instead of Umbraco.Web.Mvc.UmbracoViewPage<ContentModels.HomePage>

  • Template files need to use ContentModels = Umbraco.Cms.Web.Common.PublishedModels instead of ContentModels = Umbraco.Web.PublishedModels

Depending on the extent of the project and the amount of custom code and implementations, this step is going to require a lot of work.

Once the new project runs without errors on a local setup it is time to deploy the website to production.

This concludes this tutorial. Find related information and further reading in the section below.

Related Information

Scheduled publishing

Umbraco HQ offers a training course covering the basic concepts and features needed for building an Umbraco CMS website. The course targets frontend and backend developers, designers, and technical users who want to build a website from scratch in Umbraco,

to learn more about the topics covered and how they can enhance your Umbraco development skills.

- a content picker that automatically creates Relations.

- allows you to relate two items via the Backoffice.

- Provides a LinkedPages context item to show, edit, and add relations between content pages.

Which language a user has access to is determined by the "Language permissions" set on the User Group. Learn more about this feature in the article.

To use Dictionary Items in a multilingual website, see the article.

For more information about installing Umbraco, see the article.

The recommended approach for upgrading from version 8 to the latest version is to use this guide to upgrade from Umbraco 8 to Umbraco 10. Umbraco 10 contains the that must be upgraded from Umbraco 8. You can then use the steps to upgrade from Umbraco 10 to the latest version.

If you use Umbraco Forms, make sure to have to True before step 1.

Create a backup of the database from your Umbraco 8 project (after you have upgraded to the latest version of v8). For this, you can use the .

As of Umbraco version 9, the configuration no longer lives in the Web.Config file and has been replaced by the appsettings.json file. Learn more about this in the article.

, if relevant.

Read more about these changes in the section of the Umbraco CMS documentation.

For more information on the correct namespaces or custom code, you can find the references in the article.

Some examples are provided here in the RelationService Documentation Page
'Relations Picker'
'ContentRelations'
'LinkedPages'
Explore the Fundamentals Training Course
Creating a Multilingual Site
API reference for the DictionaryItem
Localization Service
Creating a Multilingual Site
Installation
Users
Adding the nightly feed as a NuGet source
Finding the latest nightly version
Installing the latest nightly version template
Using the command line
Using Visual Studio
Using Rider
Using Visual Studio
Using Rider
"ConnectionStrings": {
    "umbracoDbDSN": "Server=YourLocalSQLServerHere;Database=NameOfYourDatabaseHere;User Id=NameOfYourUserHere;Password=YourPasswordHere;TrustServerCertificate=True"
}
A video tutorial guiding you through the steps of upgrading from version 8 to the latest version on Umbraco Cloud.
StoreUmbracoFormsInDbset
database backup guide
Configuration
Migrate Umbraco Forms data to the database
IPublishedContent
API Documentation
Issue tracker for known issues with Content Migration
Configuration in modern Umbraco
Configuration in legacy Umbraco
database migrations
Upgrading to Major

Umbraco in Load Balanced Environments

Information on how to deploy Umbraco in a Load Balanced scenario and other details to consider when setting up Umbraco for load balancing

Overview

Configuring and setting up a load balanced server environment requires planning, design and testing. This document should assist you in setting up your servers, load balanced environment and Umbraco configuration.

This document assumes that you have a fair amount of knowledge about:

  • Umbraco

  • IIS 10+

  • Networking & DNS

  • Windows Server

  • .NET5+

It is highly recommended that you setup your staging environment to also be load balanced so that you can run all of your testing on a similar environment to your live environment.

Design

These instructions make the following assumptions:

  • All web servers can communicate with the database where Umbraco data is stored

  • You are running Umbraco 9.0.0 or above

  • You will designate a single server to be the backoffice server for which your editors will log into for editing content. Umbraco will not work correctly if the backoffice is behind the load balancer.

There are three design alternatives you can use to effectively load balance servers:

  1. Each server hosts copies of the load balanced website files and a file replication service is running to ensure that all files on all servers are up to date

  2. The load balanced website files are located on a centralized file share (SAN/NAS/Clustered File Server/Network Share)

You will need a load balancer to do your load balancing.

How Umbraco load balancing works

In order to understand how to host your site it is best to understand how Umbraco's flexible load balancing works.

The following diagram shows the data flow/communication between each item in the environment:

The process is as follows:

  • Administrators and editors create, update, delete data/content on the backoffice server

  • These events are converted into data structures called "instructions" and are stored in the database in a queue

  • Each front-end server checks to see if there are any outstanding instructions it hasn't processed yet

  • When a front-end server detects that there are pending instructions, it downloads them and processes them and in turn updates it's cache, cache files and indexes on its own file system

  • There can be a delay between content updates and a front-end server's refreshing, this is expected and normal behaviour.

Scheduling and server role election

Although there is a backoffice server designated for administration, by default this is not explicitly set as the "Scheduling server". In Umbraco there can only be a single scheduling server which performs the following tasks:

  • Scheduled tasks - to initiate any configured scheduled tasks

  • Scheduled publishing - to initiate any scheduled publishing for documents

Automatic Server Role Election

Umbraco will automatically elect a "Scheduling server" to perform the above services. This means that all of the servers will need to be able to resolve the URL of either: itself, the Backoffice server, the internal load balancer, or the public address.

There are two server roles:

  • SchedulingPublisher - Usually this is the backoffice instance.

  • Subscriber - These are the scalable front-end instances - not recommended to be used for backoffice access.

These new terms replace 'Master and Replica', in Umbraco versions 7 and 8.

Each instance will be allocated a role by the automatic server role election process, but they can also be set explicitly (recommended)

For example, In the following diagram the node f02.mysite.local is the elected "Scheduling server". In order for scheduling to work it needs to be able to send requests to itself, the Backoffice server, the internal load balancer or the public address. The address used by the "Scheduling server" is called the "umbracoApplicationUrl".

By default, Umbraco will set the "umbracoApplicationUrl" to the address made by the first accepted request when the AppDomain starts. It is assumed that this address will be a DNS address that the server can resolve.

For example, if a public request reached the load balancer on www.mysite.com, the load balancer may send the request on to the servers with the original address: www.mysite.com. By default the "umbracoApplicationUrl" will be www.mysite.com. However, load balancers may route the request internally under a different DNS name such as "f02.mysite.local" which by default would mean the "umbracoApplicationUrl" is "f02.mysite.local". In any case the elected "Scheduling server" must be able to resolve this address.

In many scenarios this is fine, but in case this is not adequate there's a few of options you can use:

Common load balancing setup information

The below section applies to all ASP.NET load balancing configurations.

Server Configuration

This section describes the configuration options depending on your hosting setup:

Data Protection

The replacement for Machine Keys in ASP.NET Core are called Data Protection. You will need to setup data protection to the same keys on all servers, without this you will end up with view state errors, validation errors and encryption/decryption errors since each server will have its own generated key.

Session State and Distributed Cache

Because Umbraco in some cases uses TempData, your setup needs to be configured with a distributed cache.

Logging

There are some logging configurations to take into account no matter what type of load balancing environment you are using.

Testing

Your staging environment should also be load balanced so that you can see any issues relating to load balancing in that environment before going to production.

You'll need to test this solution a lot before going to production. You need to ensure there are no windows security issues, etc... The best way to determine issues is have a lot of people testing this setup and ensuring all errors and warnings in your application/system logs in Windows are fixed.

Ensure to analyze logs from all servers and check for any warnings and errors.

Unattended upgrades

When upgrading it is possible to run the upgrades unattended.

FAQs

Here's some common questions that are asked regarding Load Balancing with Umbraco:

Question> Why do I need to have a single web instance for Umbraco admin?

TL:DR You must not load balance the Umbraco backoffice, you will end up with data integrity or corruption issues.

The reason you need a single server is because there is no way to guarantee transactional safety between servers. This is because we don't currently use database level locking, we only use application (c#) level locks to guarantee transactional data integrity which is only possible to work on one server. If you have multiple admins saving and publishing at once between servers then the order in which this data is read and written to the database absolutely must be consistent otherwise you will end up with data corruption.

Additionally, the order in which cache instructions are written to the cache instructions table is important for LB, this order is guaranteed by having a single admin server.

Question> Can my SchedulingPublisher backoffice admin server also serve front-end requests?

Yes. There are no problems with having your SchedulingPublisher backoffice admin server also serve front-end request.

However, if you wish to have different security policies for your front-end servers and your back office servers, you may choose to not do this.


Umbraco Training

You use cloud based auto-scaling appliances like

Recommended: by creating a custom IServerRegistrar, this means the front-end servers will never be used as the SchedulingPublisher server role.

Set the UmbracoApplicationUrl property in the

- You use cloud based auto-scaling appliances like

- Each server hosts copies of the load balanced website files and a file replication service is running to ensure that all files on all servers are up to date

- The load balanced website files are located on a centralized file share (SAN/NAS/Clustered File Server/Network Share)

ASP.NET Core supports multiple ways to share keys. Use the to find a description that fits your setup the best.

It is required to setup a distributed cache, like DistributedSqlServerCache or an alternative provider (see for more details). The distributed cache is used by the session in your application, which is used by the default TempDataProvider in MVC.

Find steps on how to enable the feature for a load balanced setup in the article.

Microsoft's Azure Web Apps
WebRouting section of the CMS config
Azure Web Apps
Microsoft's Azure Web Apps
Full documentation is available here
official docs
https://docs.microsoft.com/en-us/aspnet/core/performance/caching/distributed
Full documentation is available here
set your front-end(s) (non-admin server) to be explicit subscriber servers
File Replication
Centralized file share
General Upgrades

DateTime

Schema Alias: Umbraco.DateTime

UI Alias: Umb.PropertyEditorUi.DatePicker

Returns: DateTime

Displays a calendar UI for selecting dates which are saved as a DateTime value.

Data Type Definition Example

There is one setting available for manipulating the DateTime property.

Content Example

MVC View Example - displays a datetime

With Modelsbuilder

@Model.DatePicker

Without Modelsbuilder

@Model.Value("datePicker")

Add values programmatically

The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.

@inject IContentService Services;
@using Umbraco.Cms.Core.Services;
@{
    // Get access to ContentService
    var contentService = Services;

    // Create a variable for the GUID of the page you want to update
    var guid = new Guid("32e60db4-1283-4caa-9645-f2153f9888ef");

    // Get the page using the GUID you've defined
    var content = contentService.GetById(guid); // ID of your page

    // Set the value of the property with alias 'datePicker'
    content.SetValue("datePicker", DateTime.Now);

    // Save the change
    contentService.Save(content);
}

Although the use of a GUID is preferable, you can also use the numeric ID to get the page:

@{
    // Get the page using it's id
    var content = contentService.GetById(1234); 
}

If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string:

@using Umbraco.Cms.Core.PublishedCache;
@inject IPublishedSnapshotAccessor _publishedSnapshotAccessor;
@{

    // Set the value of the property with alias 'datePicker'
    content.SetValue(Home.GetModelPropertyType(_publishedSnapshotAccessor, x => x.DatePicker).Alias, DateTime.Now);
}

The setting involves defining the format. The default date format in the Umbraco backoffice is YYYY-MM-DD HH:mm:ss, but you can change it to a different format. See for the supported formats.

See the example below to see how a value can be added or changed programmatically. To update a value of a property editor you need the .

MomentJS.com
Content Service

Collection

Schema Alias: Umbraco.ListView

UI Alias: Umb.PropertyEditorUi.Collection

Returns: IEnumerable<IPublishedContent>

Collection displays a collection of categories when it is enabled on a Document Type with children.

Configure Collection

Once Collections are configured, the parent content item displays its child items in a list view format within the content item itself. If Collections are not configured, the child items are displayed directly in the Content Tree, rather than being grouped within the parent content item.

Settings

Columns Displayed

It is possible to add more columns to the collection, via adding the properties through the picker modal. These properties are based on the Data Types which are used by the Document Type. The properties will listed for selection.

Once you have selected a column you want to display, define what its heading label should be and what kind of value it should display. You can also move the headers around, re-ordering how they should look. This is done by the move icon on the left side of the alias.

The template section is where you define what kind of value you want to display. The value of the column is in the value variable.

Layouts

Collection comes with two layouts by default. A list and a grid view. These views can be disabled if you are not interested in any of them.

A minimum of one layout needs to be enabled for Collection to work.

You can also make your own layout and add it to the settings. For example, if you wanted to change the width or length of the grid, you will be able to do so.

Order By

Will sort your collection by the selection you choose in the dropdown. By default it selects "Last edited" and you get the following three columns:

  • Last edited - When the content node was last edited and saved.

  • Name - Name of the content node(s).

  • Created by - This is the user who the content node was created by.

You can add more sorting to this collection by adding more datatypes to the columns in the "Columns Displayed" section.

Order Direction

You can select order of the content nodes displayed, "Ascending [a-z]" or "Descending [z-a]". The order is affected by the "Order By" selection.

Page Size

Defines how many child content nodes you want to see per page. This will limit how many content items you will see in your collection. If you set it to 5, then only 5 content items will be shown in the collection.

Workspace View icon

Support for changing the Workspace View icon has not been implemented yet.

Changes the icon in the backoffice of the collection. By default it will look like the image below.

Workspace View name

Support for changing the Workspace View name has not been implemented yet.

You can change the name of the collection itself. Default if empty: 'Child Items'.

Show Content Workspace View First

Support for setting the Content Workspace View First has not been implemented yet.

Enable this to show the Content Workspace View by default instead of the collection's.

Content Example

Generic field value

This example shows how to use a generic field from a child item and display its value in a collection.

Content name

First, a Content Picker property needs to be present on the content item. In this example, the child item has gotten a Content Picker Data Type with the alias of contentPicker.

The child item has a document and the value that should be displayed is the name of the picked value. The next step is to reconfigure the template value in the collection setting.

This will take the value picked up by the content picker.

And display it in the collection. Shown in the example below:

You can use the syntax to display the label value. Here, the {=value} placeholder retrieves the value of the Email property and displays it in the collection, as shown in the image below:

Umbraco Flavored Markdown

Umbraco HQ offers a training course covering the basics of working with Umbraco CMS in a load-balanced setup. The course targets backend developers and operations engineers.

to learn more about the topics covered and get more details about the course.

Explore the Load Balancing Training Course

Label

Schema Alias: Umbraco.Label

UI Alias: Umb.PropertyEditorUi.Label

Returns: String

Label is a non-editable control and can only be used to display a pre-set value.

Data Type Definition Example

Value type

If you want to set a value other than a String, you can define the data using one of the other available Data Types. These include Decimal, Date/time, Time, Integer, and Big integer.

There is also a Value Type: Long string if you need to set a long string value for your Label.

Content Example

MVC View Example

Without ModelsBuilder

@{
    if (Model.HasValue("pageLabel")){
        <p>@(Model.Value("pageLabel"))</p>
    }
}

With ModelsBuilder

@{
    if (!string.IsNullOrEmpty(Model.PageLabel))
    {
        <p>@Model.PageLabel</p>
    }
}

Add values programmatically

The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.

@{
    @inject IContentService Services;
    
 // Get access to ContentService
 var contentService = Services;

 // Create a variable for the GUID of the page you want to update
 var guid = Guid.Parse("32e60db4-1283-4caa-9645-f2153f9888ef");

 // Get the page using the GUID you've defined
 var content = contentService.GetById(guid); // ID of your page

 // Set the value of the property with alias 'pageLabel'. 
 content.SetValue("pageLabel", "A pre-set string value");

 // Save the change
 contentService.Save(content);
}

Although the use of a GUID is preferable, you can also use the numeric ID to get the page:

@{
    // Get the page using it's id
    var content = contentService.GetById(1234); 
}

If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string:

@{
    @inject IPublishedSnapshotAccessor _publishedSnapshotAccessor

    // Set the value of the property with alias 'pageLabel'
     content.SetValue(Home.GetModelPropertyType(_publishedSnapshotAccessor, x => x.MyLabel).Alias, "A Preset string");
}

See the example below to see how a value can be added or changed programmatically. To update a value of a property editor you need the .

Content Service

Repeatable Textstrings

Schema Alias: Umbraco.MultipleTextstring

UI Alias: Umb.PropertyEditorUi.MultipleTextString

Returns: array of strings

The Repeatable textstrings property editor enables a content editor to make a list of text items. For best use with an unordered-list.

Data Type Definition Example

Content Example

MVC View Example

Without Modelsbuilder

@{
    if (Model.Value<string[]>("keyFeatureList").Length > 0)
    {
        <ul>
            @foreach (var item in Model.Value<string[]>("keyFeatureList"))
            {
                <li>@item</li>
            }
        </ul>
    }
}

With Modelsbuilder

@{
    if (Model.KeyFeatureList.Any())
    {
        <ul>
            @foreach (var item in Model.KeyFeatureList)
            {
                <li>@item</li>
            }
        </ul>
    }
}

Add values programmatically

The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.

@using Umbraco.Cms.Core.Services;
@inject IContentService Services;
@{
    // Get access to ContentService
    var contentService = Services;

    // Create a variable for the GUID of the page you want to update
    var guid = new Guid("32e60db4-1283-4caa-9645-f2153f9888ef");

    // Get the page using the GUID you've defined
    var content = contentService.GetById(guid); // ID of your page

    // Set the value of the property with alias 'keyFeatureList'
    content.SetValue("keyFeatureList", "Awesome" + Environment.NewLine + "Super");

    // Save the change
    contentService.Save(content);
}

To add multiple values to the repeatable text strings property editor you have to put each value on a new line. This can be achieved using either \r\n\ or Environment.NewLine.

Although the use of a GUID is preferable, you can also use the numeric ID to get the page:

@{
    // Get the page using it's id
    var content = contentService.GetById(1234); 
}

If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string:

@using Umbraco.Cms.Core.PublishedCache;
@inject IPublishedSnapshotAccessor _publishedSnapshotAccessor;
@{
    // Set the value of the property with alias 'keyFeatureList'
    content.SetValue(Home.GetModelPropertyType(_publishedSnapshotAccessor, x => x.KeyFeatureList).Alias, "Awesome" + Environment.NewLine + "Super");
}

Radiobutton List

Schema Alias: Umbraco.RadioButtonList

UI Alias: Umb.PropertyEditorUi.RadioButtonList

Returns: string

Pretty much like the name indicates this Data type enables editors to choose from list of radio buttons and returns the value of the selected item as string.

Data Type Definition Example

Content Example

MVC View Example

Typed

Without Modelsbuilder

With Modelsbuilder

Add values programmatically

The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.

Although the use of a GUID is preferable, you can also use the numeric ID to get the page:

If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string:

Data Type Definiton
Content Example
Collection example
Enable Collection example
Collection settings example
Collection property picker example
Collection icon example
Collection content email label template
Collection content email value displayed
Collection content picker
Collection content picker
Collection content picker with picked value
Collection view cards with content picker value
Label Data Type definition
Label Content Example
The Create a new project dialog in Visual Studio.
The Configure your new project dialog in Visual Studio.
The Additional information dialog in Visual Studio.
Overview of files in the project solution
Checking the IIS module exists
IIS site example
Launch profiles
Local IIS site
VS Code install extension
Fresh Umbraco installation
Configure task option
Create task from template
Create .NET Core Template
Creating launch.json file
Prompt Menu
Green play button options
launch.json file
Web Installer - Lets Get Started
v7 site with content
Upgrading to v7.14
Fresh 8.1 site
Set Umbraco version in the web.config
Upgrade database to 8.1
Content is on 8.1
File conflict dialog with a web.config file in conflict
File conflict console message with multiple files in conflict
Loadbalancing infrastructure on Azure web apps
IIS Application Pool
IIS Creating Site
Using dotnet CLI for Manual Deployment
Using Visual Studio to Deploy
IIS Website Configuration
IIS Configuration Editor
The Section menu is the horizontal menu located at the top of the Umbraco Backoffice.
Add-Ons Section
Data Type Definition
Login screen
Section
Tree
Node
Default dashboard in the Content section
Content
Document Types
Document Type Properties
Data Types
Property Editor
Media
Media Types
Members
Member Types
Templates
Packages
Users
Document Blueprint
True/Checkbox List Definition
Checkbox List Example
Content Picker Data Type Settings
The option to specify a root node also called the "origin" becomes available when Content is selected as the Node Type.
The available options for setting a root node (origin) for the Content Picker.
The default options for executing additional steps to locate the Dynamic Root.
Query steps appended to a Content Picker with the type Content.
Data Type Definition Example
Content Example
Color Picker Data Type Definition
Color Picker Content
Decimal Content Example
Content Example
Document Picker Data Type Definition
Document Picker Content
Eye Dropper Color Picker Data Type Definition
Eye Dropper Color Picker Content
Media Picker Data Type Definition
Media Picker Content
File Upload Definition
Content Example Empty
Content Example
Member Group Picker Type Definition
Member Grouep Picker Content
Checkbox Example
Single email address content example
Image Cropper Data Type Definition
Image Cropper Upload
Image Cropper Focal Point
Image Cropper crop
Markdown Editor definition example
Content Example
Media Picker Data Type Definition
Member Picker Content
Related Links Data Type Definition
Media Picker Content
Numeric Data Type Definition
Numeric Content Definition
True/False Data Type Definition
No Edit Content Example
Textarea Data Type Definition
Textarea Content Example
Textbox Content Example With Limits
Slider Data Type Definition
Textbox Data Type Definition
Textbox Content Example
Textbox Content Example Without a Character Limit
Media Picker Data Type Definition
Member Picker Content
Default Block Editor behavior in the backoffice
Block Level Variance in the backoffice
Block Level Variance in the backoffice - with an unexposed block
Block List - Data Type Definition
Block List - Data Type Block Configuration
Block List - Add Content
Block List - Setup
Block List - example setup from Umbraco.com
Block List - Overlay editing
Block List - Inline editing
Block List - Add Content
Block Grid - Data Type Configuration
Block Grid - Data Type Block Configuration
Block Grid - Areas
Block Grid - Area Configuration
Block Grid - Add Content
Block Grid - Setup
Block Grid - example setup
Block Grid - Add Content Inline
Block Grid - Delete Content
Block Grid - Sorting Blocks
Scale blocks in the grid by dragging from the bottom-right corner.
Block Grid - Block Configuration
Block Grid - Result
Click on + next to the Data Types folder to create a new Data Type
Search for and choose the Rich Text Editor Tiptap UI
Click on the property used for rich Text in the Document Type editor
Search for the new Data Type and select it
Rich Text Editor - Data Type
Rich Text Editor - Content
Rich Text Editor - Data Type Block Fields
Rich Text Editor - Data Type Block Configuration
Rich Text Editor - Data Type
Rich Text Editor - Content Example
Rich Text Editor Styles
Add specific RTE styles
Edit CSS file directly in the backoffice
Choose stylesheets on the Data Type
The text "Hello World!" shows up after clicking the button
Enable the button in the rich text editor configuration
Toolbar: All options enabled
RTE Mode: Classic
Rich Text Editor Inline mode
Adding a language
Allowing Variance on properties
Allowing Variance on properties
How an invariant property looks when it is locked
Assign access to all or individial languages on the User Group
Content-Menu
Action Button
Document Blueprint Name Field
Create Button
New Document Blueprint
Settings Menu
Create Document Blueprint
Select Content Type
Document Blueprint Name Field
New Document Blueprint
Edit Document Blueprint
Create From Template
Select Template
Login screen
Time out screen
Sidebar
Create Document Type
CreateDoctype
Name the Document Type
Home icon
Allow as root
Create homepage
Creating groups
Adding a property
Choosing the Rich Text editor
Makrdown description example
Allow Child page
Exporting a Document Type
Importing a Document Type
Applying localization to a property
Applying localization to a Document Type
Localized document creation dialog
Localized document editing
Localized property validation
MediaArticle
MediaAudio
MediaVectorGraphics
MediaVideo
Rich Text Editor - Data Type Block Fields
Rich Text Editor - Data Type Block Configuration
Upload Media - Create Button
Upload Media - Media section
Drag and drop images directly into the content
Add images from the "Select media" dialog
Media Section - Cardview
Edit media item
Creating a Media Type
Adding properties
Permissions
Cropping images
Member Type Editor
Composition Member Type
Creating a Member Group
Assigning a Member Group
An API User in the backoffice
Scheduled publishing
Scheduled publishing
Add tab
Reorder tabs
Generic-tab
Composition Add Tab
User Groups Tab
Create User Group
Default permissions
Umbraco Data Type List
Dropdown List
Content Picker References
Parent, Siblings & Children
View Relations
Rendering dictionary item
Rendering dictionary item
Options menu with the Export feature
Review the Dictionary Items for import before confirming
Package Manager Settings
Register the nightly feed
Open the new feed menu
Adding the feed
Opening the Nuget Package Manager
Select the nightly NuGet feed
Find the version
Choose the feed
Find the version
Umbraco flexible load balancing diagram
Umbraco flexible load balancing diagram
Repeatable textstrings Data Type Definition
Repeatable textstrings Content

See the example below to see how a value can be added or changed programmatically. To update a value of a property editor you need the .

You can use dictionary items to translate the values of a Radiobutton List property editor in a multilingual setup. For more details, see the article.

See the example below to see how a value can be added or changed programmatically. To update a value of a property editor you need the .

Content Service
@if (Model.HasValue("colorTheme"))
{
    var value = Model.Value("colorTheme");
    <p>@value</p>
}
@if (Model.ColorTheme != null)
{
    var value = Model.ColorTheme;
    <p>@value</p>
}
@using Umbraco.Cms.Core.Services;
@inject IContentService Services;
@{
    // Get access to ContentService
    var contentService = Services;

    // Create a variable for the GUID of the page you want to update
    var guid = new Guid("796a8d5c-b7bb-46d9-bc57-ab834d0d1248");
    
    // Get the page using the GUID you've defined
    var content = contentService.GetById(guid); // ID of your page
    
    // Set the value of the property with alias 'colorTheme'
    content.SetValue("colorTheme", "water");
            
    // Save the change
    contentService.Save(content);
}
@{
    // Get the page using it's id
    var content = contentService.GetById(1234); 
}
@using Umbraco.Cms.Core.PublishedCache;
@inject IPublishedSnapshotAccessor _publishedSnapshotAccessor;
@{
    // Set the value of the property with alias 'colorTheme'
    content.SetValue(Home.GetModelPropertyType(_publishedSnapshotAccessor, x => x.ColorTheme).Alias, "water");
}

Setup

Find requirements for both local development and hosting as well as guides for installing and upgrading Umbraco CMS.

Backoffice

Learn about the different sections found in the Umbraco CMS backoffice and get an overview of the available features.

Data

Dive a little deeper and learn how to create different types of data directly from the Umbraco CMS backoffice.

Design

Get to know the different options the Umbraco CMS backoffice provides for designing your website.

Code

A high-level overview of working with some of the more advanced elements like services and notifications.

Cover
Cover
Cover
Cover
Cover

Fundamentals

Learn the basics of working with Umbraco CMS. How to install and setup your first site is also included in this section.

Install Umbraco CMS

Ready to get started with Umbraco? Head over to the Setup section to learn how to install Umbraco CMS.

Tutorials

Find detailed step-by-step guides on everything from building a site from scratch to implementing a custom maintenance page.

Cover
Cover
Cover
Rich text editor showing a custom button
Rich text editor configuration showing available options
Creating groups
Allow Child page
Upload Media - Create Button
Upload Media - Media section
Media Section - Cardview
Scheduled publishing
Scheduled publishing time
Radiobutton List Data Type Definition
Radiobutton List Content
Content Service
Creating a Multilingual Site

Tags

Schema Alias: Umbraco.Tags

UI Alias: Umb.PropertyEditorUi.Tags

Returns: IEnumerable<string>

The Tags property editor allows you to add multiple tags to a node.

Data Type Definition Example

Tag group

The Tag group setting provides a way to categorize your tags in groups. So for each category you will create a new instance of the Tags property editor and setup the unique category name for each instance. Whenever a tag is added to an instance of the tags property editor it's added to the tag group, which means it will appear in the Typeahead list when you start to add another tag. Only tags that belong to the specified group will be listed. If you have a "Frontend" group and a "Backend" group the tags from the "Frontend" group will only be listed if you're adding a tag to the Tags property editor configured with the "Frontend" group name and vice versa.

Storage type

Data can be saved in either Comma-Separated Values (CSV) format or in JSON format. By default data is saved in JSON format. The difference between using CSV and JSON is that with JSON you can save a tag, which includes comma separated values.

Content Examples

CSV tags

JSON tags

Tags typeahead

Whenever a tag has been added it will be visible in the typeahead when you start typing on other pages.

MVC View Example - displays a list of tags

Multiple items - with Modelsbuilder

@if(Model.Tags.Any()){
    <ul>
        @foreach(var tag in Model.Tags){
            <li>@tag</li>
        }
    </ul>
}

Multiple items - without Modelsbuilder

@if(Model.HasValue("tags"))
{
 var tags = Model.Value<IEnumerable<string>>("tags");
    <ul>
        @foreach(var tag in tags)
        {
            <li>@tag</li>
        }
    </ul>
}

Setting Tags Programmatically

You can use the ContentService to create and update Umbraco content from c# code, when setting tags there is an extension method (SetTagsValue) on IContentBase that helps you set the value for a Tags property. Remember to add the using statement for Umbraco.Core.Models to take advantage of it.

The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.

@using Umbraco.Cms.Core.Serialization
@using Umbraco.Cms.Core.Services
@inject IContentService Services;
@inject IJsonSerializer Serializer;
@{
    // Get access to ContentService
    var contentService = Services;

    // Create a variable for the GUID of the page you want to update
    var guid = Guid.Parse("9daf8585-6ab6-4ac2-98f0-28bf83aeea6e");

    // Get the page using the GUID you've defined
    var content = contentService.GetById(guid); // ID of your page

    // Set the value of the property with alias 'tags'. 
    content.SetValue("tags", Serializer.Serialize(new[] { "News", "Umbraco", "Example", "Setting Tags", "Helper" }));

    // Save the change
    contentService.Save(content);
}

Although the use of a GUID is preferable, you can also use the numeric ID to get the page:

@{
    // Get the page using it's id
    var content = contentService.GetById(1234); 
}

If Modelsbuilder is enabled, you can get the alias of the desired property without using a magic string:

@using Umbraco.Cms.Core.PublishedCache;
@inject IPublishedSnapshotAccessor _publishedSnapshotAccessor;
@{
    // Set the value of the property with alias 'tags'
    content.SetValue(Home.GetModelPropertyType(_publishedSnapshotAccessor, x => x.Tags).Alias, Serializer.Serialize(new[] {  "News", "Umbraco", "Example", "Setting Tags" }));
}

More on working with Tags

Dropdown

Schema Alias: Umbraco.DropDown.Flexible

UI Alias: Umb.PropertyEditorUi.Dropdown

Returns: String or IEnumerable<string>

Displays a list of preset values. Either a single value or multiple values (formatted as a collection of strings) can be returned.

Settings

Enable multiple choice

If enabled, editors will be able to select multiple values from the dropdown otherwise only a single value can be selected.

Add options

Options are the values which are shown in the dropdown list. You can add, edit, or remove values here.

Data Type Definition Example

Content Example

Single Value

Multiple Values

MVC View Example

Single item - without Modelsbuilder

@if (Model.HasValue("category"))
{
    <p>@(Model.Value<string>("category"))</p>
}

Multiple items - without Modelsbuilder

@if (Model.HasValue("categories"))
{
    var categories = Model.Value<IEnumerable<string>>("categories");
    <ul>
        @foreach (var category in categories)
        {
            <li>@category</li>
        }
    </ul>
}

Single item - with Modelsbuilder

@if (!Model.HasValue(Model.Category))
{
   <p>@Model.Category</p>
}

Multiple items - with Modelsbuilder

@if (Model.Categories.Any())
{
    <ul>
        @foreach (var category in Model.Categories)
        {
            <li>@category</li>
        }
    </ul>
}

Add values programmatically

The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.

@using Umbraco.Cms.Core.Services;
@inject IContentService Services;
@using Umbraco.Cms.Core.Serialization
@inject IJsonSerializer Serializer;
@{
    // Get access to ContentService
    var contentService = Services;

    // Create a variable for the GUID of the page you want to update
    var guid = Guid.Parse("32e60db4-1283-4caa-9645-f2153f9888ef");

    // Get the page using the GUID you've defined
    var content = contentService.GetById(guid); // ID of your page

    // Set the value of the property with alias 'categories'. 
    content.SetValue("categories", Serializer.Serialize(new[] { "News" }));

    // Save the change
    contentService.Save(content);
}

Although the use of a GUID is preferable, you can also use the numeric ID to get the page:

@{
    // Get the page using it's id
    var content = contentService.GetById(1234); 
}

If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string:

@using Umbraco.Cms.Core.PublishedCache;
@inject IPublishedSnapshotAccessor _publishedSnapshotAccessor;
@{
    // Set the value of the property with alias 'categories'
    content.SetValue(Home.GetModelPropertyType(_publishedSnapshotAccessor, x => x.Categories).Alias, Serializer.Serialize(new[] { "News" }));
}

Configuration

In this article you can learn about the different options you have for configuring the Rich Text Editor (RTE).

Toolbar

You have full control over which options should be available on the RTE.

In the example above, all 27 options have been enabled. These options include font styles like bold and italics, bullet lists, and options to embed videos and insert images.

You can customize the look of the toolbar:

  • Enhance the capabilities of the toolbar by enabling or disabling extensions.

  • Use the Toolbar designer to group together items and add additional rows if needed.

Dimensions

Define height and width of the editor displayed in the content section.

Maximum size for inserted images

Define the maximum size for images added through the Rich Text Editor.

If inserted images are larger than the dimensions defined here, the images will be resized automatically.

Overlay Size

Select the width of the link picker overlay. The overlay size comes in three sizes: Small, Medium, Large, and Full.

Available Blocks

Image Upload Folder

Images added through the RTE are by default added to the root of the Media library.

Sometimes you might want to add the images to a specific folder. This folder can be configured using the "Image Upload Folder" setting.

Ignore User Start Nodes

Some of the backoffice users might be restricted to a specific part of the content tree. When the "Ignore User Start Nodes" is checked, the users can pick any piece of content from the content tree, when adding internal links through the RTE.

Settings Dashboards

A guide displaying the options available in the Settings section in Umbraco CMS backoffice.

The Settings section of the Umbraco backoffice has its own set of default dashboards. In this article, you can get an overview of each dashboard available in the Settings section:

Published Status

The Published Status dashboard displays the status of your site in the Published Cache Status section alongside the Content and Media nodes value. The Caches section provides three options: Memory Cache, Database Cache, and Internals.

  • Memory Cache - Reloads the in-memory cache by entirely reloading it from the database cache. Use it when you think that the memory cache has not been properly refreshed.

  • Database Cache - Rebuilds the database cache that is the content of the cmsContentNu table. Use it when reloading the Memory Cache is not enough and you think that the database cache has not been properly generated.

  • Internals - Lets you trigger a NuCache snapshots collection.

As of Umbraco 15 IPublishedSnapshot, IPublishedSnapshotAccessor, and SnapshotCache are all obsolete.

Profiling

You can use the built-in performance profiler to assess the performance when rendering pages. To activate the profiler for a specific page rendering, add umbDebug=true to the querystring when requesting the page.

The Profiling dashboard provides a toggle option - Activate the profiler by default to keep the profiler active by default for all page renderings. You can use this option without having to set umbDebug=true on each page request. The toggle button sets a cookie named UMB-DEBUG in your browser, which then activates the profiler automatically.

Telemetry Data

The Telemetry Data dashboard is a consent screen that is used for collecting system and usage information from your installation. Here, you can see what type of data is being collected and even adjust the level of reporting. Currently, there are three levels available: Minimal, Basic, and Detailed.

Detailed is the default option where the data sent contains:

  • Anonymized site ID, Umbraco version, and packages installed.

  • Number of: Root nodes, Content nodes, Media, Document Types, Templates, Languages, Domains, User Group, Users, Members, and Property Editors in use.

  • System information: Webserver, server OS, server framework, server OS language, and database provider.

  • Configuration settings: Modelsbuilder mode, if custom Umbraco path exists, ASP environment, and if you are in debug mode.

Basic contains:

  • Anonymized site ID, Umbraco version, and packages installed.

Minimal contains:

  • Anonymized site ID only

You can see the specific data being sent on each of the levels directly in the Telemetry Data Dashboard.

Additionally, Telemetry Data also sends anonymized, analytical data on package usage in Umbraco. Having solid data on package usage is important for both package developers and the Umbraco ecosystem.

Tags Data Type Definition Example

There are built-in property value converters, which means you don't need to worry about writing them yourself or parse the JSON output when choosing "JSON" in the storage type field. Therefore on this page will work out of the box without further ado.

CSV tags example
JSON tags example
Tags typeahead example

More on working with Tags (query all of them) can be found at the

You can use dictionary items to translate the options in a Dropdown property editor in a multilingual setup. For more details, see the article.

Dropdown-data-type
Single dropdown content example
Multiple dropdown content example

See the example below to see how a value can be added or changed programmatically. To update a value of a property editor you need the .

Toolbar: All options enabled
Enhance and customize the capabilities of the Rich Text Editor toolbar

Blocks can be added as elements in the Rich Text Editor. Configuration and rendering of Blocks are described in the article.

Welcome

The Welcome dashboard is the first dashboard in the Settings section. Like all dashboards, it has a customizable view and links to different resources for developing your Umbraco website.

For more information about creating custom dashboards, see the article.

Examine Management

The Examine Management dashboard provides an overview of the Examine functionality available directly within the Umbraco backoffice. The Umbraco backoffice allows you to view details about your Examine indexes and searchers - all in one place. You can see which fields are being indexed and rebuild the indexes if there's a problem. You can also test keywords to see what results will be returned.

For more information about Examine Management, see the article.

Models Builder

Models builder is a tool that can generate a complete set of strongly-typed published content models for Umbraco. Models are available in both controllers and views. When using the Models Builder, the content cache does not return IPublishedContent objects anymore but returns strongly typed models implementing IPublishedContent.

The Models Builder dashboard displays the following information:

  • Details on how Models Builder is configured, that is: InMemoryAuto, Nothing, SourceCodeAuto, and SourceCodeManual.

  • Provides a button to generate models (if the models mode is SourceCodeManual mode only).

  • Reports the last error (if any) that would have prevented models from being properly generated.

For more information about Models Builder, see the article.

Health Check

Health Checks are used to determine the status of your Umbraco project. It is a handy list of checks to see if your Umbraco installation is configured according to best practices. It's possible to add your custom-built health checks.

For more information about Health Checks, see the articles.

For more information about MiniProfiler, see the section in the article.

For more information about Package Telemetry, see the section in the Umbraco 9.2 Release Blog Post.

Content Service
Blocks in Rich Text Editor
the last code example
Creating a Multilingual Site
Dashboards
Examine Management
Models Builder
Health Check
Package Telemetry
UmbracoHelper reference page
Debugging
MiniProfiler

The following example uses IPublishedSnapshotAccessor, which is obsolete in Umbraco 15 and will be removed in a future version. For more information, see the article.

The following example uses IPublishedSnapshotAccessor, which is obsolete in Umbraco 15 and will be removed in a future version. For more information, see the article.

The following example uses IPublishedSnapshotAccessor, which is obsolete in Umbraco 15 and will be removed in a future version. For more information, see the article.

The following example uses IPublishedSnapshotAccessor, which is obsolete in Umbraco 15 and will be removed in a future version. For more information, see the article.

The following example uses IPublishedSnapshotAccessor, which is obsolete in Umbraco 15 and will be removed in a future version. For more information, see the article.

The following example uses IPublishedSnapshotAccessor, which is obsolete in Umbraco 15 and will be removed in a future version. For more information, see the article.

The following example uses IPublishedSnapshotAccessor, which is obsolete in Umbraco 15 and will be removed in a future version. For more information, see the article.

The following example uses IPublishedSnapshotAccessor, which is obsolete in Umbraco 15 and will be removed in a future version. For more information, see the article.

The following example uses IPublishedSnapshotAccessor, which is obsolete in Umbraco 15 and will be removed in a future version. For more information, see the article.

The following example uses IPublishedSnapshotAccessor, which is obsolete in Umbraco 15 and will be removed in a future version. For more information, see the article.

The following example uses IPublishedSnapshotAccessor, which is obsolete in Umbraco 15 and will be removed in a future version. For more information, see the article.

The following example uses IPublishedSnapshotAccessor, which is obsolete in Umbraco 15 and will be removed in a future version. For more information, see the article.

The following example uses IPublishedSnapshotAccessor, which is obsolete in Umbraco 15 and will be removed in a future version. For more information, see the article.

The following example uses IPublishedSnapshotAccessor, which is obsolete in Umbraco 15 and will be removed in a future version. For more information, see the article.

The following example uses IPublishedSnapshotAccessor, which is obsolete in Umbraco 15 and will be removed in a future version. For more information, see the article.

The following example uses IPublishedSnapshotAccessor, which is obsolete in Umbraco 15 and will be removed in a future version. For more information, see the article.

The following example uses IPublishedSnapshotAccessor, which is obsolete in Umbraco 15 and will be removed in a future version. For more information, see the article.

The following example uses IPublishedSnapshotAccessor, which is obsolete in Umbraco 15 and will be removed in a future version. For more information, see the article.

The following example uses IPublishedSnapshotAccessor, which is obsolete in Umbraco 15 and will be removed in a future version. For more information, see the article.

The following example uses IPublishedSnapshotAccessor, which is obsolete in Umbraco 15 and will be removed in a future version. For more information, see the article.

The following example uses IPublishedSnapshotAccessor, which is obsolete in Umbraco 15 and will be removed in a future version. For more information, see the article.

The following example uses IPublishedSnapshotAccessor, which is obsolete in Umbraco 15 and will be removed in a future version. For more information, see the article.

The following example uses IPublishedSnapshotAccessor, which is obsolete in Umbraco 15 and will be removed in a future version. For more information, see the article.

The following example uses IPublishedSnapshotAccessor, which is obsolete in Umbraco 15 and will be removed in a future version. For more information, see the article.

Version specific upgrades
Version specific upgrades
Version specific upgrades
Version specific upgrades
Version specific upgrades
Version specific upgrades
Version specific upgrades
Version specific upgrades
Version specific upgrades
Version specific upgrades
Version specific upgrades
Version specific upgrades
Version specific upgrades
Version specific upgrades
Version specific upgrades
Version specific upgrades
Version specific upgrades
Version specific upgrades
Version specific upgrades
Version specific upgrades
Version specific upgrades
Version specific upgrades
Version specific upgrades
Version specific upgrades