Configuring Block Editor Label Properties

When configuring a block, the label property allows you to 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. Example: My Block {{myPropertyAlias}} will be shown as: My Block FooBar.

You can also use more advanced expressions using AngularJS filters. Example: {{myPropertyAlias | limitTo:100}} or for a property using the Richtext editor {{myPropertyAlias | ncRichText | truncate:true:100}}.

It is also possible to use properties from the settings model by using {{$settings.propertyAlias}}.

In some cases, you might want to create a fallback label. This can be achieved using the following format: {{myProperty || $contentTypeName}}.

This example will show the name of the ElementType when the value of myProperty is not defined.

Useful Angular filters

As well as the default AngularJS filters, Umbraco ships with additional filters which are useful for setting the Label field of Block editors.

Example: mediaItemResolver

This is how you could use the filter for a Media Picker of the type Umbraco.MediaPicker3 with multiple images:

{{(myPropertyAlias[0].mediaKey | mediaItemResolver).name}}

The mediaKey is a Guid like c7a4526c-6b32-4665-a047-5b3e7256d973.

For the Media Name, the same could be achieved using ncNodeName like shown below:

{{myPropertyAlias[0].mediaKey ? ('umb://media/'+myPropertyAlias[0].mediaKey.split("-").join("") | ncNodeName) : 'No Image' }}

The ncNodeName value expects a UDI like umb://media/c7a4526c6b324665a0475b3e7256d973.

Custom filters

If the filters do not suit your needs, you can create custom filters by creating a plugin in App_Plugins and adding a filter module. You can see an example below:

1. Create a plugin by adding a folder inside App_Plugins called MyFilters

2. Inside the MyFilters folder add a package.manifest file containing:

{
    "name": "MyFilters",
    "version": "1.0.0",
    "allowPackageTelemetry": false,
    "javascript": [
        "/App_Plugins/MyFilters/myFilter.filter.js"
    ]
}

1. Add a myFilter.filter.js file containing:

angular.module("umbraco.filters").filter("myFilter", function () {
  return function (input, parameter1, parameter2, etc) {
      // Apply any custom logic to modify the output value and return a string
      return `My filter says: "${input}"`;
  }
});

1. Implement a block editor of your choice. When adding a label add {{ myFilter }} which is the property alias of the element type. The myFilter property has a textstring editor. When adding the content, the block editor will then display the data that you input.

Special variables