From green screen to the web...using tabindex

Legacy app users know the data imput screens they use inside and out, sometime never having to look up when entering data because they know the forms that well. We need to mimic this when we move these legacy apps to the web and one way to help us using the tabindex element.

Tabindex allows you to set the tab order of inputs, select lists, form elements and even buttons. In APEX we can do this by filling in the HTML Form Element Attributes input on our item edit screens. Set your tab order by simple adding "tabindex=x", with x being a number. Want to skip an element? Set the tabindex to be -1.

Where am i? Using input:focus.

One of the simplest guidance tip I can give is using the CSS property, input:focus. This tag will highlight the current field the user is in. 

Only rub with this is that IE 7 and 8 need a little "help".

For getting stareted in anything BUT IE...all you have to do is add the following in your page header:

input:focus, select:focus  {

  background-color: #f7ee9d;

}

This will make all inputs and select lists hightlight to a yellowish color upon focus. To get IE to play along, use jQuery to help set the class of the imput fields to that when focus occures, it will highlight. Put the following code into a .js file and reference it in your page.

$(document).ready(function(){
    if (jQuery.browser.msie === true) {
        jQuery(':input')
                .bind('focus', function() {
                        $(this).addClass('ieFocus');
                }).bind('blur', function() {
                        $(this).removeClass('ieFocus');
                });
    }
});
 
$(document).ready(function(){
    if (jQuery.browser.msie === true) {
        jQuery('select')
                .bind('focus', function() {
                        $(this).addClass('ieFocus');
                }).bind('blur', function() {
                        $(this).removeClass('ieFocus');
                });
    }
});

Then add input.ieFocus to your CSS entry so it looks like the following:

input:focus, select:focus,input.ieFocus {
background-color: #f7ee9d;
}

And thats it!

Enterprise UX..... a multi-part series

Lets kick off a multi-part series dealing with Enterprise Applications and UX...more so making your apex apps work better for the user. As developers sometime we are so wrapped up in building the app we loose sight of whom is going to use it. 

Being the developer, we know exactly how the app works...what to click on, how to navigate it and what data we need to either enter, or look at. This is inevitability a big issue. The following series of posts will offer up a few tip, tricks and methods I've employed to help navigate, guide and give our users a better experience using the apps we build.

Perspective

A bit of a thought...last weekend we bought a shower liner for one of the showers we have...upon brining it home and letting it sit there for another week, I tried it on the shower. Low and behold it was too short. Here is the perspective part...My initial thought was to go out and get another one that was longer...my wife's thought was to just lower the bar where the curtains hang...perspective...

Sometimes asking for another opinion on a project, piece of code, or project can yield to better results (and maybe cheaper).

Quick tip...

I'll get on posting more often now but here is a quick tip/code sample...

Sometimes you get customer/person info in the last, first format and you need first last...here is a quick reg expression to take care of that...

select REGEXP_REPLACE(
       'last, first',
       '(.*), (.*)', '\2 \1') name
from dual;

NAME       
----------
first last