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=”http://www.ibm.com/xsp/core”
  xmlns:xc=”http://www.ibm.com/xsp/custom”>
<xp:div style=”background-color:blue; color:white; padding:3px;”>This is my Combo Box Custom Control</xp:div>
</xp:view>

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 :)

John

LinkedIn