XPages Type Ahead - use var property to get field value

I've seen several examples on type-ahead using getComponent( 'componentId' ).getValue(). Using hard-coded field id's can be a bad idea in the long run. If someone changes the id of the type-ahead field, the type-ahead will fail. There's a more maintainable alternative, the var property of the typeAhead-component.

It's not directly available on the field. If you select the <typeAhead>-node in the source, you will get an "All properties" view for the Type Ahead component. Under data, you can set the var property.



If you, like me, like modifying source-code better, add a var attribute to the typeAhead node.



In the suggestions-code, you can now do:

@DbLookup( [ @DbName()[0], 'database.nsf' ], '(lupView)', lupKey, 1, '[PARTIALMATCH]' )

Another tip: Although you can compute Type Ahead on and off in the field, after the field loses focus, it looks like Type Ahead is always enabled. If you select the <typeAhead>-node, you can modify the rendered property (enables/disables type-ahead).

Useful formula cheat sheet

Just found this while browsing. Domino Formula @Functions. It's more or less a cheat sheet with @-functions sorted in a logical order.

It's actually made by Lotus, for Notes 6.5. You probably need an A3 printer to transfer it to paper.

Share and enjoy!

XPages: Creating a Data Table programmatically on page load

I've finally started working on a proper XPages application at work, so now my inspiration is bubbling.

Todays demo is (hopefully) a precursor to something that will be very useful to you, my readers. I started looking for a way to dynamically creating a Data Table control. Since XPages still is in its infancy, documentation and examples-wise, I had to go look for information on JSF (which XPages is built upon).

I found this great resource. The classes used for UIComponents in XPages have different names than the standard JSF-classes, but the syntax is more or less the same.

To find the XPages equivalent classes, I create the component I want to find the class for. Set an id to it. Then I create a computed field with the value of typeof getComponent( 'componentId' ). This returns the full class name of the component. E.g. the class for DataTable is com.ibm.xsp.component.xp.XspDataTableEx.

In the demo I've made, I create a Data Table control inside an empty Panel component. The panel's data binding is a sessionScope variable. The XPage has a couple of buttons that lets you change the data of the table. The buttons do a partial update on the dynamically created table.

Screenshots of demoapp:






>> Download demoapp

This "technique" can easily be used for programmatically modifying existing Data Tables at runtime as well. Take a look at the code, and get inspired.. :)

Share and enjoy!

CKEditor integration with XPages (32k limited)

I've found a way around the 32k-limit. Read more here.

I've been asked several times to make an XPages integration with XPages. I finally buckled under the pressure last friday.

Initially I planned on making a full integration (no limits, bound to a NotesRichtextItem). Unfortunately, this is impossible using regular XPages components. I've tried a lot of hacks (rendererType, converting the field in different events, and a lot of other stuff I know nothing about), but so far I've been unable to make the integration work with the native XPages Rich Text editor control.

The last person that requested the integration was "fine" with a 32k limit on the demo, so I've extended the CKEditor Integration demo with a demo of XPages integration (bound to a regular text field).

Read the blog entry on CKEditor integration for prerequisites (CKEditor installed in a certain directory on the server).

>> Demoapp of CKEditor integration with Domino form and XPages