Building a search function with DataTables plugin (II)

Introduction

In a previous post the base foundation was set up and a table was drawn on the xpage with the datatables jquery component. The data, residing in a Notes view, was delivered via a CustomServiceBean Rest service.

A datatable comes out of the box with a little search field which performs a search across the whole json data-set.

Individual column searching

In this post we will be adding select inputs for each column so you have a quick filter mechanism matching the values in the columns.

To achieve this we need to make some changes to the html table and our script to initialize the datatable object.

HTML table

We will place the select inputs on the bottom of the table, in the to be added footer section:

<table id=”persons” class=”table table-striped table-bordered”
cellspacing=”0″ width=”100%”>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Company</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Company</th>
</tr>
</tfoot>
</table>

initComplete

In our JS function that initializes the datatable we add a callback function that is triggered when the table is fully loaded:

initComplete: function(){
this.api().columns().every( function () {
var column = this;
var select = $(‘<select><option value=””></option></select>’)
.appendTo( $(column.footer()).empty() )
.on( ‘change’, function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);

column
.search( val ? ‘^’+val+’$’ : ”, true, false )
.draw();
} );

column.data().unique().sort().each( function ( d, j ) {
select.append( ‘<option value=”‘+d+'”>’+d+'</option>’ )
} );
} );
}

Progress

As a result of the activities above our table now looks like:

The seach field works in conjunction with the select inputs. Not bad for a few lines of code!

Building a search function with DataTables plugin

Introduction

In Domino you have multiple options how to provide a search function for an application. I have seen many examples where a FT search query is build for a database, where the form type is defined, which fields should be used in the search etcetera. Most of them are a maintenaince nightmare, layout is little flexible and usability is lacking (e.g. perform a search towards a query which will result in zero hits).

What if you make it easier to maintain, more flexible for user specific desires and add facetted search principles? A win situation?

DataTables

In the following posts I will write how to use the jQuery DataTables plugin to provide a quick search function for your Domino apps. I assume you use XPages.

Stage 1 – Getting & presenting the data

In the initial stage we just try to get and present the data we need. As example I will be using the FakeNames application. I have created a public repo which has at the moment:

• an xpage to present the data (dtPersons.xsp)
• an xpage (api.xsp) which will contain rest services
• a Java class that generates the data in JSON format
• a CSJS library to transform the HTML table on dtPersons.xsp to  DataTables object
• the required resources from DataTables.net
• a Theme resource to have the resources available
• a Notes view to use as data source.

In order to create some fake documents I have set up an LS agent to do so.

If you bind this all together, you have already a search function:

Right on top you have a search field where you can query the columns in the table. The columns are sortable too. Probably it is matching most of the search functions you have seen for Domino. But wait! There is more possible…

 

Another Graph sample from Domino Explorer

Introduction

In a previous post I dove into Domino Explorer, an XPages application that cans the Domino Directory and the Catalog by using the Graph capabilities in the OpenNTF Domino API.

In this post will describe another XPage in that application. Perhaps it helps to get a better picture on the Graph db and how to build an application around it using XPages, JavaScript, & Java.

Hopefully I will be ready writing before a European football final kicks off…

AllACL.xsp

The xpage I discuss is allacl.xsp. Basically it displays at start a table with ACL entries for the entire catalog. When I click on an entry or row in the table I get presented a list of applications where the selected ACL entry resides in the ACL.

The result of the scenario above captured in the following screen:

As the image suggests the entry [Anonymous] resides in 4 applications. Let’s dive in a little deeper into the XPage to see how it’s done…

On document ready

The XPage contains a JS library whichs fires an AJAX call to collect the data for the DataTable object. The rest service resides on the XPage and is accessed via it’s pathinfo property. The restservice is bound to a custom servicebean which resides in the application.

The AJAX call does not provide a parameter to the restservice, so the java class will collect all the vertices of type DXACLEntry.class. For each vertice a JSONJavaObject containing name and level and placed in a JSONJAVAArray object. This array is placed in a JSONJavaObject and returned as a string to the restservice.

When the data is received in the DataTable object only the name property is placed.

The routing is visualized in the next image:

On row click

In the JS library for the DataTable object is also defined what should happen when a row in the table is clicked.

