Domino View design Part4: View Navigation using UP and DOWN arrow keys

A Javascript technique enables domino view document(s) navigation using UP and DOWN arrow keys and ENTER key to open a document. You don't need to use mouse to browse documents and click event to open the document.

JS Functions:
1. view_onloadfunction() - This function called from form 'onLoad()' event, this sets the keypressHandler() function for the contents of View body div tag also sets border and header colors. You can avoid this function by calling the keypressHander() directly from onload event.

2. view_keypressHandler() - This function operates whenever there is a key pressed. For KeyUp, KeyDown events, this will increment or decrement the rowid and call the highlight row function.

3.highlightrow() - This function loops through all the TR tags and hightlight the selected row and changes the first column image to arrow image.


Follow these steps to implement this tip.

1.Create a $$ViewTemplateDefault form

2.Create a DIV tag with name "ViewBody"

3.Embed a view or create a $$ViewBody field

4.End the DIV tag

5.In the 'JSHeader' event copy paste the javascript below

var rowid = 1;
var totalrows = 0;
var keypress_scroll_limit = 20;
var viewdivid = "ViewBody";
var columnheadercolor = 'lightblue';
var rowhighlightcolor = '#efefef';
var rowhighlightimage = "/icons/expand.gif";

//function to set the keypress event and some table color, border setting
//this function called from 'onload()' event
function view_onloadfunction() {
var viewdivobj = document.getElementsByName(viewdivid).item(0);
var tableElements = viewdivobj.getElementsByTagName('table');
var table = tableElements[tableElements.length - 1] ;
table.border=1;
headers = table.getElementsByTagName("th") ;
rows = table.getElementsByTagName("tr") ;
totalrows = rows.length;

for( i = 0; i < headers.length; i++) {
headers[i].bgColor = columnheadercolor ;
}

//hightlight the first row
highlightrow(rowid);
// view key press handler function
viewdivobj.onkeydown = view_keypressHandler;
}

// VIEW KEY PRESS HANDLER
function view_keypressHandler (evt)
{


if(!evt && window.event) {
evt = window.event;
}
var key = evt.keyCode;

var KEYUP = 38;
var KEYDOWN = 40;
var KEYENTER = 13;
var KEYTAB = 9;
// act only for these key press events
if ((key != KEYUP) && (key != KEYDOWN) && (key != KEYENTER) && (key != KEYTAB))
return true;

if (key == KEYUP) {
if(rowid != 1) {
rowid = rowid -1; }
highlightrow(rowid);
if(rowid >= totalrows - keypress_scroll_limit) {
// control the scrollbar movement while KEYUP
return false;
}
}
if (key == KEYDOWN) {
if(rowid>=totalrows-1) {
rowid = rowid; }
else {
rowid = rowid + 1; }
highlightrow(rowid);
if(rowid<=keypress_scroll_limit) {
// control the scrollbar movement while KEYDOWN
return false;
}
}
return true;
}

//function to hightlight the current row
function highlightrow(rownum)
{
var viewdivobj = document.getElementsByName(viewdivid).item(0);
var tableElements = viewdivobj.getElementsByTagName('table');
var table = tableElements[tableElements.length - 1] ;
rows = table.getElementsByTagName("tr") ;
for( i = 1; i < rows.length; i++) {
if( i == rownum) {
rows[i].bgColor = rowhighlightcolor; // The row background color used for highlighting
Atag = rows[i].getElementsByTagName("A");
if(Atag.length > 0) {
Ahref = Atag[0].href;
Atag[0].focus();
// By default domino create a blankimage in the first column,
// we change the image src to our custom arrow image
AImage = rows[i].cells[0].getElementsByTagName("IMG");
AImage[0].height = 10;
AImage[0].src = rowhighlightimage; // You can also use custom arrow image
}

}
else {
rows[i].bgColor = '#ffffff';
AImage = rows[i].cells[0].getElementsByTagName("IMG");
AImage[0].height = 0
AImage[0].src = "";
}
}
}

6.Call 'view_onloadfunction()' javascript function in the 'onLoad()' event
7. Open the view in web browser



You can see the first row highlighted with color and a blue arrow key image on the left side. Now you can use UP and DOWN arrow keys to navigate the document.Press the ENTER key to open the document.

Note: The script will start work only when the cursor is inside the view body. If you are moving the cursor manually into some other page and pressing the UP and DOWN buttons will not trigger the view body key press event. In that case you have click any where inside the view body to start the event handler again.

Other Domino View Design Tips:
Domino View design Part1: Alternate row color
Domino View design Part2: Freezing Column Headers
Domino View design Part3: Freezing first column