Responsive webdesign and xPages

As a xpage developer I also need to do some styling from time to time. This isnt a big issue ofcourse unless you need to create an app which is also suitable for mobile devices. Now with the mobile controls at hand it isn’t a big problem developing a mobile website but what if you want to create a website which should look good on mobile and desktop devices and you don’t want to build a mobile and a desktop version of your app?

Here is where responsive webdesign comes in. I’m just learning this myself ( since I’m not a great UI guy.. ) and I already like it. In it’s simplest form all it comes down to is just to add some extra lines to your css files..

Lets say you use the oneui template and you want to hide certain parts when you are viewing the page on an Iphone. You only need to add the following line to the css:

@media screen and (max-width:320px) {
    .lotusRightBar { display: none; }


As you can see the right sidebar is not displayed when the size of the screen is les or equal to 320px width. In this very simple way you can add your responsive design to the oneui template without having to create a complete new website for mobile. Unless functionality commands it ofcourse 😉

use of stackoverflow

This is gonna be a short post. A few months ago Niklas Heidloff spoke about the use of Stackoverflow in a session I attended. After a while I started to use it more regularly and I have to admit. It is one of the best sources of information when you want to search for any answers regarding development. I started to work on SugarCRM development a couple a weeks ago and without StackoverFlow it would have taken much much longer to find answers!

A little xPage optimization

When you are developing an application there is a time when performance comes to play. This can be either in the beginning of the project due to certain requirements or after some time developing you’ll notice your application does not performance as well as you thought it would. This post will give you a few tips on how you can increase performance without having to rewrite a great deal of your code.

Because I learn new things myself every project I will update the blog once in a while to reflect the newest findings

Retrieve data from the current component within a event handler:

This is a very easy one but will eventually lead to a bit more performance. Whenever you want to retrieve data from the current component within a SSJS event handler you should retrieve it directly using the following line:


The ‘this’ is a pointer to the current eventhandler. And as you can see this event handler does have a parent property. This parent property is a pointer to the current component where this eventhandler is bound to. It will be faster then


It will be faster because the getComponent() method has to ‘search’ for the component you are looking for where the getParent() method is a pointer to the component directly.

Use the correct scope.. and use them correctly.

Sometimes I get to see the xPage code other developers made and a thing that still confuses a lot of  people is how and when to use the correct scoped variables. Many times people just put everything into the sessionScope. Because it is easy ( its always there!) and it is personal (every user gets a different session) or is it? This blogpost is about the do’s and dont’s with scoped variables. How not to use them and how to use them. When to use them and when not to use them.. Continue reading “Use the correct scope.. and use them correctly.”

xPages: Date formatting.

Update: Mark pointed it out already in his comment but the format I used in the java class contained an error. Fixed it to be dd-MM-yyyy

A couple of days ago I came across the following blog post “Custom date field format in an XPage – mm/dd/yyyy“on Mark Roden’s blog. The blog is about changing the default date format of a a date/time field in xPages with find/replace of the eclipse client.

There where up to 73 changes made after the find/replace action. After I read the blogpost I remember I had the same issue on one of my xPage projects lately. In the design the format of the date was defined specifically. Since I didn’t want to have to change all date/time controls afterwards when the format didn’t seem to be correct anyway.  I decided to create a profile document in the database where these kind of settings where saved.

But how to use these settings within a date/time field? It’s actually straight forward. Please take a look at the following code snippet:

<xp:inputText id="inputText1">
<xp:convertDateTime pattern="${config.defaultdateformat}"></xp:convertDateTime>


As you can see the pattern is somehow retrieved from the config.defaultdateformat property. For those who already have used managed beans before this should look familiar.

This piece of code actually tells the converter to use the dateformat specified in object found by the name config with the property DefaultDateFormat. Now If we take a look at the actual managed bean we see the following:

package eu.jeroensomhorst.model;


import javax.faces.context.FacesContext;

import lotus.domino.Database;
import lotus.domino.Document;

public class Configuration implements Serializable {

private static final long serialVersionUID = 8997863361982012917L;

private Configuration(){

public String getDefaultDateFormat(){
String defaultFormat = "dd-MM-yyyy";
Document profileDocument = null;
Database db = (Database) Configuration.getVariableValue("database");
profileDocument  = db.getProfileDocument("", "settings");
defaultFormat = profileDocument.getItemValueString("DateFormat");

}catch(Exception e){
}catch(Exception e){

return defaultFormat;

private static Object getVariableValue(String varName) {
FacesContext context = FacesContext.getCurrentInstance();
return context.getApplication().getVariableResolver().resolveVariable(context, varName);


As you can see I defined a class called ‘configuration’ with a public get method ‘getDefaultDateFormat’. This method tries to open a profile document , read textfield inside this document and retrieves the value. If the value is not found a default value is returned just to be sure a correct pattern is defined. Finally when everything is done the profile document is being recycled.

The last piece of the puzzle is the faces-config file:

<?xml version=”1.0″ encoding=”UTF-8″?> <managed-bean> <managed-bean-class>eu.jeroensomhorst.configuration</managed-bean-class> <managed-bean-scope>application</managed-bean-scope> <managed-bean-name>config</managed-bean-name> </managed-bean> <faces-config/>

The faces config defines how a certain java class is found in the system. The managed-bean-name property defines the global variabel under which we can access an instance of the object. In this case config. the scope and the class define at which scope the object is created ( application, session, view,request) and finally which class should be initiated.

This simple class can safe you a alot of hassle with default settings in your application. You only need to save the profile document again and when the cache is being invalided ( ie. the application scope isbeing destroyed ) the new values are available to the user.

I hope you enjoy this little explanation on how to use a managed bean to acces your settings easily without having to change upto 70 converters!

Yii: specify a default value in a CActiveForm control

This evening I’ve been working again on my measurement system. This is a little application I wrote using the Yii framework to keep track of the energy needs of our household.

It keeps track of the gas, water and eletricity usage per day. As said the site is build using the Yii framework. It features some nice charting generated by the highcharts jquery plugin. I wrote this litte application in just a few days during my free time. Therefore there are alot of things to tweak.

One of the things I wanted to change today is to have the current date pre filled in in the add form (see screenshot ):

Since the Yii framework makes use of the CActiveForm class methods to generate a textfield I dont know for sure how to add a default value to the date textbox. So I fired up google and started to search for how other Yii developers would solve this problem. The first hit gave me a post on the official forums where a developer said that the original topic starter should set the default value in the model object.

I dont really like this advise. Because a model should never be aware of the behaviours of the view it is being used in so I decided to check the second hit and the advice someone gave at that particular post was much better. Simple use the html options property of the textfield method to set the ‘value’ property directly into the HTML like this: