BP203: A Look Under the Hood
at a World-Class IBM Lotus Domino Web Application


Scott Good
President
Teamwork Solutions, ...
Scott Good – Bio
  President, Teamwork Solutions, one of Lotus’ earliest BPs

  Started with Notes 2.1 (1992)

  Extensive...
Henry Newberry – Bio
  Director of Technical Services at Teamwork Solutions, Inc.

  Formerly President of Newbs Consultin...
We were …
 Asked by Kevin Cavanaugh and Bob Balaban to re-build the Lotus
 on-line forums to take advantage of Web 2.0 cap...
Agenda
 Introduction to the problem

 System setup and definition

 Handling of views and navigation

 Handling individual...
Introduction to the ------------------ Opportunity
                     problem
   Existing forums were Domino-based but…
...
Before and After
System Setup Overview
  A hub-and-spoke arrangement of a single Central database and
  multiple external Forums (databases...
System Setup: Forum Databases
  One central database per “suite” (e.g., Lotus Symphony)

  One database per “Forum”
     I...
System Setup: Central Database
   Central database
       Contains forum and area configuration documents
       Contains ...
System Setup: Forums

                IBM
            Presentations           From the Home page, links to Forums
        ...
System Setup: Creating a New Forum
  Create new Forum database
  from template

  Create On-Line Forum
  Configuration for...
Central Database Home Page
  Our plan…
     Get something on-screen immediately (core page, header)
     Get most importan...
AJAX, then AJAX, then more AJAX
  1 AJAX lookup in the onLoad to get all the Forums and sections
     ?ReadViewEntries&Out...
Home Page Links to Each Forum…
  Primary link to the database (“IBM Spreadsheets”)

  Links to each individual Section (“F...
Forum Views
  AJAX content retrieval and pagination

  Response hierarchy creation

  UI Navigation approach (tracking via...
Forum Views
  Two options
     Main Forum view
     Forum Section

  Both are the same view, same $$ViewTemplate
     View...
When the View Opens…
  Core HTML is loaded
     And JavaScript
     And CSS

  Main view documents (top-level documents) a...
How the Views Work
  Initial URL determines what will be shown
     AllDateThreadedWeb?OpenView&RestrictToCategory=All
   ...
AJAX 1…Main Documents
  onLoad event of $$ViewTemplateDefault calls an initView() function
  and starts the first of a ser...
How to Know What to Show
  Since all data is retrieved with AJAX, URL never changes
     Without tracking current user pos...
AJAX 2…Forum Sections
  Forum Section list is retrieved from the Central Database
     Retrieve Forum Section names (a cac...
AJAX 3…Response Hierarchy in the View
  Only top-level documents load when the view is first shown

  Responses are loaded...
View Load Review
  Initial HTML, including breadcrumbs

  Main Documents

  Forum Section links (if needed)

  Response hi...
Opening a Thread
  Clicking on any document or any of its responses opens the top-
  level document with all responses ren...
Creating a New Document
  Click “Post a Topic” link from virtually anywhere in the site to create
  a new Topic (main docu...
Saving a New Post
  Returns you to where you were in the view
     With the right things expanded

  Traversing laterally ...
Document “View” Counter
  Each time a document is opened, a Profile document (used by all
  documents) is incremented
Guest Preferences
  Guest Preferences allow users to set values for
     Number of rows displayed per page
     Time Zone ...
Searching
  There are two types of searching
     Just within the current Forum (from anywhere in a Forum)
     Across all...
Single-Database Searching
  Search query is built with JavaScript into a URL
      searchview?searchview&query=replication...
Cross-Database Searching
  A little more complicated than single-database searching

  Surprisingly—shockingly—fast

  Is ...
Custom JSON Search View
  Used custom JSON to make it easier to get only the information we wanted
  back
     Enough to b...
Custom Search ViewTemplate
  $$ViewTemplate for MultiDbSearchView

  JSON object contained in a <div> for JavaScript parsi...
In the Home Page…
  Starting a search puts query on the URL and calls SearchResults
  form
     window.location = quot;Sea...
SearchResults form…
  Is very much like $$ViewTemplateDefault in layout, format
       Includes fields for Advanced Search...
Parsing AJAX Return Values for JSON
  $$ViewTemplate for MultiDbSearchView returns a big bunch of
  HTML around the part y...
Parsing AJAX Return Values for JSON
  $$ViewTemplate for MultiDbSearchView returns a big bunch of
  HTML around the part y...
Getting the JSON Out of that Mess
  It’s as simple as finding the locations of the <div> and </div> tags
  in the string t...
Why Not Use an Agent for Searching?
  One reason: Speed

  Using the Domino-standard searching against a Full-Text Indexed...
Finishing the Search
  Once JSON is back from all Forums, page is built

  JavaScript iterates through all JSON objects bu...
Most Popular Topics
  Similar to multi-Forum searching

  On the initial Home page load, all Forums are
  queried (via AJA...
Cascading Style Sheets
  Our design is based on that used for interim Jive-based site

  Most of our application was done ...
Lessons Learned
  Don’t count on others to never change their CSS

  JavaScript compression options can make an enormous d...
Thank you!
                          Scott Good: sgood@teamsol.com
                                 614-457-7100 x200
    ...
Upcoming SlideShare
Loading in …5
×

A Look Under the Hood at a World-Class IBM Lotus Domino Web Application

2,174 views
2,100 views

Published on

Introduction to the problem
􀂃
System setup and definition
􀂃
Handling of views and navigation
􀂃
Handling individual threads
􀂃
Creating new threads and responses
􀀗
Dojo Editor
􀂃
Searching
􀀗
Within one forum
􀀗
Across multiple forums
􀂃
Most Popular Topics

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,174
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
85
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

A Look Under the Hood at a World-Class IBM Lotus Domino Web Application

  1. 1. BP203: A Look Under the Hood at a World-Class IBM Lotus Domino Web Application Scott Good President Teamwork Solutions, Inc. Henry Newberry Director of Technical Services Teamwork Solutions, Inc. ®
  2. 2. Scott Good – Bio President, Teamwork Solutions, one of Lotus’ earliest BPs Started with Notes 2.1 (1992) Extensive experience building workflow applications for both Notes and the web Have published over 50 articles on Notes & Domino application development (LotusScript, JavaScript, CSS, AJAX, JSON, etc) Contributing Editor, Lotus Advisor magazine Regular speaker at Lotusphere and Advisor conferences
  3. 3. Henry Newberry – Bio Director of Technical Services at Teamwork Solutions, Inc. Formerly President of Newbs Consulting, Inc. (2000-2005) Cofounder of Synergistics, Inc. (1993-2000) Notes Pioneer at CBIS (1989-1993) Lotus Advisor Contributor, Speaker, and Editorial Advisory Panel since 1996 Speaker at IBM Lotus events since 2001
  4. 4. We were … Asked by Kevin Cavanaugh and Bob Balaban to re-build the Lotus on-line forums to take advantage of Web 2.0 capabilities And, to do it using Domino The result is a really interesting Domino web application which we’re going to share with you today
  5. 5. Agenda Introduction to the problem System setup and definition Handling of views and navigation Handling individual threads Creating new threads and responses Dojo Editor Searching Within one forum Across multiple forums Most Popular Topics
  6. 6. Introduction to the ------------------ Opportunity problem Existing forums were Domino-based but… Old Slow Ugly Every click required a full page refresh View twisties Each response in a thread Etc Goal was to rebuild the forums to take advantage of AJAX, JSON, DHTML and CSS to make an attractive, fast, easy-to-use site And, to NOT lose all information currently in the old forums And, wherever possible, to take advantage of Domino’s strengths
  7. 7. Before and After
  8. 8. System Setup Overview A hub-and-spoke arrangement of a single Central database and multiple external Forums (databases) IBM Presentations Forum Support Forums “Home” IBM IBM Documents Spreadsheets Forum Forum
  9. 9. System Setup: Forum Databases One central database per “suite” (e.g., Lotus Symphony) One database per “Forum” IBM Lotus Spreadsheets Forum IBM Lotus Documents Forum IBM Lotus Presentations Forum In each Forum, any number of “sections” Feature Requests Feedback (general discussion) Hints and Tricks Issues and Troubleshooting Sections do not need to match from Forum to Forum Each section contains the actual documents and responses
  10. 10. System Setup: Central Database Central database Contains forum and area configuration documents Contains the main Home page with links to all forums and forum sections Searches done from here reach into all forum databases Collects “Most Popular Topic” information from all forums Feature Forums Requests Home Section Page Forum Configuration Feedback Support Forums Section Most Central Popular Database Topics Hints & Tips Section Multi- Forum Searching Issues & Troubleshooting Section
  11. 11. System Setup: Forums IBM Presentations From the Home page, links to Forums Forum Each Forum reads configuration information in Central Db to get Sections Feature Requests Central Database Feedback Section IBM Spreadsheets Forum Hints IBM Spreadsheets Section Documents Forum Forum Configuration Issues Section
  12. 12. System Setup: Creating a New Forum Create new Forum database from template Create On-Line Forum Configuration form in Central database Automatically creates a keyword doc in the Forum database to let Forum find the central database Create one or more Forum Section documents to define that Forum’s sections Close and reopen the browser (to clear the cache) Done
  13. 13. Central Database Home Page Our plan… Get something on-screen immediately (core page, header) Get most important content next (Forum links) Get less-important content last (Most Popular Topics) Give the user something to look at ASAP
  14. 14. AJAX, then AJAX, then more AJAX 1 AJAX lookup in the onLoad to get all the Forums and sections ?ReadViewEntries&OutputFormat=JSON Uses JavaScript to build the central page area’s HTML on the fly 2 Get the Most Popular Topics Pulls top 5 topics from each Forum (sequentially, with AJAX) As a custom JSON format…more about this later Collates, sorts, builds HTML of top Topics and puts them on the page Results are cached during your session
  15. 15. Home Page Links to Each Forum… Primary link to the database (“IBM Spreadsheets”) Links to each individual Section (“Feature Requests,” etc) Information for each Section on… Last post date/time Number of main topics Total number of posts Number of views
  16. 16. Forum Views AJAX content retrieval and pagination Response hierarchy creation UI Navigation approach (tracking via cookies, breadcrumbs) User preferences options
  17. 17. Forum Views Two options Main Forum view Forum Section Both are the same view, same $$ViewTemplate View: AllDateThreadedWeb Section “views” don’t display the list of other sections Main Forum view DOES have links to all sections What you see is controlled by the URL, Cookies
  18. 18. When the View Opens… Core HTML is loaded And JavaScript And CSS Main view documents (top-level documents) are retrieved Then Forum Section information (if needed) from Central Db Cached AJAX query…very fast THEN, if needed, documents for open response hierarchies Each component is built and displayed as it is available
  19. 19. How the Views Work Initial URL determines what will be shown AllDateThreadedWeb?OpenView&RestrictToCategory=All AllDateThreadedWeb?OpenView&RestrictToCategory=Feature%20Requests Initial URL does not return any view information $$ViewTemplateDefault does not have a $$ViewBody field All view information is built on the fly from AJAX query returns and placed into the existing HTML $$ViewTemplateDefault DOES have… HTML used for the rest of the page Many computed JavaScript variables Notes fields with lookups JavaScript libraries CSS libraries
  20. 20. AJAX 1…Main Documents onLoad event of $$ViewTemplateDefault calls an initView() function and starts the first of a series of AJAX calls Gets the main View documents (using AJAX) AllDateThreadedWeb?ReadViewEntries&OutputFormat=JSON&count=10 &RestrictToCategory=All&CollapseView&nocache=1196698255351 Pulls main docs data from a multi-column view using Domino’s standard JSON format Returned string needs converted to become “live” JSON eval(quot;forumLinksJSON = quot; + forumLinksAjax.responseText); JSON data is built into a ViewObj class Within class, builds HTML for the “view,” places it on-screen document.getElementById(quot;ViewOutputquot;).innerHTML = …;
  21. 21. How to Know What to Show Since all data is retrieved with AJAX, URL never changes Without tracking current user position, returning to the view (e.g., “Back” button) would always take you to the first page…not good Have to keep track of where you are and rebuild accordingly Current view location is managed with cookies View position/lines per view (per Forum) 21~10 Expanded row numbers (per Forum) 21~21.1~21.1.1~22 Whenever view is opened, this is read and used to control what part of the view is actually returned
  22. 22. AJAX 2…Forum Sections Forum Section list is retrieved from the Central Database Retrieve Forum Section names (a cached lookup) /MainDb/ForumAreaLookups?ReadViewEntries&OutputFormat=json&count=200 Pulls necessary information from multi-column view, again using Domino’s standard JSON format If the view “category” is not “All,” this is ignored Because it’s cached…it’s incredibly fast Otherwise, JSON is converted using eval(), processed with JavaScript, and added to the page
  23. 23. AJAX 3…Response Hierarchy in the View Only top-level documents load when the view is first shown Responses are loaded when any “twistie” is clicked ALL descendants of a given topic are loaded when the top-level twistie is clicked, but only displayed one level at a time No descendants are loaded for any hierarchy not clicked A delayed call in the onLoad event resets hierarchy when returning setTimeout(quot;reOpenViewToPriorSettings()quot;, 100); Reads cookie to know which response sets to re-load Reads cookie to know which elements of the hierarchy should be expanded Gives users the expected experience when hitting “back” or otherwise returning to the view from somewhere else
  24. 24. View Load Review Initial HTML, including breadcrumbs Main Documents Forum Section links (if needed) Response hierarchies as needed Reset expanded response trees
  25. 25. Opening a Thread Clicking on any document or any of its responses opens the top- level document with all responses rendered into it HTML for the main document loads with the form, all responses are retrieved with AJAX Response hierarchy is displayed with indentation Every document and response has a “respond” link allowing users to respond to any point in the thread (as you would expect) Lateral navigation to next and previous documents in the view
  26. 26. Creating a New Document Click “Post a Topic” link from virtually anywhere in the site to create a new Topic (main document) Click “respond” in any of the document hierarchies to respond to a part of an existing thread Both the document and response are almost identical and kept as simple as possible User name and e-mail address are stored in a cookie (user are not required to be authenticated)
  27. 27. Saving a New Post Returns you to where you were in the view With the right things expanded Traversing laterally through documents (using Next/Previous) View location keeps track of where the document you’re in (now) is located As you move to documents in the next segment of the view, returning to the view puts you in the new location
  28. 28. Document “View” Counter Each time a document is opened, a Profile document (used by all documents) is incremented
  29. 29. Guest Preferences Guest Preferences allow users to set values for Number of rows displayed per page Time Zone (which is ignored) After changing settings, you’re returned where you came from with the new settings in effect Adjusts view paging to put you in the “same” place From 7th page on a 10/page setting to the 3rd page on a 25/page setting
  30. 30. Searching There are two types of searching Just within the current Forum (from anywhere in a Forum) Across all Forums (only available from the main Home page) The two search types use two different search techniques HTML-formatted search view (current Forum searching) Custom JSON-formatted search views (multi-Forum searching)
  31. 31. Single-Database Searching Search query is built with JavaScript into a URL searchview?searchview&query=replication%20and%20conflict SearchView is a view formatted in HTML to display nicely in the browser Uses $$SearchTemplateDefault form to display results $$ViewBody field controls placement of “view,” which is really just search results from the view Advanced Search option (on the $$SearchTemplate) expands the parameters to further refine the search searchview?searchview&query=replication%20and%20conflict&SearchOrder=1&SearchWv= TRUE&SearchFuzzy=TRUE&SearchMax=250 These are all standard Domino capabilities/URL parameters Again, constructed with JavaScript based on selections in the available fields Requires database to be Full-Text Indexed
  32. 32. Cross-Database Searching A little more complicated than single-database searching Surprisingly—shockingly—fast Is initiated from the Home page in the Central database When started, makes an AJAX search query to each of the associated Forums, one at a time As one set of results is returned, the next query is sent Continues until all Forums have been touched Queries are made to custom JSON views NOT Domino’s JSON format Query results are organized using a special $$ViewTemplate for the view
  33. 33. Custom JSON Search View Used custom JSON to make it easier to get only the information we wanted back Enough to build a results page with links to documents in the various Forums Our format for each line in the view… { sprid: quot;WEBB76TFX3quot;, unid: quot;00EA8A8C84B104EC0525834F005AFC36quot;, dbtitle: quot;IBM Spreadsheetsquot;, dbpath: quot;IBMSpreadsheetForum.nsfquot;, subject: quot;Full-text search not working?quot;, date: quot;09/07/2007quot;, author: quot;John Doequot;, numviews: quot;12quot;, dbform: quot;Feedbackquot; }, NOTE the closing comma
  34. 34. Custom Search ViewTemplate $$ViewTemplate for MultiDbSearchView JSON object contained in a <div> for JavaScript parsing purposes More about this in a moment Blank set of values at the end because each live of the view ends with a comma
  35. 35. In the Home Page… Starting a search puts query on the URL and calls SearchResults form window.location = quot;SearchResults?Open&query=” + escape(document.forms[0].SearchField.value);
  36. 36. SearchResults form… Is very much like $$ViewTemplateDefault in layout, format Includes fields for Advanced Search Has onLoad event which starts the cascade of AJAX searches doSearch() builds search URL and calls makeSearch() which makes all AJAX calls function makeSearch(){ queryUrl = quot;/quot; + searchDbPaths[curDb] + quot;/multidbsearchview?searchview&searchmax=0quot; + queryVal; curDb++; createAJAXRequest(queryUrl, quot;handleMultiDbSearchquot;); } handleMultiDbSearch() continues to call makeSearch() until all Forums have been searched
  37. 37. Parsing AJAX Return Values for JSON $$ViewTemplate for MultiDbSearchView returns a big bunch of HTML around the part you actually want
  38. 38. Parsing AJAX Return Values for JSON $$ViewTemplate for MultiDbSearchView returns a big bunch of HTML around the part you actually want Can’t change the form to display as HTML or as “text/plain” because neither will work with a form being “edited” Have to live with the mess and parse it out Hence, the <div> around the JSON object…a handle to grab with JavaScript
  39. 39. Getting the JSON Out of that Mess It’s as simple as finding the locations of the <div> and </div> tags in the string that is the HTML var searchHTML = ajaxReq.responseText; var divStart = searchHTML.indexOf(quot;<div>quot;) + 5; var divEnd = searchHTML.indexOf(quot;</div>quot;); var viewStr = searchHTML.substring(divStart, divEnd); eval(quot;var viewObj = quot; + viewStr); Of course, you have to know there are no <div> tags in the text
  40. 40. Why Not Use an Agent for Searching? One reason: Speed Using the Domino-standard searching against a Full-Text Indexed database is amazingly fast Agents give you flexibility you can’t really get out of a view That flexibility comes with a cost…it’s slower We didn’t need the flexibility
  41. 41. Finishing the Search Once JSON is back from all Forums, page is built JavaScript iterates through all JSON objects building HTML Search results are segregated by Forum
  42. 42. Most Popular Topics Similar to multi-Forum searching On the initial Home page load, all Forums are queried (via AJAX) for the Most Popular Topics Based on the number of views Query is made to a custom JSON view sorted by view count Only five documents are returned from each database Results from all Forums are combined and sorted Top five (plus ties) are displayed Results are cached during the user’s session
  43. 43. Cascading Style Sheets Our design is based on that used for interim Jive-based site Most of our application was done before we got access to actual CSS code Built it from screen shots Then re-built it to match, using CSS from IBM (ON IBM site) plus localized adjustments needed for our system Then IBM’s CSS changed…a little Now we store ALL our own CSS in the databases
  44. 44. Lessons Learned Don’t count on others to never change their CSS JavaScript compression options can make an enormous difference in file sizes (and corresponding page-load speeds) Sequentially searching across multiple databases is amazingly fast if you leverage the Domino search mechanisms FireBug ROCKS!
  45. 45. Thank you! Scott Good: sgood@teamsol.com 614-457-7100 x200 http://www.scottgood.com (blog) Teamwork Solutions Henry Newberry: newbs@teamsol.com 614-457-7100 x206 http://www.henrynewberrry.com (blog) http://www.teamsol.com PLEASE FILL OUT YOUR EVALUATIONS

×