Here the name value for the selected row is used in a function that initiates a second DataTable object. Again a call is made to the same restservice. However now the name value is send as a parameter (“?name=” + name value).

The servicebean picks this parameter up (String name = request.getParameter(“name”)) and get’s all the vertices from the Graph with the provided name, matching the DXACLEntry (DXACLEntry aclEntry = graph.getElement(name, DXACLEntry.class)).

Similar as in the document ready event for each found DXACLEntry object a JSONJavaObject is created, now with some more properties (title,filepath, replicaId,server) and placed in a JSONJavaArray. This array is returned as a string to the restservice.

When the results are received by the DataTable object the four properties are displayed per column.

Summary

The scenario is that simple. The DataTable plugin is really a great plugin that does a lot for you and can save you multiple design elements (view controls) by defining in your code what you want in it as result and in which order.

Now let me enjoy my evening of football with a cold beer! Happy development =)

 

 

Domino Access Service – Posting a document

Introduction

In our app described in previous posts I have included an interface to post a new document using Domino Access Services. Here is how I did it.

HTML structure

The main part of the ‘form’ is the HTML structure.

Since we use Bootstrap I included form-groups to layout the fields. In my example I still use XPages, but the inputfields you can replace with HTML input elements.

<form role=”form”>

<h2>Registration</h2>
<div id=”entryForm”>
<div class=”form-group”>
<xp:label value=”Firstname:” id=”label2″></xp:label>
<xp:inputText id=”inpFirstname” styleClass=”firstName”>
<xp:this.attrs>
<xp:attr name=”placeholder” value=”Enter firstname”></xp:attr>
</xp:this.attrs>
</xp:inputText>
</div>
<div class=”form-group”>
<xp:label value=”Lastname:” id=”label3″></xp:label>

<xp:inputText id=”inpLastname” styleClass=”lastName”>
<xp:this.attrs>
<xp:attr name=”placeholder” value=”Enter lastname”></xp:attr>
</xp:this.attrs>
</xp:inputText>
</div>
<div class=”form-group”>
<xp:label value=”Email:” id=”label1″></xp:label>
<xp:inputText id=”inpEmail” styleClass=”email” type=”email”>
<xp:this.attrs>
<xp:attr name=”placeholder” value=”Enter email”></xp:attr>
</xp:this.attrs>
</xp:inputText>
</div>
<div class=”form-group”>
<xp:label value=”Password:” id=”label4″></xp:label>
<xp:inputText id=”inpPassword” type=”” styleClass=”wannebepassword”>
<xp:this.attrs>
<xp:attr name=”placeholder” value=”Enter password”></xp:attr>
</xp:this.attrs>
</xp:inputText>
</div>
<xp:button value=”Submit” id=”button1″ styleClass=”btnRegister btn btn-default”>
</xp:button>
</div>
</form>
<div id=”formResponse”></div>

JavaScript

On the onClientLoad event of the XPage I have included the following script.

Parameters

Keep in mind to include the form name in the URL parameter (?form=Person) since you cannot include that pair in the JSON object that is send to Domino Access Service.

The &computewithform=true parameter ensures the HTTPPassword field will be translated with the @Password function.

