Posts Tagged ‘extlib’

30 Jul 2015

XPages and Bootstrap Tip: Style the File Download control

This is a quick tip on how to convert a plain looking XPages File Download control into a Twitter Bootstrap style Table.

Everyone should know by now that the latest XPages Extension Library (2 versions ago actually) includes the Twitter Bootstrap framework. While is this brilliant, the reality is that many of us already have existing designs where Twitter Bootstrap is manually included. This means that XPages controls used in these designs look plain when compared to adding bootstrap-styled HTML.

A good example is the File Download Control below. I’ve added this control to my XPages app that has Twitter Bootstrap manually configured, but the control is not affected by this framework:


If you view the HTML source of the File Download Control in Firebug, you’ll see it’s just a table with row and column tags. This is good news, because Twitter Bootstrap’s table designs follow the same pattern, which means that by just adding 2 Bootstrap classes to the control, you change look of it to:


To achieve this, all you have to do is add the “table” and “table-hover” class to the File Download Control. See example below:

   styleClass="table table-hover">

You can imagine that this one example opens a series of additional opportunities for those who are manually applying the Twitter Bootstrap framework to their XPages Design.

Till next time
Cheers :)

9 Jul 2013

XPages Video Tutorial: Using Partial Refresh with a Navigator Control

So i felt it was time for an XPages Video Tutorial. I haven’t done one of these since March I think. In this video tutorial, I show you how to use the XPages Extension Library’s Navigator Control and modify the page’s content using partial refreshes.

Thanks to David Leedy for hosting this video on his NotesIn9 Series. He raises a very good point about the Dynamic Content Control and how it can be used in my example in this video to increase the performance of the XPage. Hopefully there will be a video on this soon.

I trust you will enjoy and please, as always, feel free to comment or ask questions.

Happy coding :)

18 Sep 2012

TUTORIAL: Integrating XPages with DB2 – Part 2

Hi everyone. So, just 2 things firstly:

1. This is an extended Post to David Leedy’s NotesIn9 Posting of “Intro to XPages and Relational Data – Part 2“.

2. I do apologize that this took a while to publish. This is one of the more challenging years to find some free time to contribute to the Domino and XPages community. Having said that, I have quite a few Video Tutorials planned before this year ends, so stay tuned :)


Now that that’s out the way…..this post is Part 2 to the “Integrating XPages with DB2 – Part 1“. In this Video I show you how to Create/Read/Update/Delete DB2 Data using XPages. More importantly, I show you how to empower the User to perform all these functions via a User Interface. It’s usually easy to write this logic in the back-end, but a little more involved when handing that power over to the User.


The good news is that it’s fairly straightforward. I show you some quick functions that will get you up and running in no time. As I explained in the Video though, there are much more advanced ways of integrating to DB2. This will involve some knowledge of DB2 itself. The keyword is…..”Stored Procedures“. This is where the power lies. A Stored Procedure is very much like a Sub Routine in LotusScript or a Function in Java or JavaScript, but you code in SQL Language. You can pass the Stored Procedure parameters, have all your logic neatly set out in a central place in DB2 and return values from the Stored Procedure which will allow you do things like create Child Documents, etc.

Later on in the near future, I will think up a straightforward Tutorial which will show you how this all works.

I hope you enjoy this Video. I really enjoyed making it. It was one of my smoothest recordings where everything went right the first time.

I want to thank David Leedy as always for adding this to his NotesIn9 Series. You da man :)




IMPORTANT NOTE: If you are not able to view this Video in HD, please Click Here to open this video up in a different Player.

11 Aug 2012

XPages Tip: Speed up Design load times by using Design Definitions

Hi everyone. With the merge of the DynamicContent and Switch Custom Controls in the XPages Extension Library, I am more and more practicing the art of adding multiple Custom Controls into a single XPage.

Now, before you shoot me, make sure you understand how the DynamicContent and Switch Control Works. In Short, they Add/Remove designs to your XPage in real time, meaning that you can load a certain Custom Control and its content when you need it, and not on the loading of the XPage. That is awesome stuff, and plays a big role in the performance of one’s XPages Application.


