“The greatest performance improvement of all is when a system goes from not working to working.” — John Ousterhout
The other day I was showing off my Incident email hack, and to my surprise, the thing did not work. I was reminded of something my old boss used to tell me whenever we had blown a demonstration to a potential customer. “There are only two kinds of demos,” he would say, “Those that don’t count and those that don’t work.” But my email hack had been working flawlessly for quite some time, so I couldn’t imagine why it wasn’t working that day. Then I realized that I couldn’t remember trying it since I upgraded my instance to Madrid. Something was different now, and I needed to figure out what that was.
It didn’t take much of an investigation to locate the failing line of code. As it turns out, it wasn’t in anything that I had written, but in an existing function that I had leveraged to populate the selected email addresses. That’s not to suggest that the source of the problem was not my fault; it just meant that I had to do a little more digging to get down to the heart of the issue. The function, addEmailAddressToList, required an INPUT element as one of the arguments, but for my usage, there was no such INPUT element. But when I looked at the code inside the function, the only reference to the INPUT element was to access the value property. So, I just created a simple object and set the value to the email address that I wanted to add, and then passed that in to the function. That worked just fine at the time, but that was the old version of this function.
In the updated version that comes with Madrid, there is new code to access the ac property of the INPUT element and run a function of the ac object called getAddressFilterIds. My little fake INPUT element had no ac property, and thus, no getAddressFilterIds function, so that’s where things broke down. No problem, though. If I can make a fake INPUT element, I can add a fake ac object to it, and give that fake ac object a fake getAddressFilterIds function. I would need to know what the function does, or more importantly, what it is supposed to return, but that was easy enough to figure out as well. In the end, all I really needed to do to get past that error was add these lines to the incident_email_client_hackUI Script:
Unfortunately, things still didn’t work after that. Once I got past that first error, I ran right into another similar error, as it was trying to run yet another missing function of the ac object called resetInputField. So, I added yet another line of code:
Voila! Now we were back in action. I did a little more testing, just to be sure, but as far as I can tell, that solved the issue for this version, and since all I did was add bloat to the fake INPUT element that would never be referenced in the old version, it would be backwards compatible as well, and work just fine now in either version. Still, now that all the parts were laid out, I decided that I could clean the whole mess up a little bit by defining the fake INPUT element all in a single line of code:
There, that’s better! Now, instead of adding three new lines of code, I actually ended up removing a line. For those of you playing along at home, I gathered up all of the original parts and pieces along with the updated version of this script and uploaded a new version of the Update Set for this hack.
“I regret only one thing, which is that the days are so short and that they pass so quickly. One never notices what has been done; one can only see what remains to be done, and if one didn’t like the work it would be very discouraging.” — Maria Sklodowska
Well, I finally resolved the two major annoyances of my little form field project. One was having to include the form name as an attribute when I felt for sure that there must be a way to derive that without having to pass it in explicitly, and the other was related to the validation message behavior. When my error message routine was based on watching $valid, the message did not change even though the reason that it was not $valid changed. Empty required fields would show the message about the field being required, but when you started typing and the value was not yet a valid value, that original message would remain rather than switching to something more appropriate such as explaining to you that the value that you were entering was not a valid value. I tried switching to watching $error instead of $valid, but that didn’t work at all. So, I went out and scoured the Interwebs for an answer to my dilemma.
As it turns out, watching $error really was the right thing to do, but in order for that to work, I had to add true as a third argument to the scope.$watch function call (the first argument is the element to watch and the second is the function to run when something changes). I’m not sure what that third argument is or does, but I now know that if you add it, then it works, so I guess that’s all I really need to know.
As for the form name, after many, many, many different experiments, I finally stumbled across a sequence of random letters, numbers, and symbols that consistently returned the name of the form:
var form = element.parents("form").toArray()[0].name;
Of course, now that it is laid out right there in front of you in plain sight, you can tell right away how intuitively obvious that should have been from the start. Why I didn’t just know that right off of the bat will remain an eternal mystery, but the good news is that we have the secret now, and I can finally remove all of those unneeded snh-form=”form1″ attributes from all of my various test cases. I always felt as if that shouldn’t have been necessary, but I could never quite come up with an approach that would return the name of the form in every instance. Fortunately, I am rather relentless with these kinds of things and I just kept trying things until I finally stumbled upon something that actually worked.
Those were the two major items on my list of stuff that I thought needed to be addressed before we could really call this good enough. I also did a little bit of clean-up in a few other areas as well, just tidying a few little odds and ends up here and there where I thought things could use a little improvement. Here is the full text of the current version of the script that performs all of the magic:
function() {
var SUPPORTED_TYPE = ['choicelist', 'date', 'datetime-local', 'email', 'inlineradio', 'month', 'number', 'password', 'radio', 'reference', 'tel', 'text', 'textarea', 'time', 'url', 'week'];
var RESERVED_ATTR = ['ngHide', 'ngModel', 'ngShow', 'class', 'field', 'id', 'name', 'required'];
var SPECIAL_TYPE = {
email: {
title: 'Send an email to {{MODEL}}',
href: 'mailto:{{MODEL}}',
icon: 'mail'
},
tel: {
title: 'Call {{MODEL}}',
href: 'tel:{{MODEL}}',
icon: 'phone'
},
url: {
title: 'Open {{MODEL}} in a new browser window',
href: '{{MODEL}}" target="_blank',
icon: 'pop-out'
}
};
var STD_MESSAGE = {
email: "Please enter a valid email address",
max: "Please enter a smaller number",
maxlength: "Please enter fewer characters",
min: "Please enter a larger number",
minlength: "Please enter more characters",
number: "Please enter a valid number",
pattern: "Please enter a valid value",
required: "This information is required",
url: "Please enter a valid URL",
date: "Please enter a valid date",
datetimelocal: "Please enter a valid local date/time",
time: "Please enter a valid time",
week: "Please enter a valid week",
month: "Please enter a valid month"
};
return {
restrict: 'E',
replace: true,
require: ['^form'],
template: function(element, attrs) {
var htmlText = '';
var form = element.parents("form").toArray()[0].name;
var name = attrs.snhName;
var model = attrs.snhModel;
var type = attrs.snhType || 'text';
var required = attrs.snhRequired && attrs.snhRequired.toLowerCase() == 'true';
var fullName = form + '.' + name;
var refExtra = '';
type = type.toLowerCase();
if (SUPPORTED_TYPE.indexOf(type) == -1) {
type = 'text';
}
if (type == 'reference') {
fullName = form + "['" + name + " ']";
refExtra = '.value';
}
htmlText += " <div id=\"element." + name + "\" class=\"form-group\"";
if (attrs.ngShow) {
htmlText += " ng-show=\"" + attrs.ngShow + "\"";
}
if (attrs.ngHide) {
htmlText += " ng-hide=\"" + attrs.ngHide + "\"";
}
htmlText += ">\n";
htmlText += " <div id=\"label." + name + "\" class=\"snh-label\" nowrap=\"true\">\n";
htmlText += " <label for=\"" + name + "\" class=\"col-xs-12 col-md-4 col-lg-6 control-label\">\n";
htmlText += " <span id=\"status." + name + "\"";
if (required) {
htmlText += " ng-class=\"" + model + refExtra + ">''?'snh-required-filled':'snh-required'\"";
}
htmlText += "></span>\n";
htmlText += " <span title=\"" + attrs.snhLabel + "\" data-original-title=\"" + attrs.snhLabel + "\">" + attrs.snhLabel + "</span>\n";
htmlText += " </label>\n";
htmlText += " </div>\n";
if (attrs.snhHelp) {
htmlText += " <div id=\"help." + name + "\" class=\"snh-help\">" + attrs.snhHelp + "</div>\n";
}
if (type == 'radio' || type == 'inlineradio') {
htmlText += buildRadioTypes(attrs, name, model, required, type);
} else if (type == 'choicelist') {
htmlText += buildChoiceList(attrs, name, model, required);
} else if (SPECIAL_TYPE[type]) {
htmlText += buildSpecialTypes(attrs, name, model, required, type, fullName);
} else if (type == 'reference') {
htmlText += " <sn-record-picker field=\"" + model + "\" id=\"" + name + "\" name=\"" + name + "\"" + passThroughAttributes(attrs) + (required?' required':'') + "></sn-record-picker>\n";
} else if (type == 'textarea') {
htmlText += " <textarea class=\"snh-form-control\" ng-model=\"" + model + "\" id=\"" + name + "\" name=\"" + name + "\"" + passThroughAttributes(attrs) + (required?' required':'') + "></textarea>\n";
} else {
htmlText += " <input class=\"snh-form-control\" ng-model=\"" + model + "\" id=\"" + name + "\" name=\"" + name + "\" type=\"" + type + "\"" + passThroughAttributes(attrs) + (required?' required':'') + "/>\n";
}
htmlText += " <div id=\"message." + name + "\" ng-show=\"(" + fullName + ".$touched || " + fullName + ".$dirty || " + form + ".$submitted) && " + fullName + ".$invalid\" class=\"snh-error\">{{" + fullName + ".validationErrors}}</div>\n";
htmlText += " </div>\n";
return htmlText;
function buildRadioTypes(attrs, name, model, required, type) {
var htmlText = " <div style=\"clear: both;\"></div>\n";
var option = null;
try {
option = JSON.parse(attrs.snhChoices);
} catch(e) {
alert('Unable to parse snh-choices value: ' + attrs.snhChoices);
}
if (option && option.length > 0) {
for (var i=0; i<option.length; i++) {
var thisOption = option[i];
if (type == 'radio') {
htmlText += " <div>\n ";
}
htmlText += " <input ng-model=\"" + model + "\" id=\"" + name + thisOption.value + "\" name=\"" + name + "\" value=\"" + thisOption.value + "\" type=\"radio\"" + passThroughAttributes(attrs) + (required?' required':'') + "/> " + thisOption.label + "\n";
if (type == 'radio') {
htmlText += " </div>\n";
}
}
}
return htmlText;
}
function buildChoiceList(attrs, name, model, required) {
var htmlText = " <select class=\"snh-form-control\" ng-model=\"" + model + "\" id=\"" + name + "\" name=\"" + name + "\"" + passThroughAttributes(attrs) + (required?' required':'') + ">\n";
var option = null;
try {
option = JSON.parse(attrs.snhChoices);
} catch(e) {
alert('Unable to parse snh-choices value: ' + attrs.snhChoices);
}
htmlText += " <option value=\"\"></option>\n";
if (option && option.length > 0) {
for (var i=0; i<option.length; i++) {
var thisOption = option[i];
htmlText += " <option value=\"" + thisOption.value + "\">" + thisOption.label + "</option>\n";
}
}
htmlText += " </select>\n";
return htmlText;
}
function buildSpecialTypes(attrs, name, model, required, type, fullName) {
var title = SPECIAL_TYPE[type].title.replace('MODEL', model);
var href = SPECIAL_TYPE[type].href.replace('MODEL', model);
var icon = SPECIAL_TYPE[type].icon;
var htmlText = " <span class=\"input-group\" style=\"width: 100%;\">\n";
htmlText += " <input class=\"snh-form-control\" ng-model=\"" + model + "\" id=\"" + name + "\" name=\"" + name + "\" type=\"" + type + "\"" + passThroughAttributes(attrs) + (required?' required':'') + "/>\n";
htmlText += " <span class=\"input-group-btn\" ng-show=\"" + fullName + ".$valid && " + model + " > ''\">\n";
htmlText += " <a href=\"" + href + "\" class=\"btn-ref btn btn-default\" role=\"button\" title=\"" + title + "\" tabindex=\"-1\" data-original-title=\"" + title + "\">\n";
htmlText += " <span class=\"icon icon-" + icon + "\" aria-hidden=\"true\"></span>\n";
htmlText += " <span class=\"sr-only\">" + title + "</span>\n";
htmlText += " </a>\n";
htmlText += " </span>\n";
htmlText += " </span>\n";
return htmlText;
}
function passThroughAttributes(attrs) {
var htmlText = '';
for (var name in attrs) {
if (name.indexOf('snh') != 0 && name.indexOf('$') != 0 && RESERVED_ATTR.indexOf(name) == -1) {
htmlText += ' ' + camelToDashed(name) + '="' + attrs[name] + '"';
}
}
return htmlText;
}
function camelToDashed(camel) {
return camel.replace(/([a-zA-Z])(?=[A-Z])/g, '$1-').toLowerCase();
}
},
link: function(scope, element, attrs, ctls) {
var form = ctls[0].$name;
var name = attrs.snhName;
var fullName = form + '.' + name;
if (!scope.$eval(fullName)) {
fullName = form + '["' + name + ' "]';
}
var overrides = {};
if (attrs.snhMessages) {
overrides = scope.$eval(attrs.snhMessages);
}
scope.$watch(fullName + '.$error', function () {
var elem = scope.$eval(fullName);
elem.validationErrors = '';
var separator = '';
if (elem.$invalid) {
for (var key in elem.$error) {
elem.validationErrors += separator;
if (overrides[key]) {
elem.validationErrors += overrides[key];
} else if (STD_MESSAGE[key]) {
elem.validationErrors += STD_MESSAGE[key];
} else {
elem.validationErrors += 'Undefined field validation error: ' + key;
}
separator = '<br/>';
}
}
}, true);
}
};
}
I already released an almost good enough version that I ended up calling 1.0, so I guess we’ll have to call this one 1.1. You can grab the full Update Set, which now includes the CSS as a separate file instead of being pasted into the test widget like it was in the original version. It would probably be beneficial to include some semblance of documentation at some point, but that will have to wait for a later release.
“Finishing races is important, but racing is more important.” — Dale Earnhardt
After tinkering around with various uses and locations for the Retina Icons that I came across the other day, I finally settled on decorating three of my form fieldtypes with action buttons:
Form Fields with related Action Buttons
For the email form field type, the button sends an email, for the tel form field type, the button calls the number, and for the url form field type, the button opens up a new browser and navigates the the URL. To make the magic happen, I added yet another static variable listing out the types for which I created support for actions.
var SPECIAL_TYPE = ['email', 'tel', 'url'];
Then I created a function to format the types listed in that array. The code is essentially the same for all three types, with the differences only being in the icon, the link, and the associated help text or title. I considered creating a JSON object instead of a simple array, and including the three unique values for each type, but to be completely honest, I really didn’t think of doing that until after I had already done it the other way and I was too lazy to go back and refactor everything. So for now, the array drives the decision to utilize the function, and the function contains a bunch of hard-coded if statements to sort out what is unique to each type.
One thing that I did not want to do was have the action buttons out there when there was no value in the field or when the value was not valid. To only show the buttons when there was something there that would actually work with the button code, I added an ng-show to the outer element preventing it from displaying unless the conditions were right.
Action Buttons removed when data is missing or invalid
Aside from the cool Retina Icons and hiding the buttons when not wanted, there isn’t too much else noteworthy about the code. It does work, which is always a good thing, but one day I can see myself going back in here and doing a little optimization here and there. But this is what the initial version looks like today:
function buildSpecialTypes(attrs, name, model, required, fullName) {
var title = '';
var href = '';
var icon = '';
if (type == 'email') {
title = 'Send an email to {{' + model + '}}';
href = 'mailto:{{' + model + '}}';
icon = 'mail';
}
if (type == 'tel') {
title = 'Call {{' + model + '}}';
href = 'tel:{{' + model + '}}';
icon = 'phone';
}
if (type == 'url') {
title = 'Open {{' + model + '}} in a new browser window';
href = '{{' + model + '}}" target="_blank';
icon = 'pop-out';
}
var htmlText = " <span class=\"input-group\" style=\"width: 100%;\">\n";
htmlText += " <input class=\"snh-form-control\" ng-model=\"" + model + "\" id=\"" + name + "\" name=\"" + name + "\" type=\"" + type + "\"" + passThroughAttributes(attrs) + (required?' required':'') + "/>\n";
htmlText += " <span class=\"input-group-btn\" ng-show=\"" + fullName + ".$valid && " + model + " > ''\">\n";
htmlText += " <a href=\"" + href + "\" class=\"btn-ref btn btn-default\" role=\"button\" title=\"" + title + "\" tabindex=\"-1\" data-original-title=\"" + title + "\">\n";
htmlText += " <span class=\"icon icon-" + icon + "\" aria-hidden=\"true\"></span>\n";
htmlText += " <span class=\"sr-only\">" + title + "</span>\n";
htmlText += " </a>\n";
htmlText += " </span>\n";
htmlText += " </span>\n";
return htmlText;
}
I still have my issues to deal with, but thanks to my pervasive skills at creative avoidance, we can put that off to a later installment, which will also be a good time to release an improved version of the Update Set for all of this.
I was thinking about doing something with the form-field-addons that are a standard part of a ServiceNow UI form, and so I started looking at some of the ones that are currently in use on some of the existing forms. That led me down a path of looking into the source for the various icons used, which eventually led me to this:
“If at first you don’t succeed, call it version 1.0” — Charles Lauller
Well, that was an adventure! Even though I was just about 100% sure that it wouldn’t work, I went ahead and defined yet another type for my snh-form-field tag to experiment with embedding an sn-record-picker. It seemed highly unlikely to me that AngularJS was smart enough to run through the evaluation process on a tag that was rendered in a template that itself was resolved in the evaluation process. But, I like to try things even when I’m pretty sure that they won’t work, so I added reference to my list of supported types and added this to my little test page widget:
To my utter amazement, it actually worked! I did not expect that. I was pleasantly surprised to see that it worked perfectly fine, and I was very happy that I had decided to give it shot before trying to figure out some other way to incorporate this capability in my own directive. There were, of course, a few little adjustments needed here and there, but hey — it was pretty cool to see that it actually worked without me having to do much of anything. I was both astonished and elated. Elation, though, is a temporary state, and things really started to go down from there.
To start with, it just looked a little funky. It was like a field within a field, but not completely, with one element bleeding over the bottom edge of the other. Something just wasn’t right somewhere.
First attempt at setting up a reference field
That one wasn’t that hard to figure out though. I had added the snh-form-control class to the sn-record-picker tag, but the sn-record-picker generates its own class attribute on a different level, so the two were redundant as well as conflicting. I removed my class attribute and that solved that problem. But that was really an insignificant problem compared to what I noticed next: the field wasn’t validating.
The required field indicator was grey instead of red, no matter whether or not you had selected anything from the drop-down. And no error messages appeared no matter what you did. It was as if validation wasn’t turned on for that field at all. Then I remembered that the model for an sn-record-picker is not a string containing the value selected, but an object containing a property that contains the value selected, appropriately named value. Where the value of every other type of field was <form-name>.<field-name>, the value of an sn-record-picker is <form-name>.<field-name>.value. That meant putting in some conditional code just for the reference type fields, which I had not really had to do for any other types up to this point.
Unfortunately, things still were not working after all of that. Now I was starting to get a little frustrated because the picker itself just worked like a charm right out of the gate, which I absolutely did not expect, but the field validation, which I thought would be the one part to work just fine, still wasn’t working at all. I kept digging, though, and eventually I figure out that when the sn-record-picker renders the name attribute, it throws in an extra little trailing space at the end of field name. Instead of name=”reference” I ended up with name=”reference “. Well, that little extra, unwelcome, trailing space means that <form-name>.<field-name> doesn’t reference that field after all. You need to use <form-name>[‘<field-name-plus-one-space>’] because you can’t represent that trailing space without using the square bracket notation instead of the dot notation. So, I ended up adding yet more type-specific code. I don’t know if that extra trailing space is just an unfortunate mistake or it was put in by design, but if it was a mistake, I hope they don’t fix it one day, because now I am relying on it being there for things to work.
After all of those changes, though, it still wasn’t validating. Things were starting to progress from frustration to irritation. Every time that I thought that I had found and fixed the problem, I would try it out expecting things to be fixed, and it still wouldn’t be working. After a lot of head scratching and debugging alerts and trial and error, I finally was able to figure out that the validation messages only appear once the field had been $touched, and the sn-record-picker fields are never $touched. They can get $dirty, but for some reason, they are never $touched. So I modified my condition on showing the validation errors be $touched or $dirty, and finally, everything worked as it should. Finally.
So here is the way things look so far:
function() {
var SUPPORTED_TYPE = ['choicelist', 'date', 'datetime-local', 'email', 'inlineradio', 'month', 'number', 'password', 'radio', 'reference', 'tel', 'text', 'textarea', 'time', 'url', 'week'];
var RESERVED_ATTR = ['ngHide', 'ngModel', 'ngShow', 'class', 'field', 'id', 'name', 'required'];
var STD_MESSAGE = {
email: "Please enter a valid email address",
max: "Please enter a smaller number",
maxlength: "Please enter fewer characters",
min: "Please enter a larger number",
minlength: "Please enter more characters",
number: "Please enter a valid number",
pattern: "Please enter a valid value",
required: "This information is required",
url: "Please enter a valid URL",
date: "Please enter a valid date",
datetimelocal: "Please enter a valid local date/time",
time: "Please enter a valid time",
week: "Please enter a valid week",
month: "Please enter a valid month"
};
return {
restrict: 'E',
replace: true,
require: ['^form'],
template: function(element, attrs) {
var htmlText = '';
var form = attrs.snhForm;
var name = attrs.snhName;
var model = attrs.snhModel;
var type = attrs.snhType || 'text';
var required = attrs.snhRequired && attrs.snhRequired.toLowerCase() == 'true';
var fullName = form + '.' + name;
var refExtra = '';
type = type.toLowerCase();
if (SUPPORTED_TYPE.indexOf(type) == -1) {
type = 'text';
}
if (type == 'reference') {
fullName = form + "['" + name + " ']";
refExtra = '.value';
}
htmlText += " <div id=\"element." + name + "\" class=\"form-group\"";
if (attrs.ngShow) {
htmlText += " ng-show=\"" + attrs.ngShow + "\"";
}
if (attrs.ngHide) {
htmlText += " ng-hide=\"" + attrs.ngHide + "\"";
}
htmlText += ">\n";
htmlText += " <div id=\"label." + name + "\" class=\"snh-label\" nowrap=\"true\">\n";
htmlText += " <label for=\"" + name + "\" class=\"col-xs-12 col-md-4 col-lg-6 control-label\">\n";
htmlText += " <span id=\"status." + name + "\"";
if (required) {
htmlText += " ng-class=\"" + model + refExtra + ">''?'snh-required-filled':'snh-required'\"";
}
htmlText += "></span>\n";
htmlText += " <span title=\"" + attrs.snhLabel + "\" data-original-title=\"" + attrs.snhLabel + "\">" + attrs.snhLabel + "</span>\n";
htmlText += " </label>\n";
htmlText += " </div>\n";
if (attrs.snhHelp) {
htmlText += " <div id=\"help." + name + "\" class=\"snh-help\">" + attrs.snhHelp + "</div>\n";
}
if (type == 'radio' || type == 'inlineradio') {
htmlText += buildRadioTypes(attrs, name, model, required, type);
} else if (type == 'choicelist') {
htmlText += buildChoiceList(attrs, name, model, required);
} else if (type == 'reference') {
htmlText += " <sn-record-picker field=\"" + model + "\" id=\"" + name + "\" name=\"" + name + "\"" + passThroughAttributes(attrs) + (required?' required':'') + "></sn-record-picker>\n";
} else if (type == 'textarea') {
htmlText += " <textarea class=\"snh-form-control\" ng-model=\"" + model + "\" id=\"" + name + "\" name=\"" + name + "\"" + passThroughAttributes(attrs) + (required?' required':'') + "></textarea>\n";
} else {
htmlText += " <input class=\"snh-form-control\" ng-model=\"" + model + "\" id=\"" + name + "\" name=\"" + name + "\" type=\"" + type + "\"" + passThroughAttributes(attrs) + (required?' required':'') + "/>\n";
}
htmlText += " <div id=\"message." + name + "\" ng-show=\"(" + fullName + ".$touched || " + fullName + ".$dirty) && " + fullName + ".$invalid\" class=\"snh-error\">{{" + fullName + ".validationErrors}}</div>\n";
htmlText += " </div>\n";
return htmlText;
function buildRadioTypes(attrs, name, model, required, type) {
var htmlText = " <div style=\"clear: both;\"></div>\n";
var option = null;
try {
option = JSON.parse(attrs.snhChoices);
} catch(e) {
alert('Unable to parse snh-choices value: ' + attrs.snhChoices);
}
if (option && option.length > 0) {
for (var i=0; i<option.length; i++) {
var thisOption = option[i];
if (type == 'radio') {
htmlText += " <div>\n ";
}
htmlText += " <input ng-model=\"" + model + "\" id=\"" + name + thisOption.value + "\" name=\"" + name + "\" value=\"" + thisOption.value + "\" type=\"radio\"" + passThroughAttributes(attrs) + (required?' required':'') + "/> " + thisOption.label + "\n";
if (type == 'radio') {
htmlText += " </div>\n";
}
}
}
return htmlText;
}
function buildChoiceList(attrs, name, model, required) {
var htmlText = " <select class=\"snh-form-control\" ng-model=\"" + model + "\" id=\"" + name + "\" name=\"" + name + "\"" + passThroughAttributes(attrs) + (required?' required':'') + ">\n";
var option = null;
try {
option = JSON.parse(attrs.snhChoices);
} catch(e) {
alert('Unable to parse snh-choices value: ' + attrs.snhChoices);
}
htmlText += " <option value=\"\"></option>\n";
if (option && option.length > 0) {
for (var i=0; i<option.length; i++) {
var thisOption = option[i];
htmlText += " <option value=\"" + thisOption.value + "\">" + thisOption.label + "</option>\n";
}
}
htmlText += " </select>\n";
return htmlText;
}
function passThroughAttributes(attrs) {
var htmlText = '';
for (var name in attrs) {
if (name.indexOf('snh') != 0 && name.indexOf('$') != 0 && RESERVED_ATTR.indexOf(name) == -1) {
htmlText += ' ' + camelToDashed(name) + '="' + attrs[name] + '"';
}
}
return htmlText;
}
function camelToDashed(camel) {
return camel.replace(/([a-zA-Z])(?=[A-Z])/g, '$1-').toLowerCase();
}
},
link: function(scope, element, attrs, ctls) {
var form = ctls[0].$name;
var name = attrs.snhName;
var fullName = form + '.' + name;
if (!scope.$eval(fullName)) {
fullName = form + '["' + name + ' "]';
}
var overrides = {};
if (attrs.snhMessages) {
overrides = scope.$eval(attrs.snhMessages);
}
scope.$watch(fullName + '.$valid', function (isValid) {
var elem = scope.$eval(fullName);
elem.validationErrors = '';
var separator = '';
if (!isValid) {
for (var key in elem.$error) {
elem.validationErrors += separator;
if (overrides[key]) {
elem.validationErrors += overrides[key];
} else if (STD_MESSAGE[key]) {
elem.validationErrors += STD_MESSAGE[key];
} else {
elem.validationErrors += 'Undefined field validation error: ' + key;
}
separator = '<br/>';
}
}
});
}
};
}
I’m still not happy about having to specify the form name, still need to do something about the wrong validation message showing up in certain circumstances, and I still haven’t tested all of the support types just yet, but I think it just might be complete enough to go ahead and throw an initial version into an Update Set for anyone who might want to play along at home. There is still a lot that I would like to do before I’m ready to call it really good, but it does work, so there is that. As the man who jumped off of the high-rise building was heard saying as he passed each floor, “So far, so good …”
After doing a lot of testing and tweaking, I decided that it was time to add a few more options to my list of supported types. Everything up to this point was still a basic text or textarea variation that didn’t require any special coding to produce the INPUT element. Now it is time to try something a little more sophisticated that will require a little bit of extra work. Both radio buttons and select statements work off of a list of choices from which you select your value, so I came up with yet another attribute to support types of this nature. I called it snh-choices, and the expectation is that you will provide a JSON array of label/value pairs in the order in which you want them to be presented. Then I added three new values to my list of supported types, choicelist, radio, and inlineradio. The only difference between radio and inlineradio is that the radio type lists the choices from top to bottom and the inlineradio type lists them from left to right. Other than that, they are essentially the same thing.
To support the new types, I created a couple of functions to render the appropriate INPUT element and the associated choices:
function buildRadioTypes(attrs, name, model, required, type) {
var htmlText = " <div style=\"clear: both;\"></div>\n";
var option = null;
try {
option = JSON.parse(attrs.snhChoices);
} catch(e) {
console.log('Unable to parse snh-choices value: ' + attrs.snhChoices);
}
if (option && option.length > 0) {
for (var i=0; i<option.length; i++) {
var thisOption = option[i];
if (type == 'radio') {
htmlText += " <div>\n ";
}
htmlText += " <input ng-model=\"" + model + "\" id=\"" + name + thisOption.value + "\" name=\"" + name + "\" value=\"" + thisOption.value + "\" type=\"radio\"" + passThroughAttributes(attrs) + (required?' required':'') + "/> " + thisOption.label + "\n";
if (type == 'radio') {
htmlText += " </div>\n";
}
}
}
return htmlText;
}
function buildChoiceList(attrs, name, model, required) {
var htmlText = " <select class=\"snh-form-control\" ng-model=\"" + model + "\" id=\"" + name + "\" name=\"" + name + "\"" + passThroughAttributes(attrs) + (required?' required':'') + ">\n";
var option = null;
try {
option = JSON.parse(attrs.snhChoices);
} catch(e) {
console.log('Unable to parse snh-choices value: ' + attrs.snhChoices);
}
htmlText += " <option value=\"\"></option>\n";
if (option && option.length > 0) {
for (var i=0; i<option.length; i++) {
var thisOption = option[i];
htmlText += " <option value=\"" + thisOption.value + "\">" + thisOption.label + "</option>\n";
}
}
htmlText += " </select>\n";
return htmlText;
}
To test out these new types, I modified my little test page yet again to add some additional form fields to try out each of the three new types. The HTML for that page now looks like this:
<snh-panel title="'${Form Field Test}'">
<form id="form1" name="form1" novalidate>
<div class="row">
<div class="col-xs-12 col-sm-6">
<snh-form-field
snh-form="form1"
snh-model="c.data.firstName"
snh-name="firstName"
snh-label="First Name"
snh-type="text"
snh-required="true"
snh-messages='{"required":"You must enter a First Name"}'/>
<snh-form-field snh-form="form1"
snh-model="c.data.middleName"
snh-name="middleName"
snh-label="Middle Name"
snh-type="text"
snh-required="false" />
<snh-form-field
snh-form="form1"
snh-model="c.data.lastName"
snh-name="lastName"
snh-label="Last Name"
snh-type="text"
snh-required="true"
minlength="5"/>
<snh-form-field
snh-form="form1"
snh-model="c.data.email"
snh-name="email"
snh-label="Email Address"
snh-type="email"
snh-required="true"
snh-messages='{"required":"You must enter an Email address", "email":"You must enter a valid Email address"}'/>
</div>
<div class="col-xs-12 col-sm-6">
<snh-form-field
snh-form="form1"
snh-model="c.data.textarea"
snh-name="textarea"
snh-label="Text Area"
snh-type="textarea"
maxlength="20"
snh-help="This is where the field-level help is displayed."/>
<snh-form-field
snh-form="form1"
snh-model="c.data.choicelist"
snh-name="choicelist"
snh-label="Choice List"
snh-type="choicelist"
snh-required="true"
snh-choices='[{"value":"1", "label":"Choice #1"},{"value":"2", "label":"Choice #2"},{"value":"3", "label":"Choice #3"},{"value":"4", "label":"Choice #4"}]'/>
<snh-form-field
snh-form="form1"
snh-model="c.data.radio"
snh-name="radio"
snh-label="Radio"
snh-type="radio"
snh-required="true"
snh-choices='[{"value":"1", "label":"Choice #1"},{"value":"2", "label":"Choice #2"},{"value":"3", "label":"Choice #3"},{"value":"4", "label":"Choice #4"}]'/>
<snh-form-field
snh-form="form1"
snh-model="c.data.inlineradio"
snh-name="inlineradio"
snh-label="In-line Radio"
snh-type="inlineradio"
snh-required="true"
snh-choices='[{"value":"1", "label":"Choice #1"},{"value":"2", "label":"Choice #2"},{"value":"3", "label":"Choice #3"},{"value":"4", "label":"Choice #4"}]'/>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<snh-form-field
snh-form="form1"
snh-model="c.data.comments"
snh-name="comments"
snh-label="Comments"
snh-type="textarea"/>
</div>
</div>
</form>
</snh-panel>
And here is the screen shot of the latest version of the test page with the examples of the three new field types:
Form field tester with choice list and radio fields
Of course, that still leaves a lot to be tested, and even more that could be added, but I am starting to think that we are finally at that point where there is more work that has been completed than there is left to be done. Still, there are quite a few items that still remain on the needs to be done list:
Fix the way validation messages are displayed when the message changes, but the valid state does not,
Figure out how to obtain the name of the form in the template function so that it doesn’t have to be passed in as an attribute,
Test all of the field types that are specified in the list of valid field types,
Add even more choices to the list of valid field types, and
Revisit the form-field-extras DIV that we left out, and see what we might be able to with that feature if we brought that back into play.
As far as additional types go, I was thinking about seeing what I could do with the sn-record-picker, but that sounds like it could be its own challenge. That’s an AngularJS provider as well, and I’m not exactly sure how that would work with a provider inside of a provider. But I guess that’s how you find those things out. But I think I better stick with some of the other loose ends that I’ve skipped over before I start out on yet another experiment into the unknown. Although, it would be interesting to try …
