Kwintessential Notes

I love Bob Obringer’s solution for a view navigator. Especially you can easily improve the user’s navigation experience in existing applications.

For example I received a few days ago a request to investigate the options to improve performance on a view. After a quick investigation default a view was opened with the URL parameter &Count=1000. Happy waiting! Further the application enables you to navigate through the documents by opening a categorized view with &RestrictToCategory= parameter, again followed by the &Count=1000 parameter.

Implementing Bob’s solution for the flat was was piece of cake, just copy & paste.

Unfortunately Bob’s approach only works on a flat view and some of the functionality it is is not suitable for a categorized view:

• the cookie function
• the function to enter a page number directly in an input field

 Therefor I rewrote the script a bit, preserving 95% of Bob’s code. Thanks Bob!

URL opened:

http://server.domain.com/path/database.nsf/web_internetRegionCat?OpenView&RestrictToCategory=USA&Count=15

// initViewNav function, loaded at onLoad event of form
/************************************************/
function initViewNav(range, cache, div1, div2) {
 navRange = range;
 navCache = cache;
 navDiv1 = div1;
 navDiv2 = div2;
 startDoc = queryString(‘start’);
 startDoc = (startDoc == “”) ? 1 : parseInt(startDoc);
 docsPerPage = queryString(‘count’);
 docsPerPage = (docsPerPage == “”) ? 20 : parseInt(docsPerPage);
 waitForDocCount()
}

// QueryString function
/****************************************************/
function queryString(key){
 var page = new PageQuery(window.location.search);
 return unescape(page.getValue(key.toLowerCase()));
}

function PageQuery(q) {
 if(q.length > 1) this.q = q.substring(1, q.length);
  else this.q = null;
 this.keyValuePairs = new Array();
 if(q) {
  for(var i=0; i < this.q.split(“&”).length; i++) {
   this.keyValuePairs[i] = this.q.split(“&”)[i].toLowerCase();
  }
 }
 this.getKeyValuePairs = function() { return this.keyValuePairs; }
 this.getValue = function(s) {
  for(var j=0; j < this.keyValuePairs.length; j++) {
   if(this.keyValuePairs[j].split(“=”)[0] == s)
   return this.keyValuePairs[j].split(“=”)[1];
  }
  return “”;
 }
 this.getParameters = function() {
  var a = new Array(this.getLength());
  for(var j=0; j < this.keyValuePairs.length; j++) {
   a[j] = this.keyValuePairs[j].split(“=”)[0];
  }
  return a;
 }
 this.getLength = function() { return this.keyValuePairs.length; }
}
/****************************************************/

// Cookie functions
/****************************************************/
function getExpiryDate(minutes){
 var UTCstring;
 Today = new Date();
 nomilli = Date.parse(Today);
 // Today.setTime(nomilli + (minutes * 60000));
 // Today.setTime(nomilli + (minutes * 0)); 
 // Means Cookies disabled!
 // This done because we work with a &RestrictToCategory command in a categorized view and we switch all the time from categories…
 Today.setTime(nomilli + (minutes * 0));
 UTCstring = Today.toUTCString();
 return UTCstring;
}

function setCookie(name, value, duration){
 cookiestring = name + “=” + escape(value) + “; EXPIRES=” + getExpiryDate(duration);
 document.cookie = cookiestring;
}

function getCookie(cookiename) {
 var cookiestring = “” + document.cookie;
 var index1 = cookiestring.indexOf(cookiename);
 if (index1 == -1 || cookiename == “”) return “”;
  var index2 = cookiestring.indexOf(‘;’, index1);
 if (index2 == -1) index2 = cookiestring.length;
  return unescape(cookiestring.substring(index1 + cookiename.length + 1, index2));
}
/*****************************************************/

// Get View Navigator HTML
/*****************************************************/
var startDoc = 0;
var docsPerPage = 0;
var totalPages = 0;
var navRange = 0;
var navCache = 0;
var navDiv1 = “”;
var navDiv2 = “”;
// var checkCookie = true;
// cookies has not use with a &RestrictToCategory command in a categorized view
var checkCookie = false;
var totalDocs = “”;
function waitForDocCount() {
 if (checkCookie) {
  totalDocs = getCookie(‘totaldocs’);
  checkCookie = false;
 }
 if (totalDocs == “”) {
  getDocCount();
  setTimeout(“waitForDocCount()”, 100);
 } else {
  drawViewNav();
 }
}
/*******************************************************/

// Function to get document count using XMLHTTP
/*******************************************************/
function getDocCount () {
 var xmlHttp = getXMLHTTP();
 xmlHttp.open(“GET”, dbPath + viewAlias + “?ReadViewEntries&RestrictToCategory=”+ Categories );
 xmlHttp.onreadystatechange = function() {
  if (xmlHttp.readyState == 4 && xmlHttp.responseText) {
   var resp = xmlHttp.responseText;
   var countTag = resp.toLowerCase().indexOf(‘toplevelentries’);
   if (countTag > 0) {
    resp = resp.substr(resp.indexOf(‘”‘, countTag) + 1);
    totalDocs = resp.substring(0, resp.indexOf(‘”‘));
    setCookie(‘totaldocs’, totalDocs, navCache)
   }
  }
 };
 xmlHttp.send(null);
}
/**************************************************/

