XPages sufficient for line of business type of applications?

Hi there, currently I am following another Angular course since it seems to have become the leading development framework at work. So back to learning all the rules within Angular.

At the moment I am modernizing a Domino application with the help of XPages which:

1. Implements Model-View-Controller architecture, mostly inspired by the guys at Pipelia since IBM never told us to do so.
2. Is written in Java to support the MVC architecture and to have close integration with XPages runtime.
3. Is using Expression Language wherever possible to avoid usage of SSJS.
4. Uses the lifecycle of JSF in XPages at the max.
5. To cover support for different devices I am using Bootstrap as front-end framework. So I miss some native behavior which I do not tend to cover-up.

So far so good and I think I have come quiet long in my project so I still dare to call it rapid application development.

The code-base has been reduced dramatically and all exotic upcoming JavaScript libraries from the early 2000 I have been able to replace with just XPages. With my latent UX skills and extending the out of the box Bootstrap I might now even call this application ‘sexy’ 🙂

I know I haven’t touched many areas discussed in the XPages community such as:

• Websockets (I do not see a use-case yet).
• Writing Java servlets (please pass me a demo NSF).
• Watson services (cloud is still a sensitive topic).
• set up micro-services with smartNSF and consume them in my Java code with an mapper library (requires changes in the environment).
• Integration with IBM Connections.
• Redefining my data with the help of a Graph DB.

Either I see little usage, it is not possible or there is no-one to guide me (the information is certainly not provided by the vendor).

So now back to Angular. Learning all these rules, technologies and new tools setup I was wondering what new technical options this framework will bring me at work. Reflecting on the type of customer-orders I receive I am wondering:

Is XPages not sufficient for most of your line of business apps?

Perhaps you have a though about this?

Happy development & enjoy your summer 🙂

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!

Infinite scroll and prevent multiple event fire

Probably a lot of you use the “Simple custom control to add infinite scrolling to repeat or views” available as codesnippet on OpenNTF.

This snippet allows you to load a next set of documents for a repeat or view control when you reach the bottom of the page. A feature that will be appreciated highly by mobile users of your Notes app.

If you look at the code, it fires the click event of a pagerAddRows control when you have reached the bottom of the window. This will happen as long as you are on the bottom of the window. What can this cause for disturbance:

• It fires multiple events, while it is at the bottom of the window. You only asked for 1.
• The events are not chained so when the second event is returned quicker that the first it will be inserted before it, which messes up the sorting of your collection.

I have not found a way to create a JS function to load a set of data from a repeat control in the ajax way. That would allow you to use the success property and set a state (ajaxready, true/false) for your window. This state could be used to check if the fire event is entitled to run or not.

Drop a line in cause you know the answer to such a function.

As a temporarily solution I suggest to keep the click event for the pagerAddRows control but set a timeout.

Here is what the code could look like:

<xp:scriptBlock id=”scriptBlock1″>
<xp:this.value>
<![CDATA[$(window).data(‘ajaxready’, true).scroll(function(e) {
if ($(window).data(‘ajaxready’) == false) return;
if ($(window).scrollTop() >= ($(document).height() – $(window).height())) {
$(window).data(‘ajaxready’, false);
setTimeout(function() {
$(“.infiniteScroll ul li a”).click();
dojo.query(“.timeago”).forEach( function(el) {
var timeagoWidget= dijit.getEnclosingWidget(el);
if(!timeagoWidget){
timeagoWidget = new timeago.Timeago({}, el);
}

//refresh timeago
timeagoWidget.refresh();
});
$(window).data(‘ajaxready’, true);
}, 200);

}
});]]>
</xp:this.value>
</xp:scriptBlock>

Here is set a timeout for 200 milliseconds which turns out to be quiet generous in my application, but at least I have prevented the disturbances mentioned earlier.

Happy coding!