Demo of the Single Page Application Wizard control

You can bring a IBM Notes application without much work to the web browser via the Notes Browser plugin. But since Mobile is the standard nowadays that plugin seems to be obsolete almost. So what other options do you have for your enterprise apps?

  • You can introduce a mobile application platform, if you have the time and the money.
  • You can migrate your whole collaboration platform in exchange for something less, similar or not similar at all. And prey for mobile tools on that platform.
  • You can rewrite your apps and deliver them with the help of frameworks as mobile web application or in between solution.

Or… you save yourself the time & bucks and install the Extension Library version that contains the Single Page Application wizard from OpenNTF.

I have made a video in which I demonstrate how to mobilize the fakenames application in a couple of minutes. First I will describe the wizard and how the process for mobilizing an app looks like. Then I demonstrate the actual development which will take about 8 1/2 minutes.

Update – watch on Vimeo

Video on Vimeo: http://vimeo.com/99537780 in case you experience the message ‘This video is not available in your country’.

Youtube

Enjoy the video!

In case you want to contact me on mobilizing your Notes app, just send me an email.

 

Tag cloud with data from another application

For a project I needed a tag cloud to provide some alternative navigation to a view. Easy I thought; such control is part of the XPages extension library. However it turns out that this control does not support to use a view from another application/database as the data-source.

Some examples I found (1), (2), (3) required some work anyway so I wrote a quick prototype based upon the tag cloud component described in the OneUI documentation. The tag cloud is really simple but for now it does the job (as it appears). Here is the code.

<?xml version=”1.0″ encoding=”UTF-8″?>
<xp:view xmlns:xp=”http://www.ibm.com/xsp/core”&gt;
<xp:panel tagName=”div” styleClass=”lotusTagCloud lotusChunk”
style=” overflow: hidden”>
<xp:text escape=”false” id=”txCloud”>
<xp:this.value><![CDATA[#{javascript:importPackage(java.util);

var viewPrefs: NotesView = database.getView(“$v-preferences”);
var docPrefs: NotesDocument = viewPrefs.getFirstDocument();
var serv = docPrefs.getItemValueString(“tx_server”);
var faqdb = docPrefs.getItemValueString(“tx_loc_faq”);

var db:NotesDatabase = session.getDatabase(serv,faqdb);
var vw:NotesView = db.getView(compositeData.vwSource);

var coll:NotesDocumentCollection = vw.getAllEntries();
var totalNum:Integer = coll.getCount();
var myNum:Integer;

var result:String = “”;

var ref = compositeData.ref;

var nav:NotesViewNavigator = vw.createViewNav();
var ve:NotesViewEntry = nav.getFirst();

//some calculation first…
var high:Integer = 0;
var low:Integer = 1000;
var max:Integer = 5;
while (ve != null) {

if (ve.isCategory()){
if (ve.getChildCount() > high){
high = ve.getChildCount()
}
if (ve.getChildCount() < low){
low = ve.getChildCount();
}
}

// Get the next entry and recycle the current one
var tmpentry = nav.getNext();
ve.recycle();
ve = tmpentry;
}

var range:Integer = high-low;
var factor:Integer = max*low;
var ceil:Integer = max-1;

//create cloud…
var nav:NotesViewNavigator = vw.createViewNav();
var ve:NotesViewEntry = nav.getFirst();

while (ve != null) {

if (ve.isCategory()){
cat=ve.getColumnValues().elementAt(0);
myNum=ve.getChildCount();
var myScore = Math.round(((ceil / range) * myNum) + (high – factor) / range);
result+=”<li><a class=’lotusF” + myScore + “‘ href='” + ref + cat + “‘>” + cat + “[” + myNum + “]</a></li>”
}

// Get the next entry and recycle the current one
var tmpentry = nav.getNext();
ve.recycle();
ve = tmpentry;
}

return “<ul>” + result + “</ul>”;}]]></xp:this.value>
<xp:this.attrs>
<xp:attr name=”role” value=”navigation”></xp:attr>
</xp:this.attrs>
</xp:text>
</xp:panel>
</xp:view>

Code walkthrough

The code resides in a custom control which uses 2 properties; one for the view to use as data-source and the link to use to redirect to. The links will direct to a page with a view that will be filtered by the ‘selected text’.

The code resides in an application that reads data from another NSF that does not contain any XPages code yet. In the project will deliver a new web interface for an existing Domino application and I wanted to avoid code collision. The ultimate goal would be to remove all the “old-spice” Domino code one day. So for now I have a preferences document where I store the location of the data-source application.

I go through the data-source view twice :-? since the application does not have so many documents this is (still) acceptable. The values for the tags are calculated and at the end we write the values back to the screen. The CSS in the OneUI does the nice styling job.

Screenshot_2

Go Connect Go!

With IBMConnect about to start I updated my collection of blog posts about the XPages technology. I started collecting in 2009, directly after Lotusphere where it was one of the highlights at the show. I remember that the blogosphere exploded after/during Declan Sciolla-Lynch‘s tutorial.

The earliest post about XPages I have collected is  HND 102: IBM Lotus Domino Designer in Eclipse: Create and Work with XPages Hands On (January 2008). The latest post that I added yesterday is ‘Changing the Output Tag on a Computed Field in XPages’ by Brad Balassaitis.

The counter for my XPages db is at 1993 entries at the moment. I am 100% sure it will the ‘magical’ 2000 number during IBMConnect 2014. Therefor I cannot wait for the event to kick off!!

xpagesKC

Hmm reminds me I should update the following tribute music-clip: Teachers.

