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.
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:
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.
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:
And that’s it! Nothing to it really.
You can access the full product documentation here.
