Planner Inspired SharePoint Task Cards

SharePoint List Formatting makes it easier than ever to customize the look and feel of your SharePoint list data. There are many samples and ideas to get you started on the Github repo: https://github.com/SharePoint/sp-dev-list-formatting/

You can apply this formatting by inserting blocks of JSON which manipulate the UI of your list items. I’ve been doing a lot of work with Adaptive Cards and also working with Planner a bit which uses an adaptive card type interface to display data. I wanted to see if I could take a similar look and feel and apply it to my SharePoint list using View Formatting.

A Look At Adaptive Cards

Adaptive cards are definitely having a moment right now. All an Adaptive Card really is, is a way to pass data in a templated card like format. You’ve probably seen these Adaptive Cards used in Flow to send approvals or messages to Microsoft Teams in an Adaptive Card format. An example of this is below:

This Adaptive Card like look can be mimicked in SharePoint with some help from List Formatting. You can read more about Adaptive Cards here: https://adaptivecards.io/

Looking at Planner

Planner is a task management app in O365. It follows a Kanban type approach letting your organize tasks into buckets (Not Started, In Progress, Complete, etc) and drag and drop the tasks to move them to a different bucket as they progress. An example of what a task card looks like in Planner is below:

While we can’t mimic the drag and drop type functionality and the exact grouped view it offers, we can mimic the Task Card look and feel for our SharePoint Task items which is what we’re going to do with SharePoint list formatting.

Formatting the SharePoint View

Now that we know the look and feel we’re going for let’s take a look at how to implement this in SharePoint. I started with a SharePoint Task list as the basis. Let’s take a look at the setup for the list before we apply View Formatting:

As you can see I’m using the basic built-in fields for a Task List: Title, Due Date, Assigned To, Status. I’ve already created the code to apply the Planner/Adaptive Card Style Format which you can download from my Github here: https://github.com/aprildunnam/SPJS/tree/master/planner-inspired-task-card

There is a ReadME file which explains what fields are needed for this sample to work. To apply the formatting, open up the .JSON file in the GitHub and copy the contents. Navigate to your SharePoint list and click the View Dropdown in the right hand corner then select “Format this View”. That will open up a textbox to the right which you can paste that code in and click save. Once you do that, your list will be formatted like so:

This sample can be modified to fit your needs. You can easily change the fields which show and add additional fields as needed.