XPages and Me

My Journey into XPages Development

Monthly Archives: July 2014

ComboBox in a reusable Custom Control: How to add selectItems thru Property Definitions

See my stackoverflow question and the answers here.

Type Ahead: The “Tokens” Property

In my Notes Client workflow applications, I use mail templates where the owner of the application can define the recipients and the content of the emails being sent out. The way it works is, I set up 2 keyword documents: One with a list of name-field names and one with field names. The user can then use the list of name-field names to select the recipients for the email and the field names to define so called placeholders. The placeholders then can be used in the subject line and body of the email template. During the generation of the email, say while submitting a new request, the placeholders are being replaced with actual values from the underlying document (i.e. Request Number, Requester, Description etc.).

This gives the user the ability to set up and change their emails as needed without having to change any code.

Obviously, I’d like to provide a similar mail template functionality in XPages and I was wondering if I could somehow use the type-ahead functionality to select and insert the placeholders in the subject and body. You see, in the Notes Client, the user clicks a button which opens a layer with the list of defined placeholders. The user selects one, clicks OK and the placeholder is added at the end of the text. If the user would like to use the placeholder in a different position in the text, he has to cut and paste the placeholder. Not very elegant but unfortunately no way around it.

If I could use the type-ahead functionality, the user could write the text and then trigger the type-head, providing the list of placeholders and select from it, adding it to the current position of the cursor.

This is where the tokens property of the type-ahead comes into play. Usually, when you use type-ahead, you trigger it by starting to type a word. The type-ahead gives you a list of suggestions, you select the value you want and that is it. To trigger the type-ahead again, you have to delete the selected word and start typing again.

The tokens property is like the multi-value separator you can select for text fields. As soon as you type the token you’ve defined (be it comma, semicolon etc.) the type-ahead will be triggered again.

Read more of this post

Dabbling in Bootstrap and Font Awesome Part 3: Living on the (IE) edge

As I mentioned in Part 2, to make IE8 / IE9 play nicely with Bootstrap / Font Awesome, you need to add additional JavaScript files. But that is not all. You’ll also need to make sure that IE8 / IE9 is not running in compatibility mode.

So, yours truly did what any good developer would do, who has to work with IE8 / IE9, and added a meta tag to my theme that would command IE to always run as its latest version with IE=edge, which looked something like this:

<resources>
  <metaData>
    <httpEquiv>X-UA-Compatible</httpEquiv>
    <content>IE=edge</content>
  </metaData>
</resources>

However, IE wouldn’t listen even though I commanded it to do as I command. I also tried to put the following code into the “beforeRenderResponse” event of my XPage, but no cool Font Awsome icons and the fields on my form didn’t look right either:

if (context.getUserAgent().isIE()) {
    var response = facesContext.getExternalContext().getResponse();
    response.setHeader('X-UA-Compatible', 'IE=edge');
}

It was starting to drive me nuts, to put it politely and I was just about to give up on Font Awesome, until I noticed this while using IE8’s Developer Tools:

Read more of this post

Dabbling in Bootstrap and Font Awesome Part 2: The order of things – how to set up your Theme

When setting up your theme in order to use Bootstrap, the order in which CSS and JavaScript files are getting loaded is important. This is especially true when using Bootstrap with IE8 / IE9, as this requires additional JavaScript files, so, IE8 / IE9 will play nicely with Bootstrap.

Note: For my applications, I didn’t use any CDN sites to load the CSS and JavaScript files. My audience might not be connected to the internet, so, I decided to download all the files needed and put them in a web resources database from where they can be referenced from any application. That way, I just have to update any CSS and/or JavaScript files in one place. But this is not important for the topic of this post, however you load your files is fine.

Also, I won’t go into detail as to how to add Font Awesome / Bootstrap CSS and JavaScript files to your application as there are already plenty of blog posts regarding these topics. Simply do a search “XPages Bootstrap” or “XPages Font Awesome” and you’ll find these posts.

The way I set up my themes (I use additional bootswatch themes) was inspired by Tim Tripcony’s video post on NotesIn9 136: Using XPages with Bootstrap 3 and FontAwesome.

Lets get started.

Read more of this post

We are World Champion!!

I know this is wayyy off topic, but we are World Champion!!!

What a fantastic game. Its been in the making since 2004. Congratulations to the German team.

Dabbling in Bootstrap and Font Awesome Part 1: Legend-Tag and IE 8/9

Welcome to my first part of “Dabbling in Bootstrap and Font Awesome”. In this series I will post about the issues I ran into while using Bootstrap / Font Awesome with , but not limited to IE 8/IE 9 and the solutions / work-around I found for them.

First up, the <Legend> Tag. With the legend tag, you can create a nice title for your form / page. Just add the <legend> tag to your source code and some text in between the tag:

Image 4

 

When you open your XPage in the browser, you’ll see that Bootstrap formats it rather nicely for you:

Image 1

 

However, if you open your XPages in IE 8 / IE 9, the Bootstrap styles are not being applied:

Image 2

 

The reason for this is, IE 8 / IE 9 can’t handle the legend tag without it being wrapped inside a fieldset tag and if you look at the HTML code, the legend tag has been scrambled by IE, thus Bootstrap can’t apply its styles:

Image 3

 

The solution to this problem is rather simple: Wrap the legend tag inside the fieldset tag and Bootstrap will apply its styles even in IE 8/ IE 9:

Image 5

 

Et voila, it works in IE 8/ IE 9 as well:

Image 6

 

Happy Coding!

Securing your XPages Website Using Public Access

Great post I found by Martin Rolph on how to secure your XPages web app:

Securing your XPages Website Using Public Access.

P.S.: I had to update the link as the URL changed. Thank you to Victoria from Oval