A richer Block List view in the Umbraco back office

Content blocks, which were introduced with Umbraco v8, are a great way of constructing your own page layouts using autonomous, self-sufficient content structures that can be placed in any quantity and order inside a page and be separately configured.

At DotSee, we adopted the idea of content blocks even before they were implemented on Umbraco, starting with the uMazel Starter Kit for Umbraco v7, where we used a folder under each page that contained "blocks" that were then injected into the page to provide similar functionality and going on to implement actual blocks on the v8 version. 

Blocks allow you to "synthesize" a page exactly how you would like, without the need for complex templates and multi-screen-long property lists on the main document. They can be used for things like banners, forms, FAQs, galleries, lists, practically whatever can be used on a page. 

They can also have sub-blocks, for example, you can have an accordion with accordion entries, or a gallery with images, or a team list with each team member being a different sub-block. And that's where you need to be more demanding about the info that's being displayed about blocks in the Umbraco back office.

The default block list display in the back office just displays the block's icon and label (the label can be an AngularJS filter expression and get its value from one of the block's fields). There is no information about any sub-items, and good luck trying to find the doctype alias of the block being used. It's just not enough if you're making heavy use of multiple blocks.

The good thing is each Block Element can have a custom view for rendering in the back office. So we sat down with Vassilis, our front-end master, and created a somewhat more enhanced generic version of the default view that allows for blocks to display the following:

  • Their doctype alias (so you can easily know which is which)
  • Their main image (if they have one)
  • The number of items they contain (if they have sub-items)
  • A preview of their sub-items with their title and image (if applicable).
  • And, also, based on a special property that we add to all our blocks, a different, grayed-out, minimal view when a block is flagged as "disabled". This is something that we have added as functionality in our blocks, you won't find it in default Umbraco implementations.

Here's a sample of the end result:

142765239 06C1b0e7 3E8a 46Ed 8A8a C7a7b9f9471a

We use a configuration file to set up the aliases for all the properties used:

Specifically, there are 4 property aliases you can set:

  • itemsAlias: The property alias of your sub-items block list (if your block contains such sub-items)
  • titleAlias: The property alias for the title of each sub-item
  • thumbsAlias: The property alias for the image of each sub-item
  • mainImageAlias: The property alias for the block's main image (if any)

There are also two default properties:

  • defaultItemsAlias: The default property alias for any sub-items block list for any block not explicitly declared in the JSON file.
  • defaultTitleAlias: The default property for sub-item titles for any block not explicitly declared in the JSON file.

The main controller (code not listed here to make things a bit smaller) takes care of loading the vm with everything necessary (such as the number of sub-items, main image, etc.), based on the configuration on the JSON file, and passes it over to the main view:

The main view calls two distinct components, each with their own view, for disabled and non-disabled blocks. Here's the view for the non-disabled blocks:

For all images, we are using the default thumbs that have already been generated once so that we don't load the server with more processing and also to take advantage of any browser-based caching.

Here's the full thing, together with instructions, if you want to incorporate it into your own projects (or if you need to fix my awful AngularJS implementation, apologies!): https://github.com/sotirisf/UmbracoCustomBlockview

Happy coding!
Banner Planes Red

Looking for Umbraco
Development & Support Services?

Get up to 25% off standard prices when you combine a Monthly Support plan with Retainer package and / or Hosting. 

 

Check out our plans