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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s