Improve those Tabular Forms

Some of the new features in the "Out of the Box" tabular forms are great.  Here are a few tips to add
some spice to both the Out of the Box and Custom Tabular Forms.
  1. Add arrow key navigation.  This makes the tabular form work more like Excel and facilitates quicker data entry.  It's also a nice "accessibility" feature for users that navigate with the keyboard only.
  2. Remove the auto-complete feature added by most modern browsers.  This adds little value to a tabular form and screws up the arrow key navigation.
  3. If you are producing a Custom Tabular Form, then add the "Save Changes" before pagination feature.
  4. Add select all on focus.  This allows data to updated quicker and solely using the keyboard number pad.
To implement these feature add the following attributes to the input tag:

autocomplete="off" onkeyup="moveUpDown($(this), event)"

And then add the following JS functions:

// Save changes in tabular form before pagination

var p_changes = false;

$(document).ready(function () {
    $('.apexir_WORKSHEET_DATA,[id^="datatable"]').live('change', function () {
        p_changes = true;
    });
    $('a[href^="javascript:gReport"],a[href^="javascript:apex.widget.report.paginate"]').live('click',
        function (event) {
            if (p_changes) {
                if (confirm('"SAVE_CHANGES_MSG"')) {
                    p_changes = false;
                } else {
                    event.preventDefault();
                }
            }
        });
});

// will select all contents of a text field on focus

$(document).ready(function () {
    $("input[type=text]").focus(function () {
        // Select field contents
        this.select();
    });
});

// Arrow Key navigation

function moveUpDown(pThis, pEvent) {
    var keynum;
    var lName = pThis.attr("name");

    if (window.event) // IE
    {
        keynum = pEvent.keyCode;
    } else if (pEvent.which) // Netscape/Firefox/Opera
    {
        keynum = pEvent.which;
    }

    if (keynum == 40) // Move down
    {
        pThis.closest('tr').next().find('[name="' + lName + '"]').focus();
    }
    if (keynum == 38) // Move up
    {
        pThis.closest('tr').prev().find('[name="' + lName + '"]').focus();
    }

}



Comments