"Homepage" dashboard widgets

As promised, here are the custom homepage dashboard widgets I’ve been promising for most of March. To “install” them you will need to copy the contents of the zip into CustomSpace and run the homeWidgets.js when the “home” dashboard page is loaded. I highly recommend using loadScript for this purpose. 

Welcome Message

This is a welcome message that addresses your users, but they they can dismiss by clicking the X. To create/configure the widget, add an HTML Widget to a dashboard page and add a div with a class of “welcomeMessage” and supplying the message text between the opening and closing of the div tag:

To edit the welcome message after the widget has been created, you will have to edit the page and then either cancel or save the edit and then click the edit page button again to be able to access the cog so the widget can be edited. This is a consequence of editing the header of the widget to add the dynamic message and the x for dismissing.

Search

This is a search widget that allows you to search KB articles only, Request Offerings only, or both KB articles and Request Offerings. To create/configure the widget add an HTML widget to your dashboard page and add a div with a class of “homeSearch”.

To make the search for Request Offerings only, add an additional class of “ro”. Similarly, to make the search only for KB articles give it a class of “kb”.

Top Requests

This is a widget to display the top requests as determined by popularity. To set the popularity of a request offering see this KB Article. To create/configure the Top Requests widget, add an HTML widget and give it a div with the class “topRequests”. The Top Requests widget can be horizontal (for wider layout columns) or vertical. To make it horizontal, supply the class of “horizontal”. To make it vertical, give it a class of vertical.

Work Item Card Widget

The Work Item card widget can be used to display work items for “My Work” or “My Requests.” To add a Work Item card widget add an HTML widget to a dashboard page and give it a div with the class “wiCardWidget”. To make it a “My Work” widget add the class “mywork” (note the case). To make it a “My Requests” widget, add the class “myrequests”.

Service Catalog Browser

The Catalog browser allows you to browse through your published Request Offerings by Category and then by Service Offering. To create/configure the Catalog Browser add an HTML widget with a div class of “homeCat”.

Top Articles

The Top Articles widget is for displaying the top articles based on popularity or views. The popularity can be set on the individual articles. To create/configure the Top Articles widget, add an HTML widget with a div class of “topArticles”. To get the top articles by popularity use the class “featured”. To get the top articles by views use the class “viewed.”

Favorite Requests

The Favorite Requests widget will display the user’s selected favorite articles. To create/configure the Favorite Requests widget, add an HTML widget with a div class of “favRequests”. Like the Top Requests widget, this one can be horizontal or vertical depending on which class you supply.

After adding a widget, you will definitely have to reload the page. Before reloading, the widgets will look a bit odd, but once the page is reloaded and the code runs, they should look ok. I really hope the community will find these useful! I'd love to see screenshots of people using them on their own custom home pages!

homeWidgets.zip
4.93KB

UPDATE - This is now available as an Add-In

https://kb.cireson.com/article/user-guide-add-in-homepage-widgets/2619

7
71 replies