Open a record from a list without clicking on it

[CapaJC]

I like keyboard shortcuts. Always have. So I wanted to see if I could come up with a way to easily filter a list and open a record from it without my hands leaving the keyboard.

With a bit of work, I came up with a "global" UI Script that did the trick.

With this UI Script in place, from anywhere in my instance, I can type Alt+Shift+F to focus on the nav filter (not new). Then I can type "i ma" to filter down to just the UI Macros module (not new), and hit Enter to open it (not new). Then I can type "kb%" in the GoTo input to filter the list down to UI Macros starting with "kb" (not new). Then I can hit the down arrow four times to highlight the 4th record in the list (the kb_article_header macro in my case), and hit Enter to open that record (THAT part's new). No mouse, no fuss.

As far as usefulness, your mileage may vary. But it was a fun exercise 🙂

Here's the UI Script (I checked the "global" checkbox):

Disclaimer: UI is not my strength! I also did not spend time polishing the script or making it efficient. I hacked this together as a proof-of-concept.

addLoadEvent(kickIt);

function kickIt() {
    var inputs = $$(".list_search_text");
    if (inputs.length == 0)
        return;
   
    var input = inputs[0];
    input.setAttribute("onkeyup", "listGotoKeyUp(event)");
    input.setAttribute("onkeypress", "listGotoKeyPress(event)");
    input.setAttribute("onkeyblur", "listGotoBlue(event)");
}

function highlightFirstCell() {
    var rows = $$(".list_row");
    if (rows.length == 0)
        return;
   
    var firstrow = rows[0];
    var cells = firstrow.select('td[class="vt"]');
    if (cells.length == 0)
        return;
   
    var firstcell = cells[0];
    firstcell.style.backgroundColor = "palegoldenrod";
    firstcell.style.backgroundImage = "url('images/outputmsg_success.gif')";
    firstcell.style.backgroundRepeat = "no-repeat";
    firstcell.style.backgroundPosition = "98% 5px";
    return firstcell;
}

function highlightNextRow() {
    if (typeof highlightedCell == "undefined") {
        highlightedCell = highlightFirstCell();
        return;
    }
   
    var nextRow = highlightedCell.parentNode.nextSibling;
    if (nextRow == null)
        return; // already on last row
   
    var cells = nextRow.select('td[class="vt"]');
    if (cells.length == 0)
        return; // no columns in list
   
    var firstcell = cells[0];
    firstcell.style.backgroundColor = "palegoldenrod";
    firstcell.style.backgroundImage = "url('images/outputmsg_success.gif')";
    firstcell.style.backgroundRepeat = "no-repeat";
    firstcell.style.backgroundPosition = "98% 5px";
    highlightedCell.style.backgroundColor = "";
    highlightedCell.style.backgroundImage = "";
    highlightedCell.style.backgroundRepeat = "";
    highlightedCell.style.backgroundPosition = "";
    highlightedCell = firstcell;
}

function listGotoBlur() {
    if (typeof highlightedCell == "undefined" || highlightedCell == null)
        return;
   
    highlightedCell.style.backgroundColor = "";
    highlightedCell.style.backgroundImage = "";
    delete highlightedCell;
}

function highlightPreviousRow() {
    if (typeof highlightedCell == "undefined")
        return;
   
    var prevRow = highlightedCell.parentNode.previousSibling;
    if (prevRow == null) {
        highlightedCell.style.backgroundColor = "";
        highlightedCell.style.backgroundImage = "";
        delete highlightedCell;
        return;
    }
   
    var cells = prevRow.select('td[class="vt"]');
    if (cells.length == 0)
        return; // no columns in list
   
    var firstcell = cells[0];
    firstcell.style.backgroundColor = "palegoldenrod";
    firstcell.style.backgroundImage = "url('images/outputmsg_success.gif')";
    firstcell.style.backgroundRepeat = "no-repeat";
    firstcell.style.backgroundPosition = "98% 5px";
    highlightedCell.style.backgroundColor = "";
    highlightedCell.style.backgroundImage = "";
    highlightedCell.style.backgroundRepeat = "";
    highlightedCell.style.backgroundPosition = "";
    highlightedCell = firstcell;
}

function listGotoKeyUp(evt) {
    if (evt.keyCode == 40) { // down arrow
        highlightNextRow();
    return;
}

if (evt.keyCode == 38) { // up arrow
    highlightPreviousRow();
return;
}

if (evt.keyCode != 13)
    return;

// Enter key was hit
if (typeof highlightedCell == "undefined")
    return;

var anchors = highlightedCell.select('a');
if (anchors.length == 0)
    return; // nowhere to go

document.location = anchors[0].href;
}

function listGotoKeyPress(evt) {
    if (evt.keyCode != 13)
        return;
   
    listGotoKeyUp(evt);
    evt.returnValue = false;
}