Umbraco 16.2 block grid label fallbacks with UFM Expressions

[stephen-sherman]

In Umbraco 13 I would commonly set up blocks with a configurable label to make them easier to distinguish in the editor UI.

For example, a “Rich Text” block would have

• A “label” property on the settings document type, which would fall back to…
• A “richText” property on the content document type that could be stripped of HTML and truncated, which would fall back to…
• The content type name (i.e. “Rich Text”)

The block definition label would look something like this:

{{$settings.label ? ($contentTypeName + ': ’ + $settings.label) : (richText ? ($contentTypeName + ': ’ + (richText | ncRichText | truncate:true:32)) : $contentTypeName)}}

And produce results like this:

• Rich Text: Product description
• Rich Text: Lorem ipsum dolor sit amet, cons…
• Rich Text

I’m trying to replicate this in Umbraco 16.2 with the newly introduced Umbraco Flavored Markdown (UFM) JavaScript-like expressions, but don’t seem to be able to get anywhere close.

• Is it possible to nest UFM expressions?
• Has anyone been able to get something like this working?
• What alternative approaches would you consider for providing blocks with descriptive labels?

[deepakaggrawal]

You can usually get two-level fallbacks, e.g.:

{{$settings.label || (richText | ncRichText | truncate:true:32) || contentTypeName}}

This works if:

• $settings.label exists → show that.

• Otherwise → try richText (stripped + truncated).

• Otherwise → fallback to content type name.

But… formatting the prefix "Rich Text: " is trickier, since UFM doesn’t yet allow interpolating conditionals mid-string. You can sometimes cheat with concatenation:

{{contentTypeName + ': ' + ($settings.label || (richText | ncRichText | truncate:true:32) || '')}}

…but if all fallbacks are empty, you’ll end up with a trailing Rich Text: .

[leekelleher]

Hi Stephen, in answer to your questions…

@stephen-sherman

Is it possible to nest UFM expressions?

Not currently (in v16.2). It’s something we’re looking into for a future release.
(It’s an evolving feature, to get iterative feedback).

@stephen-sherman

What alternative approaches would you consider for providing blocks with descriptive labels?

The current answer would be to develop custom UFM components (web components) that you can tailor to your exact needs.

[stephen-sherman]

Sorry @deepakaggrawal, that looks to be the Angular-based Umbraco 13 syntax. I’ve got a pattern for that already, what I’m looking for is how to recreate this in Umbraco 16.2.

Thanks @leekelleher . My feedback would be that it’s currently a bit limited compared to Umbraco 13 - the ideal would be feature parity? In the meantime I’ll look into whether custom UFM components will fit my needs!