Installing and running XPages Extension Library in your local machine

Shamelessly copy pasted from Naveegator

I had been hearing a lot about XPages Extension Library and finally got to try it out in XPages code-a-thon held at Mumbai. So I decided to try it on my local machine along with little help from experts on StackOverflow. Its a simple two-step procedure - install extension library and run extension library.

Install XPages Extension Library

First of all get the latest release of extension library from OpenNTF. Unzip the file and find "updateSiteOpenNTF-designer.zip". Unzip it and you will get two folders of "features" & "plugins" and a file "site.xml". In Lotus Notes sidebar, go to My Widgets and select "Options > Configure a Widget from... > Features and Plugin on an Update Site". If you are unable to see My Widgets in your sidebar then click here.

Now enter the URL for the update site as: file:///C:\updateSiteOpenNTF-designer.zip>\site.xml. Click on load button and you will get all the features in the extension library. Select all of them and click on Next and follow the instructions.

After you are done installing restart the Notes client. Then you would be able to see the extension library components in your Controls tab in Domino Designer.

Running XPages using Extension Library components

If you try to preview any XPage which uses extension library components then you would get an error as Cannot find the library com.ibm.xsp.extlib.library, required by the application . This is because the above procedure only installs the extension library only in Domino Designer, not in the local preview engine.

For that go to /domino/workspace/applications/eclipse and copy-paste the files from features and plugins extracted from updateSiteOpenNTF-designer.zip into their respective locations. Give Notes client a restart and you are ready to run XPages Extension Library.

onClick event not working in XPage Link Control - A work around

I have had issues with XPage Link Controls in the past, especially with the onClick events of the links. I was under an impression that I had a work around to solve it. Unfortunately I rediscovered that I still have issues with the same and my work around from the past failed.

It was because, I had a link with my known work around inside a table cell whose onClick event was coded.
My previous solution was for 8.5 version and with all of the new nice features in 8.5.3 I thought its time for me to go for a more stabler solution. And ended up with a better work around lol, may not be a perfect solution

In respect to my analysis, following is a possible list of reasons that your onClick event of XPage Link Controls would fail in 8.5.3

1. The onClick event of your Link Control might fail if you had associated a url to your link. Refer to the following image

2. When both URL and onClick events are provided on the XPage Link Controls, Page gets redirected to the linked url before its onClick event gets executed properly. Its a wild guess. Please check for its authenticity your self

3. The onClick event might fail on the wonderful IE browser if a parent container like a div or a table cell which contains the Link Control has code on its onClick event or other events like onMouseover etc

In order to over come all still be able to use both "link" and onclick event, remove the url mapping to the link control and use call a button controls onclick event on the client side onclick event of the link. And code all you want in the button both client and server side. This seems to remove alot of problems and has worked for me. I know that I am complicating stuffs with my words here, so take a look at the following image. Probably you would understand stuffs better.

And dont even think about screaming something like "HEY, THATS CHEATING. ITS NOT A FAIR SOLUTION". As I said earlier, this is a possible work around that has worked for me. I dont mean this to be a final solution :P

"last" link in Xpage pager control not working

I recently had to work with pager controls in Xpages.  I used to work with the default “Sample 1″ style for “Pager style” and this time I had to go for other styles that displays the "last" link in the pager. For some reason it did not render and instead I had to see a few dots instead of the "last" link.

It was as if some thing like "to be continued...." . Damn IBM walas... that was very good way to mock me :P

Eventually got my heart in mouth lol as I was under a lot of pressure to get it to work. With some research I found a post somewhere in the ibm developer works were a like minded person (may be) was enjoying this funny joke by IBM. One of the replies to that post suggested a work around hack to calculate total view entries count, divide it by number of documents being displayed and associate it with view control display etc...

I short I wanted my pager to look something like the following :

|< >| 

But it was looking something like the following

|< ..

I tried inspecting the pager and to my astonishment, it was never there. It was really something like "to be continued..." , I mean it was never calculated by the XPage

After some poking around and some more google searches, I found “alwaysCalculateLast” in the All Properties tab for the pager control. I set it to true and it works like charm :)

Get label of link in XPages

In order to get value from a component like Edit box control etc in an XPage I use

getComponent("ControlName").getValue()

When it comes to a link it will give you the URL Value that the XPage link control has been mapped. In order to obtain the Label or the Name of the link (and not url) you got to use the getText() method.

Following is a brief illustration of what I am talking about

Following is the result obtained on the browser

Get class name of Components in XPage

Its very easy to obtain the class name of components in Xpages. The only issue is that, its difficult if you dont know how :P

Well for starters (like me) drag and drop a control on to an XPage. Give it a name say "MyControl"

Now add a label to the XPage where you performed the above mentioned difficult steps and use the following code to compute its label

getComponent("MyControl").getClass().getName()

In my case I tried it with a link object and got the following stuffs on my screen

If you feel curious about understanding (most likely about simply knowing) controls better you can refer to the control documentation. Following post speaks about its where abouts.

http://xcellerant.net/2013/09/17/tip-finding-all-properties-and-methods-available-for-xpages-components/

JSON Issues in XPages - Unknown literal of class com.ibm.jscript.types.FBSUndefined

