Workflow and ServiceDesk Community

Original article is posted here.

Caveat: in some versions of 7.6, the way Workflow renders form textbox elements is quirky.  Sometimes (depending on the version of Workflow you're using) you'll need to adjust the scripts a bit like so:

The TextBox component is sometimes a nested input element.  any javascript or CSS reference to a TextBox component may now need to be adjusted to fit the new HTML layout.  

.textbox {
  outline: none;
}

may now need to be:

.textbox > input {
  outline: none;
}

var txtbx = document.getElementById(‘textbox’);

may now need to be:

var txtbx = document.getElementById(‘textbox’).firstElementChild;
}}

A while back I spent about 10 minutes researching why my AD credentials were busted, only to realize I had caps lock turned on.  I built this for people like myself who sometimes go moon-brained.

Here’s a quick how-to on adding a CAPS LOCK warning to your login forms.  If you’re using a modern version of IE, this feature will be built-in.  For any other modern browser, however, we’ll need to add one if we want it.

See the attached gif for a demonstration.

There’s a bit of a stipulation to this concept – we can only determine the state of Caps Lock indirectly, and we can only do so when a capital-able key is pressed.  So for example, a number won’t fire the warning, nor will a special character.  We can also only rely on a key press to run the function – oninput, onchange, onfocus, etc, will not work.

Anyways, here’s the setup.

In the demo, I’m using an Image component and an Ascii Merge Label (a Label would work just as well in this case) for the warning popup.  I’m setting the style key to .aHiddenElement, which initially loads the elements as not visible.  When triggered, javascript will replace the class with a visible class.  Both warning components have Control Ids set.

I’m using two TextBox components, one of which is a password type (set in the component settings).  The password field needs a Control Id.  Add a Button for good measure.

Finally, add an IncludeHTML component to handle our CSS code.

Here is the CSS used in the demo (remember to wrap the entire code block in style tags):

.gaButton {
text-transform: uppercase;
font-family: Verdana, Serif;
font-size: 12px;
border: none;
text-align: center;
color: white;
background-color: #524d6f;
outline: none !important;
padding-bottom: 2px;
-webkit-appearance: none;
border-radius: 0;
}
 
.gaLabel {
color: #999999;
font-family: Verdana, Serif;
text-align: left;
font-size: 12px;
-webkit-font-smoothing: antialiased;
padding-top: 4px;
}
 
.gaInfoLabel {
color: #999999;
font-family: Verdana, Serif;
text-align: left;
font-size: 12px;
-webkit-font-smoothing: antialiased;
padding-top: 4px;
}
 
.gaInput {
outline: none;
border: none !important;
box-shadow: inset 0 1px 2px rgba(0,0,0,.2),inset 0 -1px 0 rgba(0,0,0,.05);
font-size: 14px;
font-family: Verdana, Serif;
padding-left: 6px;
padding-bottom: 2px;
background-color: #f7f7f7;
color: #999999;
-webkit-appearance: none;
border-radius: 0;
}
.gaInput:focus {
background-color: #ffffff !important;
color: #525252 !important;
outline: none;
}
 
.gaHiddenElement {
visibility:hidden;
}
 
.aShowElement {
visibility: visible !important;
}

In the form’s Script section, we will write the javascript functions (2) that handle the Caps evaluation:

function isCapsLockOn(e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
var shiftKey = e.shiftKey ? e.shiftKey : ((keyCode == 16) ? true : false);
return (((keyCode >= 65 && keyCode <= 90) && !shiftKey) || ((keyCode >= 97 && keyCode <= 122) && shiftKey))
}
 
function showCapsLockMsg(e) {
var capsImage = document.getElementById('CAPSImage');
var capsLabel = document.getElementById('CAPSLabel');
var warningElement = document.getElementById('capsLockWarning');
if (isCapsLockOn(e)) {
capsImage.className = 'aShowElement';
capsLabel.className = 'gaLabel';
} else {
capsImage.className = 'gaHiddenElement';
capsLabel.className = 'gaHiddenElement';
}
}

This function setup basically checks to see if the Shift key is being pressed, and if it isn’t, but the letter being pressed is capitalized, it assumes Caps Lock is pressed.

There’s some extraneous style and UX code added to the body onload event for good measure (included in the demo), and then we call the functions from the password field.

In the TextBox component used for the password, add a custom event for “onkeypress”, and add this javascript function call:

showCapsLockMsg(event);

That should do it!

Featured Components

TextBox

IncludeHTML

Button

Image

Ascii Merge Label

Further Reading

CSS and Workflow

Javascript and Workflow