XPages and Me

My Journey into XPages Development

Splitting up: Another Way to Handle Large Forms – Part 1: The Bootstrap Panel Custom Control

An important part to splitting up the the forms is, to have a panel that can be animated. For each step in your process to guide the user thru filling out the large from, you’ll need one panel. And to make the transition between each step look nice, you’d want to use JQuery animation.

Take a look at the following posts. They’ll explain how to set up a reusable Panel custom control and how to enhance it, so we can use it for our purposes:

Dabbling in Boostrap and Font Awesome Part 6-8: re(Use) Me! (Panel)

Diving into Bootstrap and Font Awesome – Part 2: Enhancing the Bootstrap Panel Custom Control

In the next post, I’ll show you how I’ve set up an application layout custom control, that’ll allow us to use a side bar for the form navigation.

Splitting up: Another Way to Handle Large Forms – Introduction

When dealing with large forms with lots and lots of fields on them, be it as a user or developing an application with large forms, you’ve probably encountered the issue of validation and ease of navigation:

  • As a user, if the form is poorly designed, you’ll have to scroll thru it to find the fields, for which the validation failed. This can become rather frustrating, if it is not immediately clear, where the validation failed and you have to try and submit a form multiple times in order to get it done
  • As a developer, you have to come up with an innovative way to display validation errors that make sense and are easy to rectify for the potential user

Read more of this post

Farewell Domino

Well, it finally happened. My 15 years in Lotus Notes / XPages development are coming to a close today.

I am off to new technologies and opportunities and I am looking forward to it.

I will keep this blog open and I still have a few articles in the pipeline. And, of course,  I’ll be available for any question you might have.

Thanks to all my readers, I hope I was able to help you find answers to your questions.

Diving into Bootstrap and Font Awesome – Part 8: Select2 and Bootswatch Paper Styling

Bootswatch released a new Bootstrap theme called “Paper”. It is based on Google’s Material Design.

It looks very nice and clean, and I’ve used it in some of my projects. However, if you also use Select2 for your combo and list boxes, Select2 adds its own styles and won’t render the combo-boxes as shown in Bootswatch Paper or Google’s Material Design.

I’ve customized some of the Select2 CSS classes, so that the combo-boxes / list-boxes will look like they do in the aforementioned designs.
Read more of this post

Diving into Bootstrap and Font Awesome – Part 7: select2 and Value / Tag Not in List

When using combo boxes / list boxes, we sometimes have to give users the ability to add / enter values, that are not part of the predefined value list.

When developing applications for the Notes Client, all we had to do was to just tick the box “Allow values not in list”. Yes, those were simpler times indeed.

As you know, we don’t have that option with XPages and had to come up with our own solutions for that.

With select2, however, you can do it. Though before the 4.0.0 version, it was rather cumbersome (not going into details here). But with the latest version, it is as easy as adding a data- attribute to your combo box / list box, which that’s really all you have to do. And here is, how:
Read more of this post

Diving into Bootstrap and Font Awesome – Part 6: Fun with Panels 1

In part 2 of this series, I’ve enhanced the Bootstrap panel, adding properties, so, you can have a fixed height panel with scroll bar if needed.

You can set the height by using px, em and %. But what if you change the screen sizes or the panel is used on desktop, tablet and mobile devices, how can you make sure the panel height stays the same relative to the height of the viewport?
Read more of this post

Diving into Bootstrap and Font Awesome – Part 5: Checkbox Group

If you want to style your XPages Checkbox Group with Bootstrap, simply wrap it inside a div with the class “checkbox”

Read more of this post

sessionAsSigner Oddities – Part 1

During a recent project, I had to start using sessionAsSigner in my SSJS.

For those of you, who don’t know what sessionAsSigner does: It allows a current user, to run code and do things he usually wouldn’t be allowed to do, due to his access level for a certain application. sessionAsSigner runs the code with the access level of the signer of the design element. So, whoever touched the XPage or Script Library last in the designer, this person’s access rights will be used for sessionAsSigner. That means, if you roll an application out to production, make sure all design elements are being signed with the admin ID.

Though it works very well, I also ran into some odd behavior while using it. I am not sure if this is going to be a whole series (as I don’t know if I’ll encounter any more issues), but I thought I’ll start it out as one, just in case.

So, what happened? In this particular instance, I wanted to read the content of a rich text field as MIME Entity. I’ve used that in several other projects and it worked very well.
Read more of this post

Diving into Bootstrap and Font Awesome – Part 4: Gone with the Partial Refresh

In Part 5 of my “Dabbling in Bootstrap and Font Awesome” series, I showed you, how you can add tooltips to your fields / buttons by using the attr properties and initializing it with an output script.

If you used this technique, you might have noticed that, after a partial refresh, the tooltips’ Bootstrap rendering is gone. This is due to the fact, that the DOM tree of the partial refresh area gets rebuild and sent back to the browser.

In this post, I am going to show you, what you can do to reinitialize the tooltips after a partial refresh.
Read more of this post

Diving into Bootstrap and Font Awesome – Part 3: Displaying / Hiding Content Based on Device Type

When designing an application, that is going to be used on different devices (desktop, tablet, mobile), your design for each of the devices might be very different from each other. Thus, you need to make sure that each design is only being displayed on the device type, it was designed for.

Obviously, you can create different custom controls that will contain the UI for the different devices. But how to hide or display them? It is not very hard to check the screen’s size with client-side javascript, but how do I pass that on to a rendered property?

Here is one way to do it:
Read more of this post