This post does not speak about any fixes for this error message, however, contains a tip that will help avoid the issue.

I encountered this error when I tried to apply toJson method on a json construct.

I had the following json construct. Let me say this as "x"

{"menuItems": [
{
"serialNumber": 1,
"Label": "Label_1",
"Link":"Link_1",
"subMenuItems": [
{
"serialNumber": 1,
"Label": "Label_1",
"Link":"Link_1",
"subMenuItems": [
,
]
},

]
},
]}

When i attempted some thing like toJson(x), I got the FBSUndefined error. How ever, when I attempted, fromJson(x) I got sort of I got the following error

Error when parsing JSON string
Encountered " "object "" at line 1, column 2. Was expecting one of: "false" ... "null" ... "true" ...blah blah blah

When I just put my json construct on to a field's default value and tried to parse the field's value using the following code

x=getComponent("toJsonTest").getValue();

y=fromJson(x);

getComponent("result").setValue(y.menuItems.length)//-> result was 2.0 (i guess)

it worked like charm. Voila

I understand that this must be sort of, a beginner level stuff for Json in XPages.
If you would like to be saddened further by coding a lot to obtain perfection, may be you can explore "com.ibm.commons.util.io.json" and use them in your SSJS :P

Issues working with XPage Tabbed Panel Controls - Aligning Tab Headers with Margin

This was something that I was thinking to do for a long time but never had to do it before. Thanks to my most demanding customer who literally takes a scale and measures micrometer differences on the screen, I am now finding time for working with this finer details on the screen.

The goal is to get the tab headers of a Tabbed Control in XPages to align itself with the margin. I know we always play around with options available in the control's property tab to do it. Atleast I always do it that way :P. I did play around with margins and found some frustrating issues that resulted in some sort of "so-close" answers all the time.

Thanks to chrome and firefox and their developer modes, I was able to do something that pleases me.

Jumping straight to the point, my XPage Tabbed Control looked some what like one in the following screen shot

Hmm looking at this part of screen alone make me realize why my customer was like "WHAT THE HELL!!! WHY IS THE PASSENGER DATA OUT OF LINE!!!". That was scary :P

At last (so at least now) I was able to modify that to look like the following

  Looks pretty nice tight. My customer is really something. Wonder about the eagle eyes my customer has got :)

The trick that helped me do this is very simple. Just add the following to your style sheet

ul.xspTabbedPanelTabs {
left: 0px;
}

and by the way if you are interested, its 10px by default. Thank you wasting some of your time reading my story and not scolding me :)

Working with Design Definition in Custom Controls - XPages

I see design definitions in Custom controls as the name states are for providing a design description.

I see this more like a beautification part to your design. Cos I think , simple multiline comments also would serve the same purpose. The top side is , I looks good when included on the XPages.

The down side is, I feel little irrated to work with the xml mark up I have to provide in the Design Definitions tab.

Coming to the point, the simplest syntax that I learn is, you got to provide xml markup inside the Design Definitions text area as you would do in a normal XPage. Take a look at the following screen shot on how/where to provide the markup value

If you do this, you custom control when included on an XPage, would look  something like the following on the designer

Looks pretty design to me :), at least better when compared to the native appearence

Working with Property Definition in Custom Controls - Xpages

I found a nice lesson about this in Xpages 101. Hola, my innernet connection was awesome, that I was not able to view the video through the vimeo player. With a bit of research, I was able to figure it out and thus this fine article :P

I dont remember using this or seeing this in 8.5 or 8.5.1. And now I see that this is very useful and can be used in a lot of ways. To me this feature really does make more sense to the existence or employment of custom controls in designs. As a matter of fact, I think I should start sticking with Custom controls and use Xpages only to resuse my custom control. Dont O.o me if you think other wise. May be I am just curious

Jumping right on to the topic, try the following and you may understand how it works.

1. As always, You must start with creating or using an existing custom control. Open it and go to the properties pane.

2. Now add a property to the custom control as illustrated in the following screen shot. In addition you can go to the validation and visible tabs and code your way as per your necessity

3. Now include this custom control in some XPage and click on the custom control. You will find a tab called as "Custom Properties" when you select the included custom control. You can infer what I see in my case. I see the property that I created and I am able to assign a value to it

4. The little diamond symbol beside the custom property value says I can do stuffs like link it with a scoped variable or some thing :). Think you get the idea

5. Now to see how to provide and retrieve the value for/from the custom property, create a computed field in your custom control and look for compositeData. You can find your property name and use it as per your requirement.

There you go. Hope this helps :)

Accidentally discovered Mirror Image of L (:P)

Do not expect any serious stuff from this article as expectations might lead to disappointments. Was casually working and happened to punch in a couple of keys by mistake and found a ridiculous character which I have never seen before in the Lotus script editor (Of course I had seen it in other platforms).

I cannot type in that symbol here as I did on the lotusscript editor, so as an alternative I will do the most brilliant thing of showing you a screen shot, rofl.

I guess its easy for you to see what I am speaking about in the image. I must say that I have found some thing different to decorate my multi line comments with :)

Also I tried an msgbox on that. Seems to work. Another discovery - mirror image of L, rofl

Now I can give more meaningful message boxes for my client ;P