We have moved!

You are currently looking at documentation for Umbraco 8 and older versions.
Go to docs.umbraco.com/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/label-property-configuration for documentation for Umbraco 9 and newer versions.

    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
    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

    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.

    An example package.manifest file is:

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

    With myFilter.filter.js 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}"`;
  }
});

    Special variables

    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)