Adding a GDPR message to my XPages app

GDPR or Cookies plugins are nothing new. A simple search will give you a quick overview which jQuery based plugins are available.

So I decided the one that looked nicest to me and implemented it my XPages app. It worked but not when I met a user who was using IE. No JS error or whatever so where to start debugging? 😦

When looking in the original code I noticed that a different version of jQuery was used than is available on or Domino V10 server. So I posted an idea for an upgrade on the HCL Products Ideas Portal.

In the end I tried the Customizable EU Cookie Notice Popup Plugin which uses the 2.1.1 version of jQuery which is the same version as on the Domino server. (Loading multiple versions jQuery makes Dojo complain).

But then the requirements of the project changes and the functionality should become more to highlight news or updates within the application so I had to add some additional functionality:

• enable / disable news display/popup
• option to steer location / appearance on screen
• from / until dates, so a period when the message should be displayed.

I decided when the option to enable the display but leave the from and until dates empty the popup will be displayed as long as the session of the browser lasts.

So these settings are stored in a Notes – Configuration document and made available as session scope variables.

Also the content of the popup has to be easily editable so for this I use Notes – Keywords documents so I can have messages in multiple languages.

When the code was working I lifted it up into a custom control which I can now re-use across other applications. Not that the custom control contains custom properties (yet)

The function to set the cookie expiry date is as followed:

To set a java date in a scope variable can be a little tricky. I did it as follow:

But this is all the code I needed. The result is as followed:

Note: I have altered the JS file of the plugin to bootstrap it more and to make it responsive.

When I press the OK button a cookie is set that last a browser session (I left the from and until dates empty in my settings):

If you like this post then please support my idea for upgrading the jQuery version on Domino: https://domino-ideas.hcltechsw.com/ideas/DDXP-I-637

Happy development 🙂

Correct content-type

I received a call that an ‘aged’ Domino application was causing problems in IE9. Stylesheets documents created by a form were not strict text/css but text/html instead.

 

Even though the On Web Access Content-type form properties were set correct.

After some digging & trying I ran into the following post that solved the case:

I normally use a simple document for stylesheets and JavaScript libraries in Notes. The form has a field for the “filename” (e.g. my_lib.js) and a field for the data. Until now I had been using a richtext field called HTML for the contents and changed the Content-Type on the form properties as appropriate (text/javascript, text/css etc.). This was working nicely until I created a page using the Strict XHTML DOC-TYPE.

It became an issue because Firefox requires that the Content-Type is text/css for stylesheets when rendering in Strict mode. Otherwise the stylesheet wont be used. Using the Live HTTP Headers extension for Firefox I saw that Domino kept setting the Content-Type to text/html even though the form properties was set to text/css.

Changing the richtext field name from HTML to Body solved the problem. Apparently Domino will not honor the specified Content-Type when the form has a field called HTML.

Indeed: One of those things in Domino…

Data Source Events

I am currently working on transforming an existing Domino app into an Xpages app. Therefor I took another close look on the Data Source Events as described in the Mastering XPages book. Here is a summary:

A data source on an XPage has many similar events as the traditional Domino document.

Event	Trigger
computeDocument	Create new document Submit document Reloade XPage Open document
queryNewDocument	Create document Reload XPage
postNewDocument	Create document Reload XPage
queryOpenDocument	Open document
postOpenDocument	Open document
querySaveDocument	Submit document
postSaveDocument	Submit document

The following table gives an overview which trigger executes which Event(s)  (in the order as listed):

Trigger	Executed Events
Create document	queryNewDocument postNewDocument computeDocument
Submit document	querySaveDocument postSaveDocument computeDocument
Cancel document	No Event(s)
Reload XPage	queryNewDocument postNewDocument computeDocument
Open document	queryOpenDocument postOpenDocument computeDocument
Switch document mode	No Event(s)

An example you can find described on the Domino forum.

New control submitted for the XPages development contest

I have submitted a new control to OpenNTF for the XPages development contest. The control is an abstract of the implementation of Galleria in the Bildr project.

In short words: the control enables to publish an image slider on your Xpage. A sample is demonstrated in the following image:

 

You can download the control here. Have fun!

Breadcrumbs using JQuery

Bob Balfe asked some time ago who is using JQuery for their Domino development projects. I hoped it was gonna rain with examples of implementation of JQuery plugins in Lotus Notes but so far it remains a bit quiet. So why not describe an example myself?

Figure: Screenshot from the website.

xBreadcrumbs is a nice plugin to JQuery to provide horizontal navigation. It uses an unordered list (UL) as source so when you provide that data dynamically with Notes data it becomes interesting.

