UI Pages to the rescue

I started by creating a UI Page that will host my notification badges.

Name: render_gadget_tasks_badges

Category: Home Pages

HTML: all the Jelly/HTML/Javascript/CSS that constitutes the UI Page is detailed in order below.

Jelly Phase One

We ask Jelly to generate in Phase 1 two variables that represent currently logged in user and their groups.Those two variables will be useful in the next phase.

var user = gs.getUserID(); user;/g:evaluate var groups = gs.getUser().getMyGroups(); groups;/g:evaluate

Jelly Phase Two

In Jelly's phase two we query the task table for the user's pending work (tasks assigned to them or tasks assigned to their groups or approvals pending).

Tasks assigned to the user

var gr = new GlideRecord("task"); gr.addQuery("active", "true"); gr.addQuery("state", "!=", "-5"); gr.addQuery("assigned_to", "$[user]"); gr.query(); gr.getRowCount(); /g2:evaluate

Tasks assigned to the user's groups

var temp1 = "$[groups]"; var temp2 = temp1.replace("[", " "); var temp3 = temp2.replace("]", " "); var grp = new GlideRecord("task"); grp.addQuery("active", "true"); grp.addQuery("state", "!=", "-5"); grp.addQuery("assigned_to", ""); grp.addQuery("assignment_group", "IN", temp3); grp.query(); grp.getRowCount(); /g2:evaluate

Pending user approvals

var gra = new GlideRecord("sysapproval_approver"); gra.addQuery("state", "requested"); gra.addQuery("approver", "$[user]"); gra.query(); gra.getRowCount(); /g2:evaluate

The HTML squeleton

Nothing can get much simpler. A simple unordered list with three items.We can even add a hyperlink to each item which will allow us to click on it and go to the corresponding list.

My Work
$[jvar_my_work_count]
My Groups Work
$[jvar_my_groups_work_count]
My Approvals
$[jvar_my_approvals]

Styling the baby

In order to make the widget look like having notification badges we can't escape the power of CSS.I will not go into the details of the CSS styles and will let curious minds reverse engineer them.The most important one is the .badge style that allows us to make extremely rounded rectangles that become circles representing iOS style bades.

#menu { float: left; list-style-type: none; margin: 0 25% 30px 25%; width: auto; position: relative;}#menu li { display: inline; float:left; position: relative; text-transform: uppercase; font: bold 12px Verdana, Arial, Helvetica; color: #f1f1f1; border: 1px solid #1240AB; border-radius: 6px; background-color: #1240AB; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1240AB), to(#06266F)); background: -webkit-linear-gradient(top, #1240AB, #06266F); background: -moz-linear-gradient(top, #1240AB, #06266F); background: -ms-linear-gradient(top, #1240AB, #06266F); background: -o-linear-gradient(top, #1240AB, #06266F); box-shadow: 2px 2px 2px 2px #ccc; margin-top: 25px; margin-left: 10px; padding-left: 5px; padding-top: 2px;}#menu li a { color: #f1f1f1; text-decoration: none;}.badge { background: radial-gradient( 5px -9px, circle, white 5%, red 26px ); background: -moz-radial-gradient( 5px -9px, circle, white 5%, red 26px ); background: -ms-radial-gradient( 5px -9px, circle, white 5%, red 26px ); background: -o-radial-gradient( 5px -9px, circle, white 5%, red 26px ); background: -webkit-radial-gradient( 5px -9px, circle, white 5%, red 26px ); background-color: red; border: 2px solid white; border-radius: 12px; box-shadow: 1px 1px 1px black; color: white; font: bold 15px/13px Helvetica, Verdana, Tahoma; height: 16px; padding: 4px 3px 0 3px; text-align: center; min-width: 14px; float: right; margin: 6px; position: relative; top: 20px;}

At this stage you can click on the 'Try It' button to preview the how the UI Page looks like.

Creating the widget

In order to be able to add this UI Page on a home page, we need to wrap it in a widget.Create a new UI Widget:

Name: Tasks Badges

Renderer Type: Javascript

Script:

function sections() { return { 'Widget' : { 'type' : 'tasks_badges' } };}function render() { var type = renderer.getPreferences().get("type"); var gf = new GlideForm(renderer.getGC(), "render_gadget_" + type, 0); gf.setDirect(true); gf.setRenderProperties(renderer.getRenderProperties()); return gf.getRenderedPage();}function getEditLink() { return "sys_ui_page.do?sysparm_query=name=render_gadget_" + renderer.getPreferences().get("type");}

Adding the widget to a home page

The above widget can then be added to a home page as per the below screenshot:

The final result

The screenshot below shows what the final result looks like on a user homepage. Setting a 5 minute refresh cycle on the homepage guarantees a quasi-realtime refresh of the widget.

I hope this post proves useful to you.

Disclaimer: The views expressed in this blog's posts do not reflect the positions or opinions of ServiceNow. They should be understood as the personal opinions of the author. No information on this blog will be understood as official. For more authoritative information, please refer to the ServiceNow Wiki.