// Wrapper function to get a cross browser XMLHTTP object
/**************************************************/
function getXMLHTTP() {
 // function to create an XmlHttp object
 var xmlHttp = null
 try {
  xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP”)
 } catch(e) {
  try {
   xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”)
  } catch(oc) {
   xmlHttp = null
  }
 }
 if(!xmlHttp && typeof XMLHttpRequest != “undefined”) {
  xmlHttp = new XMLHttpRequest()
 }
 return xmlHttp
}
/**************************************************/
// viewnav.js file
/**************************************************/
function drawViewNav() {
 // Do all our calculations to find out where we are in the view
 partialPages = totalDocs / docsPerPage;
 extraPage = (partialPages == Math.floor(partialPages)) ? 0 : 1;
 totalPages = Math.floor(partialPages) + extraPage;
 curPage = Math.floor(startDoc / docsPerPage) + 1
 // Figure out the number of the first and last pages to display on the navigator
 startLink = (curPage < (navRange + 1)) ? 1 : curPage – navRange;
 endLink = ((curPage + navRange) > totalPages) ? totalPages : curPage + navRange;
 // Start writing our menu 
 navHTML = “<div class=’nav’ align=’center’><table class=’navtable’ cellpadding=’0′ cellspacing=’0′><tr>”;
 // Write out the “First”, “Jump”, and “Previous” links when applicable
 if (startLink > 1) {
  navHTML = navHTML + buildLink(1, “First”);
  navHTML = navHTML + buildLink(curPage – (navRange + 1), “<<”);
 } 
 if (curPage > 1) navHTML = navHTML + buildLink(curPage – 1, “<”);
 // Generate all the page # links we want to display
 for (i = startLink; i <= endLink; i++) {
  if (i == curPage) {
   navHTML = navHTML + “<td class=’navtablecur’>” + i + “</td>”
  } else {
   navHTML = navHTML + buildLink(i, i);
  }
 } 
 // Write out the “End”, “Next”, and “Jump” links when applicable
 if (curPage < totalPages) navHTML = navHTML + buildLink(curPage + 1, “>”);
 if (endLink < totalPages) {
  navHTML = navHTML + buildLink(curPage + (navRange + 1), “>>”);
  navHTML = navHTML + buildLink(totalPages, “Last”);
 }
 // Close the list of links
 navHTML = navHTML + “</td>” 
 // Write out the “Page x of y” text and create input box
 //navHTML = navHTML + “<td class=’navpages’>Page “;
 navHTML = navHTML + “<td class=’navtablelink’>Page “;
 // input field for page number is disabled because this does not work for a categorized view
 //navHTML = navHTML + “<input title=\”Click to enter a new page number here\” onKeyUp=\”void(getPage(event, this))\” “;
 //navHTML = navHTML + “onClick=’this.select()’ onFocus=’this.select()’ type=’text’ value=’” + curPage + “‘ />”;
 navHTML = navHTML + curPage ;
 navHTML = navHTML + ” of ” + totalPages + “</td>”;  
 // Close out the menu
 navHTML = navHTML + “</tr></table></div>”;
 // Write out the navigator
 document.getElementById(navDiv1).innerHTML = navHTML;
 if (typeof navDiv2 != “undefined”) document.getElementById(navDiv2).innerHTML = navHTML;
  document.getElementById(‘view’).style.display = ‘block’;
}

function buildLink(pageNum, text) {
 startLinkDoc = (((pageNum – 1) * docsPerPage) + 1);
 endDoc = (pageNum == totalPages) ? totalDocs : startLinkDoc + docsPerPage  // Check for last page when creating tooltip range
 linkHTML = “<td class=’navtablelink’ onmouseover=\”this.className=’navtablelink_on’\” onmouseout=\”this.className=’navtablelink’\” “
 linkHTML = linkHTML + “title=’Page ” + pageNum + ” : Documents ” + startLinkDoc + ” through ” + endDoc + “‘ “;
 linkHTML = linkHTML + “onclick=document.location.href=’” + viewAlias + “?OpenView&RestrictToCategory=“  + Categories + “&Start=” + startLinkDoc + “&Count=” + docsPerPage + “‘>” + text + “</td>”;
 return linkHTML;
}

function getPage(event, field) {
 var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
 if (keyCode == 13) {
  newPage = field.value;
  if (newPage > totalPages || newPage < 1) {
   field.select();
   return false;
  }
   document.location.href = dbPath + viewAlias + “?OpenView&RestrictToCategory=”  + Categories + “&Start=” + (((newPage – 1) * docsPerPage) + 1) + “&count=” + docsPerPage
 }
}
/************************************************************/

The variable Categories is a value I receive from one of the dialoglists on top of the screen. The screen is a frameset with 2 frames.

In the dialoglist I have a JS OnChange event opening the url in the bottom frame:

varURL = “web_internetRegionCat?OpenView&RestrictToCategory=” + varSelect + “&Count=” + varNumPage}

In the bottom frame I open a View via a ‘$$ViewTemplate for viewname’ Form. In the HTML Head section of the Form I calculate the variable Categories, via:

varCategories:=@Right(Query_String_Decoded;”OpenView&RestrictToCategory=”);
varCategories:=@If(@Contains(varCategories;”&Start”);@Left(varCategories;”&Start”);@Left(varCategories;”&Count”));