I like the notification badges that iOS displays on my iPhone's and iPad's applications.
I thought I'd recreate the same in ServiceNow. After all ServiceNow is as much capable as iOS...
The below UI Page is an attempt to display 'My Work', 'My Groups Work' and 'My Approvals' as a nice badges widget on one's homepage for quasi-realtime tracking of one's tasks.
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.
<g:evaluate>
var user = gs.getUserID();
user;
</g:evaluate>
<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
<g2:evaluate var="jvar_my_work_count">
var gr = new GlideRecord("task");
gr.addQuery("active", "true");
gr.addQuery("state", "!=", "-5");
gr.addQuery("assigned_to", "$[user]");
gr.query();
gr.getRowCount();
<j2:set var="jvar_my_work_link" value="task_list.do?sysparm_query=active=true^state!=-5^assigned_to=$[user]^EQ"/>
</g2:evaluate>
Tasks assigned to the user's groups
<g2:evaluate var="jvar_my_groups_work_count">
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();
<j2:set var="jvar_my_groups_work_link" value="task_list.do?sysparm_query=active=true^state!=-5^assigned_to=^assignment_group=javascript:getMyGroups()^EQ"/>
</g2:evaluate>
Pending user approvals
<g2:evaluate var="jvar_my_approvals">
var gra = new GlideRecord("sysapproval_approver");
gra.addQuery("state", "requested");
gra.addQuery("approver", "$[user]");
gra.query();
gra.getRowCount();
<j2:set var="jvar_my_approvals_link" value="sysapproval_approver_list.do?sysparm_query=state=requested^approver=$[user]^EQ"/>
</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.
<ul>
<div id="menu">
<li><a href="$[jvar_my_work_link]">My Work</a><div id="my_work" class="badge">$[jvar_my_work_count]</div></li>
<li><a href="$[jvar_my_groups_work_link]">My Groups Work</a><div id="my_groups_work" class="badge">$[jvar_my_groups_work_count]</div></li>
<li><a href="$[jvar_my_approvals_link]">My Approvals</a><div id="my_approvals" class="badge">$[jvar_my_approvals]</div></li>
</div>
</ul>
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.
<style>
#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;
}
</style>
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.
1 Comment
