Belissima Backoffice: Property Descriptions

I'm sure you're already aware of property descriptions! They’re useful to explain a property when a name doesn't give enough detail. The property descriptions have accepted markdown for a long time now (although allowed features have changed over time!). And because it’s markdown, that means we can use HTML too. And because its HTML it means we can also make use of web components, like UUI!

, by Joe Glombek

Property Descriptions: Read more

One of the features that's changed in recent versions is the "read more" functionality. In earlier versions of Umbraco, --- rendered a read more link.

Short description

---

Descriptions below a `---` were rendered behind a "Read More" link in v9-13.

This is no longer the case, --- renders a horizontal rule element (as it should!) but we can recreate the read more functionality with modern HTML.

Short description

---

Three dashes renders a horizontal rule.

<details>
<summary>Read more</summary>

We have to use the native HTML `details` element for modern Umbraco.

</details>

We can even take that a step further - in this example I’m using: markdown to render italic text, a code sample and a hyperlink; HTML to render a <details> element to recreate the read more functionality; and because UUI uses web components, which are HTML, we can bring UUI elements into the descriptions too, so I’ve got a UUI Umbraco help icon in there too to make the property description rich and intuitive without taking too much space.

Should search engines and other crawlers index this page and serve them up as search results?
<details>
<summary>
  <uui-icon name="icon-help-alt" label="More details"></uui-icon> 
</summary>

This sets the *index* aspect of the [`robots` meta tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/robots)

</details>

A screen capture of the markdown rendered in the backoffice with a user clicking on the question-mark help icon to expand further details.

I use a few cookies to make this website work well.

My hosting provider uses "ARRAffinity" to ensure a consistent web browsing experience when load balancing.

Embedded content (e.g. tweets and maps) in my blog may use their own cookies for tracking purposes.

By accepting cookies I store this preference in your browser using a technology similar to cookies called localStorage.