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 Richtext editor {{myPropertyAlias | ncRichText | truncate:true:100}}
.
It is also possible to use properties from the settings model by using {{$settings.propertyAlias}}
.
Useful Angular filters
As well as the default AngularJS filters, Umbraco ships with some additional filters which are useful for setting the Label field of Block editors.
Filter | Description | Property type | Parameters |
---|---|---|---|
ncNodeName | Gets the name of a node | Umbraco node | |
ncRichText | Strips HTML | Richtext editor | |
AngularJS native truncate | String | n: maximum length of the string | |
Umbraco's richer truncate function | String | wordwise: boolean to indicaste whether to truncate a string mid-word or not
max: maximum length of the string
tail (optional): string to indicate a truncated string, " | |
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. " |
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:
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
calledMyFilters
Inside the
MyFilters
folder add apackage.manifest
file containing:
Add a
myFilter.filter.js
file containing:
Implement a block editor of your choice. When adding a label add
{{ myFilter }}
which is the property alias of the element type. ThemyFilter
property has atextstring
editor. When adding the content, the block editor will then display the data that you input.
Special variables
Variable | Description |
---|---|
| The 1-based index of this block item in the current block list |
| Provides access to the settings model for the block (if configured) |
Last updated