AD 102 Break out of the box Integrate existing Domino data with modern websites. Karl-Henry Martinsson Deep South Insurance

Transcription

1 AD 102 Break out of the box Integrate existing Domino data with modern websites Karl-Henry Martinsson Deep South Insurance

2 I AM Swede living in Dallas Sr. Applications Developer, Deep South Insurance Life-long geek Programming since 1982 Ex-Microsoft ( ) Ex-journalist ( , freelance ) Web developer since 1994 Notes/Domino developer since 1996 IBM Champion 2014 and

3 My story Old infrastructure Company unwilling to upgrade Requesting new web applications Wanted modern look, mobile Bootstrap and jquery to the rescue:

4 Agenda Integrate existing Domino data with modern websites Why integrate? Why jquery and not XPages? Separate the workload Client Javascript/jQuery, Ajax, JSON Server Lotusscript Improve the UI Bootstrap Demos All sample code will be available for download at

5 Why integrate? Limited or no migration options Desire to modernize Code re-use Take advantage of the power of Domino No one will know you are using a Domino backend Use existing skillset Learn valuable new skills

6 Why not use Xpages? Infrastructure not supporting XPages No XPages skills Tight deadline no time to learn More control Plugin availability

7 Separate the workload Separate design and code Focus expertise on their respective areas Use established front-end technologies Back-end focus on business logic and data Collaboration is important!

8 Client modern web browser Javascript/jQuery Ajax/JSON HTML and CSS Bootstrap Ajax call JSON data.nsf

9 Server IBM Domino Lotusscript Agents NSF database Existing business logic Can use existing classes/script libraries Works on Domino since R5 Update highly recommended!

10 Where does everything live? HTML pages, CSS files and Javascript Notes page element Notes resources CDN (.js and.css) Server file system in Data/Domino/HTML Another web server Lotusscript agents.nsf on Domino server

11 Development tools Domino Designer Browser with Dev Tools Firefox with Firebug plugin Internet Explorer Developer Tools (built-in) Chrome Developer Tools (built-in) Online resources jsonlint.com Stack Overflow Google Search

12 Ajax Asynchronous Javascript And XML Asynchronous = call processed in background Result is passed back and then processed XML used first, JSON now more common Easier to parse JSON in Javascript Using few lines of jquery code

13 jquery Javascript library Free Very popular Powerful save development time Easy access to web page elements (DOM) Online resources