<xp:eventHandler event=”onClientLoad” submit=”false”>
<xp:this.script>
<![CDATA[$(document).ready(function() {
$(“.wannebepassword”).attr(“type”, “password”);
$(“.btnRegister”).click(function(e) {
var firstName = $(“.firstName”).val();
var lastName = $(“.lastName”).val();
var email = $(“.email”).val();
var password = $(“.wannebepassword”).val();
var newName = $(“.firstName”).val() + ” ” + $(“.lastName”).val();
if (newName !== ” “) {
var newPersonObj = {
FirstName: firstName,
LastName: lastName,
FullName: newName,
InternetAddress: email,
HTTPPassword: password,
Form: “Person”
};
$.ajax({
url: ‘http://server/fakenames40k.nsf/api/data/documents?form=Person&computewithform=true&#8217;,
type: ‘POST’,
data: JSON.stringify(newPersonObj),
dataType: ‘xml’,
accepts: {
xml: ‘text/xml’,
text: ‘text/plain’
},
contentType: “application/json”
}).done(function(data, textStatus, jqXHR) {
var newPersonLocation = jqXHR.getResponseHeader(“Location”);
$(“#entryForm”).hide();
$(“#formResponse”).html(‘Registration successfull.<br/><a class=”btn btn-default” href=”‘ + newPersonLocation + ‘”>Check it out!</a>’);
}).fail(function(jqXHR, textStatus, errorThrown) {
alert(“Registration has failed:” + errorThrown);
console.log(‘Registration has failed.’);
});
} else {
alert(“Please enter a name”);
}
return false;
});
});]]>
</xp:this.script>
</xp:eventHandler>

Password attribute

XPages does not allow you to define the password type as attribute. I found the answer from Tim Tripcony on Stackoverflow helpful to define a work-around.

Wrap up

That is about it!

This is just a simple example. Probably you would normally include some more validation (avoid double entries) but you get the idea.

Presentations from EntwicklerCamp 2014 – Track 2

Track	Session	Subject	Download Presentation
Track2	Session1	IBM Connections	http://www.entwicklercamp.de/konferenz/ent2014.nsf/bc36cf8d512621e0c1256f870073e627/e76eba65a7777a5fc1257be200295cc3/$FILE/T2S1-IBM%20Connections.pdf
Track2	Session2	XPages und Connections	http://www.entwicklercamp.de/konferenz/ent2014.nsf/bc36cf8d512621e0c1256f870073e627/3ce43336a0c21017c1257be200295cb1/$FILE/T2S2-Xpages%20und%20Connections.pdf
Track2	Session3	iNotes deep dive	http://www.entwicklercamp.de/konferenz/ent2014.nsf/bc36cf8d512621e0c1256f870073e627/5aa8d31062adfd72c1257be200295ca9/$FILE/T2S3-iNotesDevPres.pdf
Track2	Session4	Notes Database Security – Analyse, Konzept und Techniken	http://www.entwicklercamp.de/konferenz/ent2014.nsf/bc36cf8d512621e0c1256f870073e627/fd4c7bc91a89f2c2c1257be200295c97/$FILE/T2S4%20Notes%20Database%20Security.pdf
Track2	Session5	XPages und Java	http://www.entwicklercamp.de/konferenz/ent2014.nsf/bc36cf8d512621e0c1256f870073e627/eaa095462aa6e95cc1257be200295cb9/$FILE/T2S5-XPages_und_Java_2014.pdf
Track2	Session6	Einsatz von Resource-Bundles am Beispiel der Realisierung von Mehrsprachigkeit und flexibler Menüstrukturen der XPage-Applikation. Managed Beans	http://www.entwicklercamp.de/konferenz/ent2014.nsf/bc36cf8d512621e0c1256f870073e627/ee334362683c38f4c1257be200295cb8/$FILE/T2S6-ResourceBundles.pdf
Track2	Session7	iNotes	http://www.entwicklercamp.de/konferenz/ent2014.nsf/bc36cf8d512621e0c1256f870073e627/ba851a9f69b08b99c1257be200295cbb/$FILE/T2S7-iNotesXPagesDevPres.pdf
Track2	Session8	WebServices und REST	http://www.entwicklercamp.de/konferenz/ent2014.nsf/bc36cf8d512621e0c1256f870073e627/4dd3a39f66807004c1257be200295cbd/$FILE/T2S8-XPages_WebServices_und_REST.pdf

Tech sessions as IBM Connect 2014 (aka Where’s the meat?)

I believe all sessions for IBM Connect 2014 have been published now. While IBM had as strategy t0 publish the list of sessions in waves some people did ask what in the package for techies?

Below is a list of sessions tha tcould be of interest for you. I did not take with me commercial sessions from third party vendors.

Making Your Development Team More Productive with IBM Domino Designer	In this session you will learn how best to use IBM Domino Designer for team-based development. See how source control can be efficiently managed and how product builds can be automated to simplify your app dev processes. Among other things, discover how best to integrate Designer extensions, how to optimally share your XPages assets across projects, and how to protect your intellectual property once your applications are ready for production. This is a miscellany of Designer tips and tricks that guarantees to improve productivity.
Creating State-of-the-Art Web Applications with IBM Domino REST Services	By clearly separating IBM Domino data from the web page, Domino REST services can open the door to a new world of interactive web applications. Learn about emerging web standards, including Web Components, that reflect new paradigms and help you create more interactive web applications. Find out what’s new in Domino REST services and see examples of state-of-the-art applications that combine emerging web standards and REST.
IBM Domino Application Development: Today and Tomorrow	The past several years have provided developers with a multitude of new capabilities for building IBM Domino applications and 2013 was no different. Come hear about the latest enhancements in Domino and Domino Designer 9.x that further strengthen the RADD value proposition. We will share new features for building web and mobile web applications with XPages, improvements for making your applications social as well as what’s new in APIs. You will also hear what’s available for running your applications in the IBM SmartCloud. There will be plenty of demos to wet your appetite and we will round it out with some of our plans for the future.
XPages in a Social World	Over the past year XPages has been tightly integrated with the IBM Social SDK to extend its reach beyond IBM Domino and into other social platforms like IBM Connections and IBM SmartCloud. This session will demonstrate how to create XPages applications that flexibly leverage all the main modules and services of IBM Connections, like communities, profiles, activity stream, files and so forth. In addition, you will also see how XPages can easily integrate with virtually any social platform! The true versatility of the XPages runtime will be shown here through a wide variety of social contexts.
What’s New In IBM Domino Objects: By Example	Through a series of demos, we will showcase and explain use cases for the major enhancements to the back-end classes included in release IBM Domino 9.01 and 9.0 in the areas of Calendar & Scheduling and View Navigation.
Get the Best Out of Bootstrap with Bootstrap4XPages	Bootstrap is a great UI framework that is now available to XPages developers, through the Bootstrap4XPages project. This session will show you how you can leverage this library to apply the best of Bootstrap to your web and mobile applications, while making them fully responsive. The two recognized expert presenters will cover the whole story, from installing the library to exploiting its most advanced capabilities.
XPages Mobile Development in IBM Domino 9.0.1 and Beyond	IBM Domino 9.0.1 packs in quite a few new XPages goodies for mobile application development. In this demo-driven session you will learn first-hand how to build and debug XPages mobile apps for the tablet and smart phone using all the latest features, APIs, extensions and best practices available today. You will see how XPages apps can become responsive in nature and get a glimpse of what’s coming in terms of XPages mobile futures. Lots to learn here!
IBM Worklight for IBM Domino Developers	IBM Domino 9 easily exposes the Domino Data Service (DDS) to enable you to access data in IBM Notes Databases utilising REST APIs. But how do you get started building native mobile applications? With IBM Worklight, and DDS! We will demonstrate how to install, configure and then build your first mobile application.
End-to-End Quality Processes for Top Notch XPages Apps	When it comes to getting XPages apps ready for production there’s a lot to know. Do you have a web test automation suite in place to drive your apps through the browser and guarantee quality? Do you have a JUnit test framework to exercise your XPages components? Is your application accessible to the latest WCAG 2.0 and Section 508 standards? This session, direct from the XPages engineering team, shows how to automate your app dev processes using the very latest tools and standards so that your products are ahead of the game.
XPages And The Enterprise	Did you know that XPages is not just limited to the stuff you see in IBM Domino forms and views? Your XPages applications can feature data from a wide variety of disparate sources, whether it resides in a relational data store, is retrieved from a web service or obtained via REST APIs quickly and easily! In a series of practical examples this session demonstrates how XPages can integrate with enterprise data in various ways. You will learn about some ready-made XPages extensions that plug in enterprise data, and also how you can develop your own integration points. If you need to manage data from various sources, you need to attend this talk.
Uno! Deux! Three! Making Localization of XPages Apps as Easy as 1-2-3	Social Business doesn’t only happen in your native language. Developing an app that translates well into multiple languages requires more than just the application-level localization features built into XPages. Labels on forms and views columns are a big part of the story, but there’s much more to consider! Keywords (on forms and views), menu options, and programmatic error/information messages are some of the additional important aspects to consider when developing an application that is highly readable in each supported language. In this session, you’ll learn a proven strategy for managing all of these values for multiple languages and handling the locale-specific display of each value using resource bundles and a few simple library functions.
Improving Your IBM Domino Designer Experience	IBM Domino Designer for Eclipse (DDE) has hundreds, maybe even thousands, of settings and customization options. But do you really know how to make it work well for you? We’ll give you favorite tips and tweaks for using DDE: making it faster, easier to use, and even how to track down some pesky errors. We will show you how to make DDE sing! (Literally, it will sing). Come to this session to get under the hood of DDE and make it do things you never thought it could do.
Be Open – Use Web Services and REST in XPages Applications	IBM Domino always was a very integrative system. Today with XPages it’s even simpler to connect to other systems. Join us to find out how to use Web Services and / or RESTfull Service (REST) within XPages. After giving some background both to Web Service and REST we start with consuming a Web Service from within the browser using JavaScript. Then, we’ll look at how to do the same from the back end using Java. REST can also be consumed from JavaScript (Browser) or Java (Backend). We show samples for both. Additionally we demonstrate the use of some of the Dojo widgets that can be used with REST. At the end we deal with security and show how to use Web Services and REST with Basic Authentication.
I’s Not Infernal: Dante’s Nine Circles of XPages Heaven	Do not abandon all hope, ye who enter here! Your very own we’ll take you through a divine comedy of nine circles that show that XPages is more paradise than perdition. We’ll show how XPages and related concepts like OSGi plugins make XPages a modern and vibrant development technology for web, mobile and rich client. On the way we’ll guide you past some pitfalls to avoid becoming one of the lost souls. When we re-emerge, you’ll see the sky’s the limit with star-studded opportunities.
The Journey to Becoming a Social Application Developer	You’ve probably heard about the IBM SmartCloud Social Business Toolkit SDK but do you know what it is and what it’s really about? Yes, it’s XPages, it’s JavaScript, and it’s Java, and it works with IBM Domino, IBM Connections and IBM SmartCloud for Social Business, but what about the other apps that your users are asking for? What about Dropbox, Twitter and other platforms? This session will give developers a strong foundation to build on. You’ll learn the tools to use and invest in, the place to start and the roadblocks to avoid when building your skills. You’ll leave with practical examples and code samples to show you how easy it is to extend your apps and bring the power of social business to your organization.
Creating a Mobile Application Framework with XPages	If you create a lot of mobile web applications, you may notice other frameworks such as JQuery Mobile and the XPages Mobile Controls just don’t do exactly what you need. So we created our own, specifically designed for XPages. In this session you’ll learn about the open source framework that’s been have created. We’ll show how it allows you to quickly drag and drop standard custom controls into an XPage to create a mobile application. We’ll also talk about the process of creating an open source project and future plans.
IBM Worklight: Going From XPages Mobile to Native Mobile Applications	Have you ever wondered how to easily integrate a mobile phone’s native feature set with your corporate web applications? In this session we’ll demonstrate how an XPages developer can make the simple, practical, logical evolution from XPages to IBM Worklight developer. We’ll show that any XPages developer currently building mobile-accessible websites already has the skill set to build native mobile apps using IBM Worklight. We’ll cover installation, setup, similarities in designer clients, the test environment, the necessary skills, and provide a working example. You have the skills, you have the knowledge. Your only challenge is to come to the session and understand how to make this work. Go from HTML5 to native in minutes.
Rapid XPages Development Using the Application Layout Control	The Application Layout control may be the most useful and powerful tool available to an XPages developer. Learn how to enable and effectively use it to design a consistent user interface using IBM OneUI. Explore and compare several application layout design strategies using the application layout control. Understand how a well designed application layout can be used to provide a consistent design across all of your XPages applications and increase your XPages development productivity. See how the Bootstrap4XPages OpenNTF project can be used to with the application layout control to provide a responsive design for desktop, tablet and mobile devices using Twitter Bootstrap.
Demystifying the Roadmap From IBM Domino Applications to the Mobile App Stores	In this session, you’ll learn how to use IBM Domino server and Xpages as the back end server for astonishing mobile solutions and how you can bring more than 10,000 records from the server out to the phone in a matter of seconds. We’ll walk you through how you can and should combine native development using Apple Xcode and Eclipse APK with pure IBM Domino and Xpages, when and what to use as well as do’s and don’t’s combined with tips and tricks.
Master Class: XPages Scalability	You’ve taken the XPages Performance master class. You’ve also taken the XPages master class video series 1. Now sit back and experience the next level… the “X” level! Learn how to take that finely tuned “Performance master class” application to its absolute “scalability” limits. Bring “performance” and “scalability” together once and for all!
Java for XPages Development	Knowing the basics of Java is an important skill to have when considering converting an existing application or creating a new application based upon the XPages framework. This session will provide a foundation of the Java skills needed, and how to acquire them. From that foundation, detailed code examples will be provided to demonstrate how to use core Java code, Java Beans, Managed Beans and third party Java libraries to your application development. Participants will leave this session knowing exactly how to add Java as a tool in their development toolbox!
Source Control 101 : Implementing An End-To-End Solution	Source control is a concept which is mostly unfamiliar to IBM Domino developers. Learn about the two most popular distributed source control systems, Git and Mercurial, and how to use both cloud based and on-premises source control systems including a step by step guide on installing your own on-premises system. Become familiar with Atlassian’s free Mercurial and Git client, SourceTree and how it can more easily manage your commits in a team environment using concepts of branching, forking and Git flows/Hg flows. Learn how to install and use Perforce P4 Merge to merge conflicts. Step through some real-life scenarios for managing projects using source control. By the end of the session you will be a confident source control guru.
Practical Java	Take a whirlwind tour of the many ways in which Java can make your life better as a developer. We’ll use Java in IBM Notes, Eclipse, and the latest IDEs. And we’ll show you examples of best of breed libraries that can analyze data, create PDFs, and perform image processing on the fly. Get connected to IBM Connections, access relational data, open sockets, and parse feeds. And along the way we’ll throw in tips for testing, performance, and writing good code.
XPages: Still No Experience Necessary	Do you want to create an XPages application, but you’re not sure how to do it? We’ll show you how to build a sample help desk application from start to finish. Step by step we’ll show you how to create, read, update, and delete help desk tickets. Starting with the foundations of XPages development, we’ll introduce the most common XPages concepts like SSJS, data binding, custom controls, view and repeat controls, the extension library, CSS frameworks, and much more. Go home with a working application that you can use today!
Mastering Social Development Using the IBM Collaboration Quickstart	IBM Collaboration QuickStart for Social Business is a preconfigured software development environment for developing your custom social applications. The QuickStart environment has IBM Domino, IBM Connections and IBM Sametime configured, and ready to develop on IBM SoftLayer. The session shows you how to extend a DVD rental application to integrate fully into the IBM social experience. During the session, you’ll learn how you can take advantage of the development environment by step-by-step instruction, and how to use the IBM Social Business Toolkit SDK features to build a social application. The session also provides guidance on enabling your applications for the IBM SmartCloud for Social Business.
Don’t Reinvent the Wheel – (Re)use Open Source Software From OpenNTF	OpenNTF is THE open source community for IBM Collaboration Solutions with a focus on IBM XWork Server and IBM Connections. In this session, you’ll learn about the latest and greatest open source apps, gadgets, controls and other assets developed by community developers, business partners and IBM that are available on OpenNTF.org. We’ll also introduce additional community services OpenNTF provides like the news site for IBM Collaboration Solutions CollaborationToday.info, technical webinars and much more.
IBM Domino XPages at SMC Corporation – Examples from the Business World	SMC is no different from many other companies: our users want simple-to-use interfaces to access data, and they want the applications to be fast and good-looking. Come to this session to see how the SMC developers utilized the IBM Domino platform and XPages to continue the rapid application development that our users have been accustomed to in the IBM Notes client. Now, in addition to the IBM Notes client, our new XPages applications are accessible via browsers, tablets and smart phones. Join us for a non-technical tour of our XPages applications, and see how we’ve incorporated many useful extension library controls and other UI features to solve our business needs. You just might get some ideas that could make you a hero in your own organization!

So what do I see? REST, XPages, Integration with IBM Connections, a bit of Java, Mobile (Bootstrap, Extension Library, Worklight). What I was hoping for? REST, integration, mobile and extensive Java. I am not sure if I should be content with the sessions provided. Some seem to be low-, beginners level. I wonder what new technology IBM has to offer? I guess that would be Worklight but it is unsure what this has to offer for XPages developers.

Nevertheless IBMConnect could be a great opportunity to meet & connect to people.

Job Wanted

Looking for a creative brain? Choose me!