In my case the customer wanted to have breadcrumbs on top of documents that are stored in a Notes view. Documents are categorized in a parent-response hierarchy so for each document I have to calculate the complete path from the opened document to its uber-parent (some points on that u) aka as ‘Home’.

Figure: Document location in Notes view.

Figure: Document location in breadcrumb.

Implementation

Download the zip file, extract it and upload the files in your Notes application.

Create a subform that you will embed on the form of your document. Add the following code to the subform:

<script type=”text/javascript” src=”../jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”../breadcrumbs/js/xbreadcrumbs.js”></script>
<link rel=”stylesheet” href=”../breadcrumbs/css/xbreadcrumbs.css” />

<script type=”text/javascript”>
$(document).ready(function(){
$(‘#breadcrumbs-2’).xBreadcrumbs({ collapsible: true });
});
</script>

<style type=”text/css”>
.xbreadcrumbs {
background:#FFF none repeat scroll 0 0;
}
.xbreadcrumbs LI {
border-right: none;
background: url(../img/frmwrk/breadcrumb/separator.gif) no-repeat right center;
padding-right: 15px;
}
.xbreadcrumbs LI.current { background: none; }
.xbreadcrumbs LI UL LI { background: none; }
.xbreadcrumbs LI A.home {
background: url(../img/frmwrk/breadcrumb/home.gif) no-repeat left center;
padding-left: 20px;
}
/*  Custom styles for breadcrums (#breadcrumbs-3)  */
.xbreadcrumbs#breadcrumbs-3 {
background: none;
}
.xbreadcrumbs#breadcrumbs-3 LI A {
text-decoration: underline;
color: #0A8ECC;
}
.xbreadcrumbs#breadcrumbs-3 LI A:HOVER, .xbreadcrumbs#breadcrumbs-3 LI.hover A { text-decoration: none; }
.xbreadcrumbs#breadcrumbs-3 LI.current A {
color: #333333;
text-decoration: none;
}
.xbreadcrumbs#breadcrumbs-3 LI {
border-right: none;
background: url(../img/frmwrk/breadcrumb/separator.gif) no-repeat right center;
padding-right: 15px;
padding-left:0px;
}
.xbreadcrumbs#breadcrumbs-3 LI.current { background: none; }
.xbreadcrumbs#breadcrumbs-3 LI UL LI { background: none; padding: 0;  }
</style>

<script src=”../$a-get-bread-crumb?OpenAgent&breadcrumb=<Computed Value>&ul&view=$v-treeview&id=myCrumb&class=xbreadcrumbs&activecrumbclass=current”></script>

The source for my unordered list is the agent $a-get-bread-crumb.

The formula for the computed value is as followed:

@Text(@DocumentUniqueID)

The agent will use the Notes view ‘$v-treeview’, find the document by its document UNID and navigates via each parent all the way up in the Notes view. While doing so the required information to build the unordered list is collected.

By the way, the code for this agent was co-written by my collegue Tomas Ekström.

Reflection

In theory the breadcrumbs were displayed without any problem on the fly. However when moving into production with a database with more than 10.000 documents performance became a problem. It took about 3 seconds to collect the information and thereafter the complete document would be displayed.

Since the customer did not find such a load time acceptable BUT could no longer live without the breadcrumbs any longer I decided to place the subform instead of on top of the form to the bottom of the form and place it via CSS back on top of the document via absolute positioning.

The result is that the content of the document is displayed instantly and the breadcrumbs will follow a few seconds later. Not the nicest solution if you would ask me.

But for small websites (tested with 400 documents) the function works like a charm.

To end this post I will include the code for the agent + some script library.

Code

ULTreeFromView script

class CGI script

$a-get-bread-crumb

Joomla in Domino?

I have deployed quite some websites with Joomla. Joomla! is an open source content management system platform for publishing content on the World Wide Web and intranets as well as a Model–view–controller (MVC) Web application framework.

I wonder what would happen if a similar project would be defined on OpenNTF for which developers could write their own plugins? What a wonderfull world the Domino world would be!

Right now embedding functionality from another application into your Domino project is a tedious job and you may ask yourself if sometimes you really want to know how a function works. In case you want to enable ‘voting’ or embedding a discussion area into your application how lovely would it be to be able to just ‘import’ the functionality and it does exactly what is describes it will do?!

It seems that custom controls for XPages will be such a leap for Domino development. Question is whowill define standards for writing them? At least so they can be easily integrated and co-operate with other controls.

Right now I just keep on dreaming about sites that describe the newest coolest plugins for Joomla….