# 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](https://docs.angularjs.org/api/ng/filter), Umbraco ships with 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             |                                                                                                                                                                                                               |
| mediaItemResolver                                                                                  | Retrieves a Media Item object                           | Media Picker                |                                                                                                                                                                                                               |
| [limitTo](https://docs.angularjs.org/api/ng/filter/limitTo)                                        | AngularJS native truncate                               | String                      | n: maximum length of the string                                                                                                                                                                               |
| [truncate](https://apidocs.umbraco.com/v13/ui/#/api/umbraco.filters.filter:truncate)               | Umbraco's richer truncate function                      | String                      | <p>wordwise: boolean to indicate whether to truncate a string mid-word or not<br>max: maximum length of the string<br>tail (optional): string to indicate a truncated string, "<code>…</code>" by default</p> |
| [umbWordLimit](https://apidocs.umbraco.com/v13/ui/#/api/umbraco.filters.filter:umbWordLimit)       | Truncates to a number of words (rather than characters) | String                      | n: maximum number of words in string                                                                                                                                                                          |
| [umbCmsTitleCase](https://apidocs.umbraco.com/v13/ui/#/api/umbraco.filters.filter:umbCmsTitleCase) | Converts a string to title case                         | String                      |                                                                                                                                                                                                               |
| [umbCmsJoinArray](https://apidocs.umbraco.com/v13/ui/#/api/umbraco.filters.filter:umbCmsJoinArray) | Joins an array into one string                          | Array (of string or object) | <p>separator: string used to join values together, e.g. "<code>,</code> "<br>prop (optional): string key indicating which property to join when used on an array of objects</p>                               |

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

{% code overflow="wrap" %}

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

{% endcode %}

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:

{% hint style="warning" %}
If you do not have an `/App_Plugins` folder, you can create it at the root of your project.
{% endhint %}

1. Create a plugin by adding a folder inside `App_Plugins` called `MyFilters`
2. Inside the `MyFilters` folder add a `package.manifest` file containing:

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

3. Add a `myFilter.filter.js` file containing:

```javascript
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}"`;
  }
});
```

4. Implement a [block editor](/umbraco-cms/13.latest/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor.md) 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

| Variable           | Description                                                                |
| ------------------ | -------------------------------------------------------------------------- |
| `$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) |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.umbraco.com/umbraco-cms/13.latest/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/label-property-configuration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