But this Post is not about these 2 controls. This Post is about having multiple Custom Controls reside in 1 XPage. Let’s say for whatever reason you have 10 forms that make up your Application, and you have a Custom Control for each Form. What you do now is use 1 XPage, and insert all 10 of these Custom Controls. This is all good and well, except when trying to open up your XPage Design Element in Domino Designer. It become horribly slow, and sometimes my Designer just hangs, forcing me to “Kill Notes”.

The reason for this is because your XPage loads all the design elements and controls that exist inside each of the 10 Custom Controls you added to the XPage, to provide you with a view of more or less how the XPage Looks with all those controls added.


So, how do we prevent the Load Time of opening the XPage Design Element? Simple. We use Design Definitions. What is a Design Definition? It’s the ability to make your Custom Control look different when adding it to an XPage, than what it would actually look like when viewing the Custom Control alone.

Let’s say you have a Custom Control that has 30 Combo Boxes running vertically { Please everyone, this is just an example :) }.

You now add this to your XPage, and it looks the same.

A Design Definition allows you to change the look of your Custom Control when it’s added to an XPage or other Custom Control.

Do the following:

1. Open one of your Custom Controls in Designer, and in the Properties Tab, navigate to the “Design Definition” Tab.

2. Add the following Code to the empty Box in this Tab. (All this does is create a div, style it, and add some text inside the Div)

<?xml version=”1.0″ encoding=”UTF-8″?>
<xp:view xmlns:xp=””
<xp:div style=”background-color:blue; color:white; padding:3px;”>This is my Combo Box Custom Control</xp:div>

3. Save and Close your Custom Control.

4. Open your XPage where the Custom Control exists. If you haven’t added a Custom Control yet, create an XPage and do so.

You’ll see that instead of your Design Elements appearing in the XPage as it would look in the Custom Control, you now have a Blue Box with white Text inside it. If you double click in the Blue Box, you’ll be taken to your Custom Control, where you can view the original Design.

Not only does this keep your XPage tidy when it contains multiple Custom Controls, but it also stops the XPage from having to load all the Design Controls in your Custom Control for viewing in your XPage, which dramatically increases the speed of opening your XPage in Domino Designer.

I hope I didn’t ramble too much in this post. I trust you will find it useful.

Have a good day everyone. Comments, as usual, are always welcome :)


20 Jul 2012

A quick example of the Dynamic Content & Data View Controls used in an XPages App

Hi Everyone. I’ve finally made some time to test out a few features from the XPages Extension Library. It was a bit of a learning curve, but it’s looking good.

Click here to view a Demo of these Controls.

I apologize in advance if there’s a small delay when using this App. It’s been hosted on a Server in South Africa…so the Internet Line is to blame.

Anyways…below is a list of Controls I’m using in the XPages App:

1. On top you’ll see the XPages Debug Control that was created by Mark Leusink and is available on OpenNTF. It’s very cool in the sense that it allows you to print messages directly to the Control and not via the Server Console. It also allows you to see all Scoped Variables that are being used in the XPage. Finally, it has an awesome feature where you can execute SSJS Scripts and view the result. I am very happy with this Control.

2. I’m using the Application Layout to control the Look and Feel of the XPage. It’s always a massive time saver. Click here to view the Video from NotesIn9 that explains the Application Layout in more detail.

3. in the Left Section I’m using the Navigation Control made available in the XPages Extension Library. This was a trick and a half, but I managed to use Partial Refreshes for all my onclick events. This allows me to use 1 XPage and multiple Custom Controls.

4. Depending on loading time, you might see the XPage go into Standby during the Partial Refresh. This is thanks to the Standby Custom Control which is available for download from OpenNTF. This is an awesome feature that needs no additional resources to function.

5. I have 2 views in the Main Content Section. These are Data Views that I am using from the XPages Extension Library. It’s safe to say that I am currently using very basic functionality from the Data View. There’s a lot more that you can do with it.

6. The 2 Data Views exist in a Dynamic Content Control, also from the XPages Extension Library. I won’t go into too much detail about this except that the Dynamic Control keeps your XPage light, and only loads Controls when they are needed. Very awesome stuff.

I am quite happy with what I’ve achieved in the last 3 hours. I had to put a few hacks in place to make everything work with Partial Refreshes, but all in all it was quite easy to implement.

I highly recommend the XPages Extension Library Book. It’s a life saver.

Till next time. Enjoy :)