Umbraco meets Kanban - Custom backoffice extensions for Umbraco 17

Umbraco's power has always been in it's extensibility, and the latest developments have been true to that.

A few weeks ago, I had an idea to represent the content beneath a parent node as either a kanban board or a calendar, leveraging several properties we have on the content that would lend itself to very nicely to some sort of status display.  Dates, a Status list, and other details that could be found in just about any project view.

For some context, we built our own booking system for Your Space - a boutique co-working space on the border of Queensland and New South Wales in Tweed Heads, Australia, and for some time now I've been wanting a better way to manage the bookings, which are stored as Content Nodes in Umbraco, with dashboards that gave us at-a-glance views so we could see who was coming in when, what resource they had booked, whether additional actions were required, etc.

I also wanted to explore just how far I could take this Umbraco package - could I override Umbraco's ListView?  Could I turn it into a Dashboard, or a Content App?

Could it be used to manipulate content nodes in an entirely different way?  Perhaps we could create a drag and drop interface for updating specific content properties.

Would I be able to override certain elements of the User Interface - a pager doesn't make sense in a kanban board, or a calendar for example.

These are some of the questions I had before I embarked on this little adventure.  And the result was quite satisfying...

Setting Up

There are 3 ways these UI elements can be used:

• As a View on a Collection List View

• As a Content App

• As a custom Dashboard or section Workspace

Each view is highly configurable via a custom DataType.  The video above gives a little detail about that, and full instructions are available in the readme accompanying the package, and on the Umbraco Marketplace.

Configuring a Collection list View to display either the Calendar or Kanban board is achieved by adding the appropriate view, then configuring the View properties in the Kanban Data Type App that becomes available once it's been added.

From here, you can edit or add a new DataType for the Kanban Board or Calendar, which offers a rich set of customisation options to allow you to set up your views any way you like.

Once you've selected a Lane property for a Kanban Board, or a Category property for a Calendar, you have the option to configure your categories or lanes with individual icons, colors, and labels, as well as rearrange them to suit your requirements.

You can also set a Date property, and optionally an End Date property for calendars as well as display additional information on the cards.  For the Kanban board, you can also choose to display child items on a card.

Using as a Content App

Both views can be configured as Content Apps instead of associated with a Collection List View - simply create a Data Type and configure the Content App settings for the Content Type you want to display it for, and it will automatically show up for any Content Node based on that Content Type.

Advanced configuration - Embedded Views

The package has been set up so that both views can be embedded into a custom Workspace - this take a little Umbraco backoffice coding to implement, but can be done in as little as 5 lines of code...

import "@umbraco-community/kanban"; 
 
@customElement("calendar-workspace") 
export class CalendarWorkspaceElement extends UmbLitElement { 
  override render() { 
    return html`
      <umb-community-kanban-standalone-calendar
         parent-id=${this._parentId}
         config-id=${this._configId}
      ></umb-community-kanban-standalone-calendar>
    `;
  } 
}

The calendar or kanban board requires two parameters:

• parent-id - the id of the Content node containing the items to display, and

• config-id - the id of the Data Type used to configure the board.

That's it - add whatever styling and other elements you want around it and you're done.

This project started life filling a need, like many great open source packages do, and while it serves what we require of it.  You may have other ideas though.  If you'd like to have a chat about what Umbraco can do for you, or would like some help getting over that initial hurdle of defining what it should do, how it should look, and how to go about it, why not reach out and let us help you with the success of your project.

We would love to help!