Common Lab iForm
So rather than focus on just one thing at a time, I figure I'd show an exert from my common lab iForm. That way you can see many of the scripts and functions I'm using, feel free to take of the code from it you like and feel free to ask any questions you have.
For the Purposes of This Example, Reference: JS Fiddle for Common Lab
The Layout
This form I believe began life as a McKesson form but has evolved far beyond its origins. Originally it had a set of labs, and a radio button for the priority (original options were Routine, Stat, In AM ... if I recall correctly). The problem with that was my doctors had to launch it more than once if they wanted labs at different times. Launch the same form twice you say?! Scandalous!
The Solution to that problem was to create tabs for each priority (our options now include: Routine, 2AM, 4AM, Stat, QAM x3 days). So that the doctors could order whatever hodgepodge combination of labs they desired. Each tab has evolved into a different set from its fellows and that evolution was kinda neat to watch. Now they all look very different... however for the purposes of my example I just cloned a selection two columns wide and 11 rows long over two tabs.
I precheck nothing on this form because it's labs, they could want anything. You'll notice on my tabs, once they're clicked a "viewed" superscript appears to denote they've viewed the tab. Another good idea for larger forms.
The pages are broken up by sections, you can see Hematology with several related items below it, Chemistry, and Diabetes Labs, if one runs all the way to the bottom, it wraps to the next column. All-in-all I would not advise this layout. It looks really nice and is easy to use, but the upkeep is horrific because it's all one big table. SOO, when they want to remove one lab, say Magnesium Level (Col 2 Row 2) You have to cut and past each item below it up one set or leave a blank, or sub an item... not a good system. If I had to build it again, I'd make each column a separate table. Might not line up JUST as perfect, but the upkeep would be worlds better. Live and learn.
The VGR on this form was VERY straightforward (even if there is a TON of it) so I'm not really focusing on it for this example. Well the timed labs are kinda neat, maybe I'll come back later and add an example of that.
The last tab you'll notice is a table with recent lab values. The order, I'm told, is the order they learn to write them in med school, so we tried to recreate the familiar.
Moving on...
The Functions
Ah the meat, that's what we're here for... Functions! This form uses JQuery and JavaScript... if you're only using JavaScript, go ahead and learn JQuery too, it will make your life easier and is not hard to learn.
Check All
//fires check all upon ctr clicking the logo
$('#logo').on('click',function(e) { if (e.ctrlKey) { checkAll(); }});
//Check All checkboxes
var check=1;
function checkAll(){
if (check==1) {
$('input:checkbox').attr('checked', true);
check=0
}
else if (check==0){
$('input:checkbox').attr('checked', false);
check=1
}
};
This is for my testers, the way I have this set up doesn't help my users at all... but they can't get all the toys. Very simple, if you hold Ctrl and click on the logo, it either checks or unchecks EVERYTHING (all tabs). They still have to select all dropdowns and fill in the textboxes, but it saves them a world of finger soreness.
This one changes the attribute, it does not "click" so no flash blinding from everything highlighting at once.
Highlighter
//Highlighter
$("input:checkbox").click(function() {
if ($(this).hasClass('parent')) {}
else{
$(this).parent("td").toggleClass("checked");
}
});
>This function easily got the best reception of anything I've done. The docs love being able to quickly id what's checked and what isn't on their forms. It's very simple, when a checkbox is clicked it adds the class "checked" to the parent cell. The class "checked is even simpler"
td.checked { background: yellow; }
Just changes the cell color to Yellow. There are times, say when dealing with bundled items, that you don't want a checkbox to highlight anything. I like all my child items to highlight, but not the parent item. Just set the class of those inputs to "parent".
I also have an "urgent" and "alert" class that I use exactly the same way for items that are critical. For example, on another form I have Activase and I have a function that checks to see if it's already been ordered, if it has, highlights "urgent" rather than "checked".
Hover Highlighting
// Changes td color on hover unless td has the noHL class
$("td").hover(function() {
if ($(this).hasClass('noHL')) {}
else{
$(this).toggleClass("hover");
}
});
This is really similar to the highlighting function, except the trigger is hover. For those cells you don't want to highlight, say the title bar and the control bar that holds the buttons or spacer cells, set the class of each cell to noHL and no worries. You can see two examples of that in the cells below Fibrinogen.
Check Items With a Click Anywhere in the Cell
// allows for clicking anywhere in the td to check the checkbox
$("td").click(function(e) {
if ($(this).hasClass('noHL')) {}
else{
var chk = $(this).closest("td").find("input:checkbox").get(0);
if(e.target != chk){chk.click()}
}
});
//prevents checking the box when clicking the dropdown
$('td select').click(function(event) {
event.stopPropagation();
});
This function has the same class exemption as the hover function "noHL" otherwise when you click in a cell it checks or unchecks the contained checkbox.
Oh one catch to that is the second function. Whenever there's a select, you need to exempt clicks to it or else every time they clicked a dropdown it would also check something. Can't have that, so we stopProp when selects inside cells are clicked.
Another important point. You'll notice that this function actually simulates a "click" on the checkbox, it doesn't just change the checked attribute? That's so the highlighting function fires (and any other click listening functions).
Verify Exit and Restart
//Prompt confirmation for exit without orders
function confirmExit()
{
var agree=confirm("Are you sure you wish to exit WITHOUT placing orders?");
if (agree)
return "true" ;
else
return false ;
}
//Prompt confirmation for restart
function confirmRestart()
{
var agree=confirm("Are you sure you wish to RESTART the form?");
if (agree)
return true ;
else
return false ;
}
These two were both requests from doctors who had gone through long iForms, checked everything they wanted and then clicked the wrong button, exiting and loosing everything. All it does if pops up and asks them if they're sure they want to Exit or Restart. No biggie for us, but can save them some time. They're triggered with onClick events tied to each button.
That's pretty much it. It's simple, straightforward, easy to use. Has some features but nothing too fancy. It has been well received over here and I hope it helps some of you.
I've been really blown away by the reception for our blog, Thanks to all of you who've commented and asked questions. I really hope to see more of you chime in and let's get a full blown discussion going.
Happy iForming!
0 comments: