203 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
A day lost due to DDE incapabilities
Wed, Nov 15th 2017 34
Passing a SSJS function to a custom control
Tue, Nov 7th 2017 3
A generic approach to display Notes data via a Bootstrap table
Mon, Oct 23rd 2017 3
Using the beanNamePicker dataProvider for a namepicker
Thu, Oct 19th 2017 5
Java and XPages
Wed, Sep 27th 2017 5
DDE does disruption (5) – I still haven’t found what I am looking for
Thu, Sep 14th 2017 2
DDE does disruption (4) – xHausting
Wed, Sep 13th 2017 5
Top 10
A day lost due to DDE incapabilities
Wed, Nov 15th 2017 34
JQM & Domino Data Service (2)
Tue, May 27th 2014 9
Adventurer
Mon, Nov 28th 2016 7
Feed highlights of week 47
Tue, Nov 29th 2016 7
Display JSON pretty in a textarea control
Fri, Dec 23rd 2016 7
Using XControls for developing cards-based UI for mobile and desktop applications
Fri, Jan 9th 2015 6
Graph – a closer look at the data
Tue, May 24th 2016 6
DDE does disruption (3) – Perhaps DDE is not build for it?
Fri, Sep 1st 2017 6
Adding search to an application with XPages interface (quickly)
Mon, Jun 23rd 2014 5
Internationalization of the Pager controls
Mon, Sep 1st 2014 5


JQM & Domino Data Service (2)
Twitter Google+ Facebook LinkedIn Addthis Email Gmail Flipboard Reddit Tumblr WhatsApp StumbleUpon Yammer Evernote Delicious
Patrick Kwinten    

In a previous post I demonstrated how to use Domino Data Service (as part of Domino Access Service) to populate a listview for jQuery Mobile. Probably the real-world application you want to mobilize has multiple layers of data that is common in Notes (multiple forms & views). I followed Christophe Coenraets’s example and re-used it for the fakenames application.

First let me show you what you get:

Screenshot_1

 

Screenshot_2

 

At first an overview of the People’s view is presented, from here the user can open the Person details page. In Christophe’s example you can find a more nested navigation but our fakenames application is not setup like that.

What this demo includes:

  • 2 XPages; eg people.xsp and person.xsp.
  • Your modified version of employeelist.js and employeedetails.js in the download from Christophe page.
  • The CSS files in the download from Christophe page.
  • The jQuery JS files in the download from Christophe page.

For convenience I have dropped the files from the download via the Package Explorer in the WebContent folder of the fakenames application. In case you want to mobilize your fakenames application a step further e.g. by packaging it via PhoneGap to access device native api’s you don’t want to store these files here and you don’t want to use XPages to render the HTML.

Of course we assume you have Domino Access Service enabled for the Domino server and the fakenames application.

XPage people.xsp & person.xsp

These files do not differ from the index.html and employeedetails.html files in the download from Christophe page. In case you use XPages you should consider to turn of Dojo and Themes.

JS files employeelist.js & employeedetails.js

Since we will provide the information via Domino Data Service these JS files will be altered. Below you find their code:

employeelist.js

var serviceURL = “http://dev1//apps/fakenames.nsf/api/”;

var employees;

$(‘#employeeListPage’).bind(‘pageinit’, function(event) {
getEmployeeList();
});

