Not that anyone cares, but I finally uploaded that Lotus Knows video I mentioned yesterday to YouTube, just so it's a little bigger and you can see a little more detail on what's going on:
For some reason the cheesy music part of the audio track didn't get converted and the video is still a little fuzzy, but whatever. I didn't even have a YouTube account until a couple hours ago. I'll figure it out someday if it becomes important.
Oh cool, Rob Novak told me that my Lotus Knows video submission ended up on the main Lotus Knows site!
It's a little client integration demo: taking a flight reservation, uploading to TripIt, viewing in the TripIt sidebar widget, viewing the ical feed in my Notes calendar, and using Live Text and the embedded browser to look up information and drag or copy it to a new calendar entry. The goal was to show how to do all these things using the out-of-the-box Lotus Notes client and mail template, no customizations required. I think the only extra thing I added was the TripIt widget itself just 'cause I think it looks nice.
I need to get a bigger version of the video on YouTube or somewhere so you can see a little more detail on what I'm doing. You can get the idea from the small version on the Lotus Knows site though.
So, you added a checkbox field to a Domino form and the choices are all jumbled together. How do you line them up so they look nice and neat?
That old chestnut of a problem has been discussed for many years (since there's still no built-in way to do it), and most of the solutions seem to be around using some amount of formula language to rewrite the checkbox choices before they're displayed. See Jake Howlett's checkbox formatting article and the comments below it for some good examples.
I wanted another method for lining up checkbox fields in Domino -- namely, a method that didn't require me to touch the checkbox choices at all. I wanted as unobtrusive an answer as I could find. Here's what I came up with:
The process is:
Surround the checkbox field with a <div> (but leave the field itself alone)
Add a JavaScript function to the page
Call the function at window.onload to dynamically reformat the field
Here's the JavaScript to format a div with ID of "checkboxFieldDiv1":
function lineUpCheckboxes (div) {
if (typeof div === "string") { div = document.getElementById(div); }
if (!div) { return; }
var cbText = div.innerHTML;
// this is for reformatting pre-8.5 checkbox fields to add <label> tags
if (cbText && cbText.toLowerCase().indexOf("<label>") < 0) {
var arr = cbText.split(/<input/gi);
cbText = arr[0];
for (i = 1; i < arr.length; i++) {
if ((arr[i].toLowerCase().indexOf('type="checkbox"') >= 0) ||
(arr[i].toLowerCase().indexOf('type=checkbox') >= 0))
cbText += "<label><input" + arr[i] + "</label>";
else if ((arr[i].toLowerCase().indexOf('type="radio"') >= 0) ||
(arr[i].toLowerCase().indexOf('type=radio') >= 0))
cbText += "<label><input" + arr[i] + "</label>";
else
cbText += "<input" + arr[i];
}
}
cbText = cbText.replace(/<label>/gi, "<td style='padding:0px'><label>");
cbText = cbText.replace(/<\/label>/gi, "</label></td>");
cbText = cbText.replace(/<p>/gi, "");
cbText = cbText.replace(/<\/p>/gi, "");
var pos = cbText.indexOf("<td");
if (pos >= 0) {
cbText = cbText.replace(/<br>/gi, "</tr><tr>");
var tbStart = "<table width='98%'><thead></thead><tbody><tr>";
var tbEnd = "</tr></tbody></table>";
pos = cbText.indexOf("<td");
cbText = cbText.substr(0, pos) + tbStart + cbText.substr(pos) + tbEnd;
}
div.innerHTML = cbText;
}
window.onload = function () {
// this is a REALLY bad way to add a window.onload event, but I'm trying to keep
// it short for the sake of example. Search Google for better ways to do this.
lineUpCheckboxes("checkboxFieldDiv1");
};
You can also download the file LineUpCheckboxes.js if you don't feel like copying and pasting.
Over 1/3 of the function code deals with the fact that pre-8.5 Domino servers don't put a <label> tag around checkbox or radio button options, and the rest is some hard-coded string replacements based on how Domino outputs HTML. The really nice thing is, the font face and the number of columns you specify for the field in Domino Designer are still used so there's no extra coding involved there. Since the reformatted fields are in a <div> or your choosing, you can also use all the CSS you want to further refine the look.
I tested this on Domino 7, 8, and 8.5 using Firefox 3/3.5, IE7/8, and Safari. Seemed to work for me. Sadly this does not work with checkbox groups on XPages, so if you're using XPages you're on your own.
I really do wonder, though, if there's not some way to simplify that function. It's only 35 lines of code but it still looks a little tedious to me. If you're a regular expression wizard or if you're really good with the JavaScript toolkits, you might want to try to boil that function down a bit to shorten it up.
So, you added a checkbox field to a Domino form and the choices are all jumbled together. How do you line them up so they look nice and neat?