Using Bootstrap in XPages – The ultimate incomplete guide

This document describes how to integrate the popular front-end framework Twitter Bootstrap with XPages. The purpose is to provide developers an introduction to use Twitter Bootstrap in XPages development projects by building an actual application.

Below you can find a document/manual I started to write a while ago but I never finished (I guess there is no finish since new boundaries are explored every day). At least the document should give you a head start with using ‘raw’ (Twitter) Bootstrap in XPages. I also recommend you to take a look at the Bootstrap4XPages project on OpenNTF since this project offers lots of ‘out of the box’ conversions of components from the Extension Library (e.g. data view control).

Bootstrap in XPages

Enjoy reading!

eCard XPages app – Time for your seasonal greetings !

The last days I have spent some hours in the evenings to learn me Bootstrap in combination with XPages as bit more. The result is a basic eCard application on XPages which utilizes Bootstrap 2 for UI.

Since the Advent Calendar has started I guess you are allowed to start sending out your seasonal greetings :-)

create

You can find the app as a project on OpenNTF (link to project). I noticed a card is not working properly in IE yet (what did I expect?). I will see if I can fix this on the short term. Of course you may contribute to the fix.

Here you can find some inspiration for your messages: http://www.brainyquote.com/quotes/topics/topic_christmas.html

Capturing geodata in XPages

In XPages it is not default possible to capture geodata information with any control so you are depending on services (not a problem if they provide the correct data).

Here is an example how to capture a visitor’s geodata via http://ipinfo.io/ and store the information in a Notes document in the following order:

  • Run client side JavaScript  (jQuery get method) and load data from an external server.
  • Post the data via client side JavaScript (jQuery post method) to an XPage.
  • Process the data and store it in a Notes document.

Place the following code on an XPage:

<script language=”javascript” type=”text/javascript” src=”jquery.js”></script>
<xp:scriptBlock id=”scriptBlock1″>
<xp:this.value>
<![CDATA[$(document).ready(
$.get(‘http://ipinfo.io&#8217;, function (response) {
$(‘#ip’).html(‘IP: ‘ + response.ip);
$(‘#address’).html(‘Location: ‘ + response.city + ‘, ‘ + response.region);
$(‘#details’).html(JSON.stringify(response, null, 4));
$.ajax({
type: ‘POST’,
url: ‘postCreateCountMe.xsp?city=’ + response.city + ‘&region=’ + response.region + ‘&country=’ + response.country + ‘&loc=’ + response.loc
})
}, ‘jsonp’)
);
]]>
</xp:this.value>
</xp:scriptBlock>
<h3>
Client side IP geolocation using
<a href=”http://ipinfo.io”>ipinfo.io</a&gt;
</h3>
<hr />
<div id=”ip”></div>
<div id=”address”></div>
<hr />
Full response:
<pre id=”details”></pre>

Walkthrough

We assume you have jQuery stored in your application. Add it as a resource to your XPage. When the document is fully loaded we make a call to the external service, the response received we process. For demo purpose we also display it on the screen:

testscreen

At the end we make a post to a second XPage which will process the received data into a Notes document. We attach the data as parameters to the URL. The code for this XPage looks as followed:

<xp:this.resources>
<xp:script src=”/xpCGIVariables.jss” clientSide=”false”></xp:script>
</xp:this.resources>
<xp:this.afterRenderResponse><![CDATA[#{javascript:var dt:NotesDateTime = session.createDateTime(“Today”);
dt.setNow();
function createDoc(){
var doc = database.createDocument(); // Create the document
doc.appendItemValue(“Form”,”count”); // Assign the form
doc.appendItemValue(“date”,dt); // Append something to a field

var udt:NotesDateTime = session.createDateTime(“Today”);
var unixDate = parseInt(udt.toJavaDate().getTime()/1000);
//the time format usable in plotter:
var unixDateOnly = parseInt(udt.toJavaDate().getTime()/100000000)*100000*1000;

doc.appendItemValue(“dateunix”,unixDate); // Append something to a field
doc.appendItemValue(“dateonlyunix”,unixDateOnly); // Append something to a field

var cgi = new CGIVariables()
var browser = cgi.HTTP_USER_AGENT
doc.appendItemValue(“browser”,browser); // Append something to a field
var user = @UserName();
doc.appendItemValue(“user”,user); // Append something to a field

var page = facesContext.getExternalContext().getRequest().getRequestURI();
var page = view.getPageName()
doc.appendItemValue(“pagename”,@RightBack(page,”/”)); // Append something to a field

var _param1 = param.get( ‘city’ );
var _param2 = param.get( ‘region’ );
var _param3 = param.get( ‘country’ );
var _param4 = param.get( ‘loc’ );
doc.appendItemValue(“city”,_param1); // Append something to a field
doc.appendItemValue(“region”,_param2);
doc.appendItemValue(“country”,_param3);
doc.appendItemValue(“location”,_param4);
doc.save();
}
createDoc();

}]]></xp:this.afterRenderResponse>

Walkthrough

We use the infamous CGI variables SSJS library written by Thomas Gumz, IBM so we can add some additional CGI variables on the Notes document. So add this library to the XPage resources section.

After the page is rendered we execute code. Besides some CGI variables we process the data in the included parameters.

In the end your Notes document could look as followed:

resultdoc

 

 

Feedback

The idea is simple, also the implementation. Now I just need to find a nice GeoData chart to visualize the collected data. Do you got any suggestion(s)?

Ps. Does anyone read the information below???

Job Wanted

Looking for a creative brain? Choose me!

job-wanted