14 Calling Ajax using jquery $.ajax({ url: '/websites/example.nsf/ajax_getuserdetails?openagent', data: {name: Karl-Henry Martinsson }, cache: false }).done(function(data) { // Process returned data here }).fail(function(e) { // Process failed call here }); or $.ajax({ url: '/websites/example.nsf/ajax_getuserdetails?openagent', data: {name: username}, cache: false }).success(function(data) { // Process returned data here }); Can be more complex.done(),.fail() and.always() Arguments passed as JSON cache: false cache buster

15 JSON JavaScript Object Notation Describe data as Javascript objects Preferred to XML in web applications Less chatty (less bandwidth) Very easy to access values directly in Javascript Any data types, including other objects Array of objects

16 Generate JSON on Domino?ReadViewEntries&OutputFormat=JSON Available in Domino Can be hard to parse Formula in Notes view Lotusscript agent Generate your own JSON Test at JSONLint.com Use JSON classes o o My Class.JSON JSON Lotusscript Classes by Troy Reimer (OpenNTF.org)

17 Generate JSON on Domino Xpages Style XPages agent (SSJS XAgent) Domino and XPages knowledge Better performance than Lotusscript REST Services control from Extension Library Domino and ExtLib on server

18 Demo 1 Text/HTML response First button will update specified element with text Static text - stored in the Javascript source code Second button will trigger an Ajax call to server Server agent returns plain text No parsing of name-value pairs No database lookups or other server interaction Returned text can contain HTML Javascript updates specified element with returned text Google as CDN for jquery jquery also hosted by Microsoft and others

19 Demo 1 Web page <!DOCTYPE HTML ><html> <head> <title>demo 1 - MWLUG 2015</title> <script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script> </head> <body> <div id="content"></div> <button id="btndisplaystaticcontent">show content from page</button> <button id="btndisplayservercontent">load content from server</button> <script> $(document).ready(function () { // Update content div with content from this page $('#btndisplaystaticcontent').click( function() { var content = "This is some static content from this page"; $('#content').html(content); }); // Update content div with content from server $('#btndisplayservercontent').click( function() { $.ajax({ url: 'ajax_demo1?openagent', cache: false }).done(function(data) { $('#content').html(data); }); }); }); </script> </body> </html>

20 Demo 1 Lotusscript agent Option Public Option Declare Sub Initialize '*** MIME Header to tell browser what kind of data we will return Print "content-type: text/html" '*** Content (HTML) to return to calling browser Print "This is content loaded from the server.<br>" Print "<em>this</em> text is returned as <strong>html</strong>.<br>" End Sub Agent settings

21

22 Demo 2 Text/HTML response Read text field, pass to server Return and display computed text Simple URL class

23 Demo 2 Web page <!DOCTYPE HTML ><html> <head> <title>demo 2 - MWLUG 2015</title> <script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script> </head> <body> Name: <input type="text" id="username"></input> <br> <br> <button id="btndisplayservercontent">load content from server</button> <br> <br> <div id="content"></div> <script> $(document).ready(function () { // Update content div with dynamic content $('#btndisplayservercontent').click( function() { // Get username from input field var username = $('#username').val(); // Make Ajax call to server, passing user name as argument $.ajax({ url: 'ajax_demo2?openagent', data: {name: username}, cache: false }).done(function(data) { $('#content').html(data); }); }); }); </script> </body> </html>

24 Demo 2 Lotusscript agent Option Public Option Declare Use "Class.URL" Sub Initialize '--- Local Notes classes used in agent Dim db As NotesDatabase Dim view As NotesView Dim doc As NotesDocument '--- Custom classes Dim url As URLData '*** Create new URLData object Set url = New URLData() '*** MIME Header to tell browser what kind of data we will return Print "content-type: text/html" '*** Check reqired values for this agent If url.isvalue("name")=false Then Print "Missing argument 'name'." Exit Sub End If '*** Process name argument If url.getvalue("name")="" Then Print "'Name' is empty." Else Print "Hello, " + url.getvalue("name") + "!" End If End Sub

25 Demo 2 URL Class Class URLData p_urldata List As String Public Sub New() Dim session As New NotesSession Dim webform As NotesDocument Dim tmp As String Dim tmparr As Variant Dim tmparg As Variant Dim i As Integer '*** Get document context (in-memory NotesDocument) Set webform = session.documentcontext '*** Get HTTP GET argument(s) after?openagent tmp = FullTrim(StrRight(webform.GetItemValue("Query_String")(0), OpenAgent&")) If tmp = "" Then '*** Get HTTP POST argument(s) tmp = FullTrim(webform.GetItemValue("Request_Content")(0))) End If '*** Separate name-value pairs into array tmparr = Split(tmp,"&") '*** Loop through array, split each name-value/argument For i = LBound(tmparr) To UBound(tmparr) tmparg = Split(tmparr(i),"=") p_urldata(lcase(tmparg(0))) = Decode(tmparg(1)) Next End Sub

26 Demo 2 URL Class %REM Function GetValue %END REM Public Function GetValue(argname As String) As String If IsValue(argname) Then GetValue = p_urldata(lcase(argname)) Else GetValue = "" End If End Function %REM Function IsValue %END REM Public Function IsValue(argname As String) As Boolean IsValue = IsElement(p_urldata(LCase(argname))) End Function '*** Private functions for this class Private Function Decode(txt As String) As String Dim tmp As Variant Dim tmptxt As String tmptxt = Replace(txt,"+"," ") tmp = & tmptxt & ") ) Decode = tmp(0) End Function End Class

27

28 Demo 3 Return JSON data Status - success or error Multiple values Error message Case sensitive!

29 Demo 3 Lotusscript JSON class Simplify JSON creation Add values (strings) and fix quotes within value Add boolean values (true/false) Set status (success or error) Send MIME type and JSON string back

30 Demo 3 Lotusscript agent Option Public Option Declare Use "Class.JSON" Sub Initialize '--- Custom class Dim json As JSONData '*** Create new JSONData object Set json = New JSONData() '*** Generate JSON to return Call json.setvalue("phonenumber", " ") Call json.setvalue(" ", "texasswede@gmail.com") Call json.setvalue("name", "Karl-Henry Martinsson") json.success = True Call json.sendtobrowser() End Sub

31 Demo 3 Return JSON data <body> <br> <button id="btndisplayservercontent">load user info</button> <br> <br> <div id="userinfo"> <div> User Name: <span id="username"></span> </div> <div> Phone number: <span id="userphonenumber"></span> </div> <div> Address: <span id="user "></span> </div> </div> <div id="errorinfo"></div> </body> Use span elements to hold values id attribute used to identify element Must be unique on page

32 Demo 3 Return JSON data $.ajax({ url: 'ajax_demo3?openagent', cache: false }).success(function(data) { if(data.status=="success") { // Populate the different fields and display the section $('#userphonenumber').html(data.phonenumber); $('#user ').html(data. ); $('#username').html(data.name); $("#userinfo").fadein(1500); } else { // Display error message passed from server $("#errorinfo").html(data.errormsg); $("#errorinfo").fadein(1000); } }); Very little code needed Put values into specified elements Case is important!

33

34 Twitter Bootstrap Open source front-end framework CSS + some jquery Responsive Themes, color schemes and plugins CDN or local copy 3 rd party resources and plugins

35 Example of web application using Bootstrap

36 Another Bootstrap web application The password reset application pictured above is a free download. You can get it at

37 Benefits of using Bootstrap Rapid development Responsive Cross-browser Plenty of resources Actively being developed

38 Potential issues with Bootstrap Only supporting the latest browsers Major changes between v2 and v3 Version specific plugins Some plugins not themeable

39 Using Bootstrap <meta name="viewport" content="width=device-width, initial-scale=1"> <title>demo 4 - MWLUG 2015</title> <script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <link href="demo4.css" rel="stylesheet"> Viewport meta tag control scaling

40 Using Bootstrap <meta name="viewport" content="width=device-width, initial-scale=1"> <title>demo 4 - MWLUG 2015</title> <script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <link href="demo4.css" rel="stylesheet"> Minified Bootstrap from BootstrapCDN.com // - works with and without SSL Will not work on local webpages, page must be on a server Local CSS located after Bootstrap CSS

41 Demo 4 Adding Bootstrap Link to Bootstrap and local CSS file Local CSS used for minor tweaks Bootstrap markup in HTML Two columns Button in left column Result in right column Responsive - columns will stack

42 Demo 4 Adding Bootstrap HTML <head> <script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <link href="demo4.css" rel="stylesheet"> HTML <body> <div class="container"> <div class="row"> <div class="col-md-6"> <button class="btn btn-primary" id="btndisplayservercontent">load user info</button> </div> <div id="userinfo" class="well col-md-6"> <label>user Name:</label> <div class="jsondata" id="username"></div> <label>phone number:</label> <div class="jsondata" id="userphonenumber"></div> <label> Address:</label> <div class="jsondata" id="user "></div> </div> </div> <div class="alert alert-danger" id="errorinfo"></div> </div>

43 Demo 4 Adding Bootstrap demo4.css container { margin-top: 20px; } label { font-size: 10pt; margin-bottom: 0px; margin-top: 10px; } label:first-child { } margin-top: 0px;.jsonData { } font-size: 12pt; Add 20 pixel margin to top of page Make label text smaller, remove bottom margin and add top margin, except on the first label Set the text size of JSON data returned to 12pt

44 Demo 4 Adding Bootstrap jquery // Hide error section and user info section $("#errorinfo").hide(); $("#userinfo").hide(); // Update content div with dynamic content $('#btndisplayservercontent').click( function() { // Make Ajax call to server $.ajax({ url: 'ajax_demo3?openagent', cache: false }).success(function(data) { if(data.status=="success") { // Populate the different fields and display the section $('#userphonenumber').html(data.phonenumber); $('#user ').html(data. ); $('#username').html(data.name); $("#userinfo").fadein(1500); } else { // Display error message passed from server $("#errorinfo").html(data.errormsg); $("#errorinfo").fadein(1000); } }); });

45

46 Demo 5 Process JSON data-json= JSON_data_element data- prefix is standard.each() Read value and get corresponding JSON $(this) current element in jquery data[ Name ] will return the JSON value Name

47 Demo 5 Process JSON jquery // For each element with class jsondata $(".jsondata").each( $("div[data-json]").each( function() function() { { // Get the field name from the custom attribute data-json // and set the content of the current element to // the corresponding JSON value jsonfield = $(this).attr("data-json"); $(this).html(data[jsonfield]); }); HTML <div id="userinfo" class="well col-md-6"> <label>user Name:</label> <div class="jsondata" id=user"name" data-json="name"></div> <label>phone number:</label> <div class="jsondata" id="userphonenumber" data-json="phonenumber"></div> <label> Address:</label> <div class="jsondata" id="user " data-json=" "></div> </div>

48

49 Demo 6 Process JSON (another way) JSON name = id of element to put data in Less HTML markup Still very little code, and very flexible Add # in front of element name! jquery $.each(data, function(id, item) { elementname = "#" + id; elementvalue = data[id]; $(elementname).html(elementvalue); }); HTML <label>user Name:</label> <div id="name"></div> <label>phone number:</label> <div id="phonenumber"></div> <label> Address:</label> <div id=" "></div>

50

51 Demo 7 Bootstrap plugin Plugin Get it at CDN hosted version at CloudFlare.com Minimal HTML markup Javascript mainly to define columns and settings

52 Demo 7 Bootstrap plugin HTML <div id="tabletoolbar"> <div class="toolbartext">my Contacts</div> </div> <table id="contacttable"></table> jquery (partial) $("#ContactTable").bootstrapTable({ url: 'ajax_demo7_getallcontacts?openagent', search: true, showrefresh: true, pagination: true, pagesize: 25, classes: "table-condensed table-hover table-striped tablecontent", toolbar: "#tabletoolbar", columns: [{ field: 'FirstName', title: 'First Name', width: 80, sortable: true }, { field: 'LastName', title: 'Last Name', width: 90, sortable: true }, {

53 Demo 7 Bootstrap Table plugin Lotusscript code (partial) '*** Get all documents in view to process Set db = session.currentdatabase Set view = db.getview("(lookupcontactsbylastname)") Set col = view.allentries '*** Start of JSON string jsonstring = '*** Loop through all entries and build JSON to return Set entry = col.getfirstentry Do Until entry Is Nothing '*** Build JSON for each entry and add to string Set json = New JSONData() Call json.setvalue("lastname", CStr(entry.ColumnValues(0))) Call json.setvalue("firstname", CStr(entry.ColumnValues(1))) Call json.setvalue("company", CStr(entry.ColumnValues(2))) Call json.setvalue("address", CStr(entry.ColumnValues(3))) Call json.setvalue("city", CStr(entry.ColumnValues(4))) Call json.setvalue("state", CStr(entry.ColumnValues(5))) Call json.setvalue("zip", CStr(entry.ColumnValues(6))) Call json.setvalue("docunid", CStr(entry.ColumnValues(9))) '*** Add new JSON to existing JSON string jsonstring = jsonstring + json.getjson() + "," + Chr$(13) Set entry = col.getnextentry(entry) Loop '*** Remove the trailing comma and line break if we have data If Len(jsonString) > 4 then jsonstring = Left$(jsonString,Len(jsonString)-2) End If '*** Add brackets for array jsonstring = "[ " + Chr$(13) + jsonstring + Chr$(13) + ] '*** MIME Header to tell browser what kind of data we will send Print "content-type: application/json" '*** Send JSON back to browser Print jsonstring

54 Demo 7 Bootstrap Table plugin

55

56 Demo 8 Simple contact database Table of contacts use bootstrap-table plugin Click on user to display more details about them Buttons Edit Save New Delete Add refresh/reload of table when updated

57 Demo 8 Simple contact database Lotusscript agents needed ajax_demo8_getallcontacts (reused from Demo 7) ajax_demo8_getcontactdetails ajax_demo8_savecontact o o If DocUNID is blank, create new contact Otherwise update existing contact ajax_demo8_deletecontact HTML page changes Add section for contact details Detect click on row to display details Add buttons and jquery code

58 Demo 8 Simple contact database HTML buttons <button class="btn btn-sm btn-primary" id="btnnewcontact">new</button> <button class="btn btn-sm btn-primary" id="btneditcontact">edit</button> <button class="btn btn-sm btn-success" id="btnsavecontact">save</button> <button class="btn btn-sm btn-danger pull-right" id="btndeletecontact">delete</button> jquery Edit and New buttons //*** Button actions $("#btneditcontact").on("click", function(e) { editcontact(); }); $("#btnnewcontact").on("click", function() { editcontact(); // Empty all input fields $('input[data-notesfield]').each( function() { $(this).val(""); }); // Empty hidden DocUNID field $("#docunid").attr("data-unid",""); // Hide Delete button $("#btndeletecontact").hide(); });

59 Demo 8 Simple contact database jquery Save button $("#btnsavecontact").on("click", function() { $("#btnsavecontact").hide(); var json = new Object(); // Store field values in JSON object var docunid = $("#docunid").attr("data-unid"); json["docunid"] = docunid; $('input[data-notesfield]').each( function() { var id = $(this).attr("id"); var notesfield = $(this).attr("data-notesfield"); json[notesfield] = $(this).val(); }); // Perform a call to the server to save values $.ajax({ url: "ajax_demo8_savecontact?openagent", type: "POST", data: json }).done(function(data) { if (data.status=="error") { alert("failure: " + data.msg); } else if (data.status=="success") { setreadmode(); // Convert INPUT back to DIV $("#contacttable").bootstraptable("refresh", {silent: true}); }).fail( function(e) { alert("failure!","failed to save contact. Error: " + e.errorthrown); }); $("#btneditcontact").show(); });

60 Demo 8 Simple contact database jquery Delete button $("#btndeletecontact").on("click", function(e) { var docunid = $("#docunid").attr("data-unid"); $.ajax({ url: "ajax_demo8_deletecontact?openagent", type: "POST", data: {DocUNID: docunid } }).done(function(data) { if (data.status=="error") { alert("failure: " + data.msg); } else if (data.status=="success") { $("#contacttable").bootstraptable("refresh", {silent: true}); // Empty all input fields $('input[data-notesfield]').each( function() { $(this).val(""); }); // Empty all div with Notes data $('div[data-notesfield]').each( function() { $(this).html(""); }); // Empty hidden DocUNID storage $("#docunid").attr("data-unid","") $("#btndeletecontact").hide(); $("#btneditcontact").hide(); } }).fail( function(e) { alert("failure!","failed to delete contact. Error: " + e.errorthrown); }); });

61 Demo 8 Simple contact database jquery Detect click on table row // Detect click on row in table $("#contacttable").on('click-row.bs.table', function (e, row, $element) { // Convert INPUT fields back to DIV just in case setreadmode(); // Hide save button if visible $("#btnsavecontact").hide(); // Get DocUNID value in table and load corresponding values from server var unid = row.docunid; displaydetails(unid); });

62 Demo 8 Simple contact database jquery Load contact details from server and display on page // Get contact details from Domino server and populate fields // using the DocUIND value as lookup key function displaydetails(docunid) { $.ajax({ url: 'ajax_demo8_getcontactdetails?openagent', data: {DocUNID: docunid}, cache: false }).success(function(data) { if(data.status=="success") { // For each element with data-notesfield attribute $('div[data-notesfield]').each( function() { notesfield = $(this).attr("data-notesfield"); if (data[notesfield]!=null) { fieldvalue = data[notesfield]; $(this).html(fieldvalue); } }); // Store DocUNID in enmpty div for later use $("#docunid").attr("data-unid",data.docunid); // Display previously hidden editand delete buttons $("#btneditcontact").show(); $("#btndeletecontact").show(); } }); }

63 Demo 8 Simple contact database jquery Change between DIV and INPUT // Put contact details into edit mode by changing DIV to INPUT function editcontact() { $("#btneditcontact").hide(); // Change all div with Notes data to input $('div[data-notesfield]').each( function() { var id = $(this).attr("id"); var notesfield = $(this).attr("data-notesfield"); var input = "<input class='jsondata inputnotesfield form-control input-sm' id='" + id input = input + "' data-notesfield='" + notesfield + "' value='" + $(this).html() + "'></input>"; $(this).replacewith(input) }); $("#btnsavecontact").show(); $("#btneditcontact").hide(); } // Put contact details into read mode by changing INPUT to DIV function setreadmode() { $('input[data-notesfield]').each( function() { var id = $(this).attr("id"); var notesfield = $(this).attr("data-notesfield"); var div = "<div class='jsondata displaynotesfield' id='" + id div = div + "' data-notesfield='" + notesfield + "'>" + $(this).val() + "</div>"; $(this).replacewith(div) }); }

64

65 Demo 9 Calendar using Domino data Similar to Demo 8, but using FullCalendar plugin Get it at Lotusscript agents ajax_demo9_getallevents Returning events between specific days Calendar automatically sends start and end date ajax_demo8_geteventdetails ajax_demo8_updateevent Triggered when moving event or changing duration Arguments: DocUNID, start date and end date

66 Demo 9 Calendar using Domino data Calendar points to JSON of event data jquery Display calendar and load JSON of event data from server var eventsource = 'ajax_demo9_getallevents?openagent'; $("#notescalendar").fullcalendar({ events: eventsource }); Calendar adds start and end dates to URL Agent returns events within date range

67 Demo 9 Calendar using Domino data Lotusscript agent ajax_demo9_getallevents (partial code) '*** Local variables to hold arguments passed from URL Dim startdate As String Dim enddate As String '*** Other local variables Dim jsontext As String '*** Create new URLData object Set url = New URLData() '*** Create new JSONData object Set json = New JSONData() '*** Check start date and convert from ISO to US date format If url.isvalue("start") Then startdate = ISOtoUS(url.GetValue("start")) Else startdate = "01/01/1980" End If '*** Check end date and convert to US date format If url.isvalue("end") Then enddate = ISOtoUS(url.GetValue("end")) Else enddate = "12/31/2199" End If

68 Demo 9 Calendar using Domino data Lotusscript agent ajax_demo9_getallevents (partial code) '*** Send MIME header to browser Print "content-type: application/json" jsontext = "" Set db = session.currentdatabase Set view = db.getview("events") Set col = view.allentries Set entry = col.getfirstentry() Do Until entry Is Nothing If CDat(entry.ColumnValues(0))>=CDat(startdate) Then If CDat(entry.ColumnValues(0))<=CDat(enddate) Then Call json.setvalue("id", CStr(entry.ColumnValues(5))) Call json.setvalue("title",cstr(entry.columnvalues(3))) Call json.setvalue("start", Format$(CDat(entry.ColumnValues(0)),"mm/dd/yyyy hh:nn ampm")) Call json.setvalue("end", Format$(entry.ColumnValues(1),"mm/dd/yyyy hh:nn ampm")) '*** Make the entry editable in calendar (allow changing date/time) Call json.setboolean("editable", True) End If End If jsontext = jsontext + json.getjson() + "," + Chr$(13) Set entry = col.getnextentry(entry) Loop If Len(jsontext)>4 Then jsontext = Left$(jsontext,Len(jsontext)-2) End If Print "[ " + jsontext + " ]"

69 Demo 9 Calendar using Domino data FullCalendar plugin Trigger code on click, resize and drop (move) eventclick: function(calevent, jsevent, view) { var unid = calevent.id; displayeventdetails(unid); }, eventresize: function(event, delta, revertfunc) { if (!confirm(event.title + " will now end at " + event.end.format("h:mm a") + "\nare you sure?")) { revertfunc(); } else { var unid = event.id; updateevent(unid,event.start.format("mm/dd/yyyy hh:mm a"),event.end.format("mm/dd/yyyy hh:mm a")); displayeventdetails(unid) } }, eventdrop: function(event, delta, revertfunc) { var prompt = event.title + "<br>was moved to " + event.start.format("mm/dd/yyyy") prompt = prompt + " at " + event.start.format("h:mm a"); bootbox.confirm(prompt + "<br>are you sure you want to do that?", function(result) { if(result==true) { var unid = event.id; updateevent(unid,event.start.format("mm/dd/yyyy hh:mm a"),event.end.format("mm/dd/yyyy hh:mm a")); displayeventdetails(unid) } else { revertfunc(); } }); }

70 Demo 9 Calendar using Domino data Javascript code Update event on server function updateevent(docunid,startdt,enddt) { var json = new Object(); json["docunid"] = docunid; json["eventstart"] = startdt; json["eventend"] = enddt; // Perform a call to the server to save new event date/time $.ajax({ url: "ajax_demo9_updateevent?openagent", type: "POST", data: json }).done(function(data) { if (data.status=="error") { bootstrapalert(data.msg,"danger"); } else if (data.status=="success") { bootstrapalert(data.msg,"success"); } }).fail( function(e) { bootstrapalert("failed to create progress note. Error: " + e.errorthrown,"danger"); }); }

71 Demo 9 Calendar using Domino data Lotusscript agent ajax_demo9_updateevent (partial code) '--- Local variables Dim startdate As String Dim enddate As String '*** Get document Set db = session.currentdatabase If url.getvalue("docunid")<>"" Then Set doc = db.getdocumentbyunid(url.getvalue("docunid")) End If '*** Check that we found a document, otherwise exit If doc Is Nothing Then Set json = New JSONData() json.success = False json.seterrormsg("failed to locate document '" & url.getvalue("docunid")) Call json.sendtobrowser() Exit Sub End If Call doc.replaceitemvalue("eventstart",cdat(url.getvalue("eventstart"))) Call doc.replaceitemvalue("eventend",cdat(url.getvalue("eventend"))) Call doc.save(true,false) Set json = New JSONData() json.success = True json.setmsg("updated '" & doc.getitemvalue("eventtitle")(0) & "' with new date/time") Call json.sendtobrowser()

72

73 JSON Real Life Example List of medical codes in Domino Consumed in a drop-down MagicSuggest plugin: HTML <label>axis II</label> <div class="magicsuggest" id="dsm4axis2" name="dsm4axis2"></div> jquery // Axis II var DSM4Axis2 = $('#DSM4Axis2').magicSuggest({ name: 'DSM4Axis2', resultasstring: true, Width: 630, MaxDropHeight: 200, style: 'height: 28px;', displayfield: 'description', valuefield: 'id', sortorder: 'description', emptytext: 'Select value for Axis II (DSM-IV)', data: '/database.nsf/ajax_getdsm4codes?openagent&axis=2' });

74 JSON Real Life Example JSON generated by agent ajax_getdsm4codes [ {"id":"301","description":"paranoid Personality Disorder"}, {"id":"301.13","description":"cyclothymic Disorder"}, {"id":"301.2", "description":"schizoid Personality Disorder"}, {"id":"301.22","description":"schizotypal Personality Disorder"}, {"id":"301.4","description":"obsessive-compulsive Personality Disorder"}, {"id":"301.5","description":"histrionic Personality Disorder"}, {"id":"301.6","description":"dependent Personality Disorder"}, {"id":"301.7","description":"antisocial Personality Disorder"}, {"id":"301.81","description":"narcissistic Personality Disorder"}, {"id":"301.82","description":"avoidant Personality Disorder"}, {"id":"301.83","description":"borderline Personality Disorder"}, {"id":"301.9","description":"personality Disorder NOS"} ] MagicSuggest rendered in browser:

75 Summary Ajax/JSON efficient to access Domino data CRUD using server based agents (Lotusscript) jquery and Bootstrap to speed up development Plugins available for free Some new easy-to-learn knowledge required Skills beneficial on other platforms as well

76 Questions?

77 Thank you! Presentation & Sample Code:

78 Demo Links Presentation & Sample Database