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}}
.
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 | |
limitTo | AngularJS native truncate | String | n: maximum length of the string |
truncate | 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, " … " by default |
umbWordLimit | Truncates to a number of words (rather than characters) | String | n: maximum number of words in string |
umbCmsTitleCase | Converts a string to title case | String | |
umbCmsJoinArray | 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 |
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:
{% hint style="warning" %}
If you do not have an /App_Plugins
folder, you can create it at the root of your project.
{% endhint %}
- Create a plugin by adding a folder inside
App_Plugins
calledMyFilters
- Inside the
MyFilters
folder add apackage.manifest
file containing:
{
"name": "MyFilters",
"version": "1.0.0",
"allowPackageTelemetry": false,
"javascript": [
"/App_Plugins/MyFilters/myFilter.filter.js"
]
}
- 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}"`;
}
});
- 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.
Variable | Description |
---|---|
$index |
The 1-based index of this block item in the current block list |
$settings |
Provides access to the settings model for the block (if configured) |