function getEmployeeList() {
$.getJSON(serviceURL + ‘data/collections/name/People?count=1000′, function(data) {
$(‘#employeeList li’).remove();
employees = data;
$.each(employees, function(index, employee) {
var tmp = “”;
tmp+=’<li>’;
tmp+=’<a href=”person.xsp?id=’ + employee["@unid"] + ‘”>’ +
‘<img src=”http://greenhouse.lotus.com/plugins/plugincatalog.nsf/NoPhotoPerson.gif”/>&#8217;;
tmp+=’<h4>’ + employee.$17 + ‘</h4>’;
tmp+=’<p>’ + employee.CompanyName + ‘</p>’;
if (employee.$12!=””) {
tmp+=’<span class=”ui-li-count”>’ + employee.$12 + ‘</span>’;
}
tmp+=’</a></li>’;
$(‘#employeeList’).append( tmp );
});
$(‘#employeeList’).listview(‘refresh’);
});
}

Walkthrough

At the page initiation the function getEmployeeList is called. This makes an Ajax request to the REST API of Domino Data Service and a document collection with the first 1000 entries (if available) in the view named People is being called.

I have not taken a look yet how to implement lazy loading or appending additional document collection(s) when scrolling. If you happen to know how to implement such function please drop me a line here or send me an email.

Then list items in the employee ID element on the Xpage people.xsp are removed (when available) and we loop through the results returned by Domino. We create a new list and establish a hyperlink to people.xsp and add the UNID of the document as parameter.

At last the result is appended to the (emptied) employee ID element and the listview is being refreshed. Wow! You got now a nice list of persons in the directory.

employeedetails.js

$(‘#detailsPage’).live(‘pageshow’, function(event) {
var id = getUrlVars()["id"];
$.getJSON(serviceURL + ‘data/documents/unid/’+id, displayEmployee);
});

function displayEmployee(data) {
var employee = data;
console.log(employee);
$(‘#employeePic’).attr(‘src’, ‘http://greenhouse.lotus.com/plugins/plugincatalog.nsf/NoPhotoPerson.gif&#8217;);
$(‘#fullName’).text(employee.FirstName + ‘ ‘ + employee.LastName);
$(‘#employeeTitle’).text(employee.Title);
$(‘#city’).text(employee.OfficeCity);
console.log(employee.officePhone);
if (employee.Manager) {
$(‘#actionList’).append(‘<li><h3>Manager</h3><p>’ + employee.Manager + ‘</p></li>’);
}
if (employee.InternetAddress) {
$(‘#actionList’).append(‘<li><a href=”mailto:’ + employee.InternetAddress + ‘”><h3>Email</h3>’ +
‘<p>’ + employee.InternetAddress + ‘</p></a></li>’);
}
if (employee.OfficePhoneNumber) {
$(‘#actionList’).append(‘<li><a href=”tel:’ + employee.OfficePhoneNumber + ‘”><h3>Call Office</h3>’ +
‘<p>’ + employee.OfficePhoneNumber + ‘</p></a></li>’);
}
if (employee.CellPhoneNumber) {
$(‘#actionList’).append(‘<li><a href=”tel:’ + employee.CellPhoneNumber + ‘”><h3>Call Cell</h3>’ +
‘<p>’ + employee.CellPhoneNumber + ‘</p></a></li>’);
$(‘#actionList’).append(‘<li><a href=”sms:’ + employee.CellPhoneNumber + ‘”><h3>SMS</h3>’ +
‘<p>’ + employee.CellPhoneNumber + ‘</p></a></li>’);
}
$(‘#actionList’).listview(‘refresh’);
}

function getUrlVars() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf(‘?’) + 1).split(‘&’);
for(var i = 0; i < hashes.length; i++){
hash = hashes[i].split(‘=’);
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}

Walkthrough

The idea behind the details page is similar to the people’s list, except we have now a single object in the JSON.

First the ID provided by the parameter is abstracted from the URL and used in the call to a document source via the Domino Data Service.

From the result a set of details is abstracted and presented to the user. Some HTML5 attributes are used to deliver a more native behavior when clicking anchor links (telephone, mail, SMS).

Some thoughts

jQuery Mobile and Domino Access Service provide good foundations for creating mobile Web apps on Domino. However I am a bit thoughtful on the speed of Domino Access Service. If you happen to know how to speed up performance for this please drop a line here.

In a next post I will write the implementation of CRUD actions with jQuery and DDS.

 




---------------------
http://quintessens.wordpress.com/2014/05/27/jqm-domino-data-service-2/
May 27, 2014
10 hits



Recent Blog Posts
34
A day lost due to DDE incapabilities
Wed, Nov 15th 2017 3:43p   Patrick Kwinten
A
3
Passing a SSJS function to a custom control
Tue, Nov 7th 2017 10:31a   Patrick Kwinten
A
3
A generic approach to display Notes data via a Bootstrap table
Mon, Oct 23rd 2017 7:14a   Patrick Kwinten
A
5
Using the beanNamePicker dataProvider for a namepicker
Thu, Oct 19th 2017 9:03a   Patrick Kwinten
A
5
Java and XPages
Wed, Sep 27th 2017 6:31p   Patrick Kwinten
A
2
DDE does disruption (5) – I still haven’t found what I am looking for
Thu, Sep 14th 2017 6:43a   Patrick Kwinten
A
5
DDE does disruption (4) – xHausting
Wed, Sep 13th 2017 6:19p   Patrick Kwinten
A
6
DDE does disruption (3) – Perhaps DDE is not build for it?
Fri, Sep 1st 2017 12:35p   Patrick Kwinten
A
5
DDE does disruption (2)
Wed, Aug 30th 2017 11:47a   Patrick Kwinten
A
5
Adding fontawesome to bootstrap alerts
Wed, Aug 30th 2017 11:28a   Patrick Kwinten
A




Created and Maintained by Yancy Lent - About - Planet Lotus Blog - Advertising - Mobile Edition