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

Domino View design Part3: Freezing first column

Column locking using CSS and Javascript.
In web, multiple columns views are displayed with horizontal scroll bar. When you move the scroll bar to the right, the left side columns will start disappear and most of the times the first column will be a key column and you want to see other column values with respective to the key column. In Microsoft excel sheet you can use the 'freeze pane' feature to lock a column. Similarly this design tip will help you to freeze the first column.

Steps:

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 columnlengthmax = 5; // Maximum column length configuration.

function freezecolumn()
{
var tableElements = document.all.ViewBody.getElementsByTagName('table');
var table = tableElements[tableElements.length - 1] ;
table.cellSpacing = '0' ;
table.border=1
headers = table.getElementsByTagName("th") ;
columnlength = headers.length; // Number of columns in the view
for( i = 0; i < headers.length; i++) {
headers[i].bgColor = '#cccccc' ;
}
rows = table.getElementsByTagName("tr") ;
var counter = 0
for( i = 0; i < rows.length; i++) {
//LOCK THE FIRST COLUMN IF THE COLUMN WIDTH EXCEEDS
if(columnlength >= columnlengthmax) {
var tr = rows.item(i);
// SET THE FIRST COLUMN CLASS NAME as 'locked'
tr.cells[0].className = 'locked';
}
}
}

6.Call 'freezecolumn()' javascript function in the 'onLoad()' event.


7.Link to style.css in the Head event
(Refer the screenshot of blog entry 'Domino View design Part2: Freezing Column Headers')


8. Create a page with name "style.css" and paste the the css style tags


div#ViewBody {
width: 100%;
height: 200px;
overflow: auto;
scrollbar-base-color:#ffeaff;
}

div#ViewBody table th {
width: 100px;
background-color: lightblue;
position:relative;
top: expression(document.getElementById("ViewBody").scrollTop-1);
z-index: 30;
}

div#ViewBody th.locked {
background-color: lightblue;
border-right: 2px solid silver;
position:relative;
cursor: default;
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
z-index: 40;
}

div#ViewBody td.locked {
background-color: #efefef;
border-right: 2px solid silver;
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
position: relative;
z-index: 10;
}


Note: by changing height parameter, you can control the height of the view display,
Also by changing the z-index, you can the change the column header starting position.

7. Open the view in web browser
If you scroll the view using horizontal scroll bar, you can see the first column is in freeze mode.