Configuring Block Editor Label Properties
Last updated
Last updated
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.
As well as the , Umbraco ships with additional filters which are useful for setting the Label field of Block editors.
ncNodeName
Gets the name of a node
Umbraco node
ncRichText
Strips HTML
Richtext editor
mediaItemResolver
Retrieves a Media Item object
Media Picker
AngularJS native truncate
String
n: maximum length of the string
Umbraco's richer truncate function
String
wordwise: boolean to indicate whether to truncate a string mid-word or not
max: maximum length of the string
tail (optional): string to indicate a truncated string, "…
" by default
Truncates to a number of words (rather than characters)
String
n: maximum number of words in string
Converts a string to title case
String
Joins an array into one string
Array (of string or object)
separator: string used to join values together, e.g. ",
"
prop (optional): string key indicating which property to join when used on an array of objects
This is how you could use the filter for a Media Picker of the type Umbraco.MediaPicker3
with multiple images:
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:
The ncNodeName
value expects a UDI like umb://media/c7a4526c6b324665a0475b3e7256d973
.
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:
If you do not have an /App_Plugins
folder, you can create it at the root of your project.
Create a plugin by adding a folder inside App_Plugins
called MyFilters
Inside the MyFilters
folder add a package.manifest
file containing:
Add a myFilter.filter.js
file containing:
$index
The 1-based index of this block item in the current block list
$contentTypeName
The name of the Element Type used for the Block
$settings
Provides access to the settings model for the block (if configured)
$layout
Provides access to the layout model for the block (columnSpan and rowSpan)
Implement a 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.