Category Based Formatting in Kaboodle Announce

This blog post in support of the Kaboodle Announce web part which enables you leverage numerous enhanced options when it comes to viewing and managing SharePoint news and events.

If you don’t know what Kaboodle Announce can do for you, I suggest that you first head over to the product page to get the low down.

One of the really cool feature of Announce is the ability to use a category column value to control the icon and colour to be associated with a news or event item as can be seen in the screenshot below.

Announce4

This blog post is just explain in some greater detail, how to set this up.

Essentially, when the web part is configured with the graphic mode set to ‘Image or Tile’ or just ‘Tile’, or when the graphic colour mode is set to ‘Category Code’ then a category based formatting text box is displayed as highlighted below:

AnnouncePageImage4

This text box can be supplied with some JSON text that enables the mapping between the category value assigned to an item and an icon and its colouring.

The following example JSON is provided by default and is very simple to understand:

{

"Meeting" : {"BackgroundColor": "orange" , "Color" : "white", "Icon" : "DateTime"},

"Work hours" : {"BackgroundColor": "green" , "Color" : "white", "Icon" : "DateTime2"},

"Business" : {"BackgroundColor": "navy" , "Color" : "white", "Icon" : "Recent"},

"Holiday" : {"BackgroundColor": "purple" , "Color" : "white", "Icon" : "Vacation"},

"Get-together" : {"BackgroundColor": "chocolate" , "Color" : "white", "Icon" : "BeerMug"},

"Gifts" : {"BackgroundColor": "coral" , "Color" : "white", "Icon" : "Giftbox"},

"Birthday" : {"BackgroundColor": "red" , "Color" : "white", "Icon" : "BirthdayCake"},

"Anniversary" : {"BackgroundColor": "cadetblue" , "Color" : "white" , "Icon" : "RecurringEvent"},

"Other" : {"BackgroundColor": "grey" , "Color" : "white" , "Icon" : "Calendar"}

}

Basically, its just a JavaScript object which has a set of key values (the categories) that map to a configuration child object which has just 3 attribute/value pairs:

  • BackgroundColor:  The colour used for the image background.
  • Color:  The colour used for the icon font
  • Icon:  The name of an Office Fabric icon to be used for the category

Any named HTML colour, valid RGB or Hex colour value can be used for the BackgroundColor and Color attributes.  If you are using a light theme then we would recommend using fairly dark colours for the background and a simple white font colour, but the choice is completely up to you.

The set of possible icon names can be found by searching the set if icons in the Office Fabric CDN at the site https://developer.microsoft.com/en-us/fabric#/styles/icons.  There are some 600 icons to choose from.  Just hover over the icon to reveal its name.

AnnouncePageImage6

We strongly recommend that you do not edit the JSON text directly in the web part but rather copy the default JSON to Notepad or another appropriate text or web file editor of your choice.  Then simply update the JSON text as required and paste it back in the web part text box.

The content of the text box is validated and if something is not in the correct format this will be indicated in the web part as shown below:

AnnouncePageImage5

And that’s it!  Nothing to it really.

You can access the full product documentation here.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s