Service Portal missing panel styles
December 13, 2016, 10:44 am - James Farrer
In ServiceNow and Service Portal there are some great features in a lot of places. There are, however, a number of rough edges since it's still pretty new. One of the places that I've found is a little rough is with the CSS. Many of the default widgets delivered by ServiceNow use the bootstrap panel structure. This gives a pretty nice format for setting up blocks with headings.
The problem is that most of the brand colors are not supported. It instead uses the default Bootstrap colors. The solution to this is to add the following styles to the widget CSS. It could also be added to the page CSS if you don't want to modify the widget.
This code utilizes the brand colors set in the Branding Editor to apply the colors.
/* add styles to support brand colors in basic panels */
.panel-danger > .panel-heading {
color: $panel-bg;
background-color: $brand-danger;
border-color: $brand-danger;
}
.panel-warning > .panel-heading {
color: $panel-bg;
background-color: $brand-warning;
border-color: $brand-warning;
}
.panel-success > .panel-heading {
color: $panel-bg;
background-color: $brand-success;
border-color: $brand-success;
}
.panel-info > .panel-heading {
color: $panel-bg;
background-color: $brand-info;
border-color: $brand-info;
}
"Your" vs. "My" and interacting with the user
November 16, 2016, 2:33 pm - James Farrer
If you're building a self-service website, when dealing with the stuff relating to the user, you should most definitely use "Your" not "My".
I've done a lot of work in the self-service side of ITSM over the years. Much of this has been with ServiceNow as the environment. I've also dabbled in various levels of web development and interface design. A very common mistake and point of argument is that the menu link should be "My [stuff]". I'm not sure where this got started but I'm guessing it has something to do with wanting to make people feel at home and in control of the situation when dealing with a website. Either that or someone was lazy and just not thinking things through.
When I am dealing with a website me, my stuff, my computer, etc. is on my side of the network connection. The company, website, forms, information, etc. is another entity that I am having a dialog with.
Flip that around and as a website developer I'm creating the dialog between the organization or company I represent and the end user. This means that when I'm giving instructions I will say "Here's what you need to do..." and anything that discusses the organizations thoughts, interests, etc. should take a first person narrative of "we", "us", "our", or in the case of a personal blog or something like that, "I", "me", and "my".
I ran into a page today where I realized there was a sentence explaining how something works with "you can go to...and this is where you'll find...". Right below that there was a block label "My Approvals" where the approvals of the end user, not the organization, can be found. It seems like a pretty minor thing and enough websites have flip-flopped with these that most people aren't going to think too much of it but somewhere in the back of their mind something is going to be saying "hey, something is not quite right here".
As an example of a site that has done this the right way, check out Amazon and their numerous links to "Your Account", "Your Orders", etc.
On a somewhat related note, I've also heard discussions on what form to put documentation for a system into. Should it be first person? Or perhaps an awkward neutral set of instructions that's cold and strictly business? This one often isn't quite as straight forward but I always appreciate the information that's written as more of an honest dialog that clearly articulates who is talking and who is listening. Making things a little more personal in a formal business world can often ease a little stress of a situation since it's just more natural.
So to sum it all up, here is my post that will hopefully persuade you to make your sites better at telling me when there is stuff relating to me with a link titled "Your stuff". Just to be as clear as mud.
Javascript in Helsinki - ECMA3 vs ECMA5
May 27, 2016, 1:51 pm - James Farrer
I was pleasantly surprised to hear that ECMA5 will now be supported in the Helsinki release of ServiceNow. For most people this won't mean much of anything. I was excited to hear about the change since there were a few things I had noticed missing when working with server side javascript. Most notably the indexOf operation on arrays.
Today I was testing out some functionality in Helsinki and ran into a really ugly error with something that worked perfectly fine in Geneva.
After a little digging I discovered that the format for JSON was updated as well and is more strict now. So if you're doing any parsing of JSON in ServiceNow, make sure your property names use double quotes instead of single quotes and you'll save yourself some trouble.
As an example, this:
{'incident':'caller_id'}
is incorrect. Instead you should use this:
{"incident":"caller_id"}
Simple Variable Summary
January 13, 2016, 2:52 pm - James Farrer
I ran into a problem today where I needed a summary of requested item variables to send out in an email notification. I didn't see a good script for doing it but found a number that were close. Here's my version that does some checking to only show variables that would normally have content suitable to a summary. I'm sure there's room for additional improvement but for the time being this did the trick:
function printVariableSummary(){
// Variable types that shouldn't be shown
hidden_types = {
12:true,
20:true,
24:true,
19:true,
11:true,
14:true,
17:true,
25:true,
15:true
};
template.print('<strong>Item Options</strong><br/>');
var set = new GlideappVariablePoolQuestionSet();
set.setRequestID(current.sys_id);
set.load();
var vs = set.getFlatQuestions();
// Go through all the variables
for (var i=0; i < vs.size(); i++) {
// Skip variables without a label or that are a type that should be skipped
if(vs.get(i).getLabel() != '' && !hidden_types[vs.get(i).getType()]) {
template.space(4);
template.print(' <strong>' + vs.get(i).getLabel() + ":</strong> " + vs.get(i).getDisplayValue() + "<br />");
}
}
}
printVariableSummary();
