XPages and Me

My Journey into XPages Development

Tag Archives: JavaScript

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

Dabbling in Bootstrap and Font Awesome Part 6-6: (re)Use Me! (Navbar)

In this post, I will show you how I set up my Bootstrap navigation bar. I know there are already many different posts out there on that. The difference with mine is, that I am using a profile document to define, what kind of navigation bar is being used across the whole application.

In addition, the profile document is also being used to manage the Bootstrap container type and field sizing (more about that in another post).

So, lets begin.

Read more of this post

Dabbling in Bootstrap and Font Awesome Part 6-1: (re)Use Me! – Update

After using the Column Custom Control from my original post in many different applications for a while, all the sudden I ran into an issue. I had created a new application with a search panel atop a view panel and was using the column custom control in it for the search fields. Whenever I tried to preview the XPage in the browser, I would get an error message for the following line of code, that calculates the style classes for the column div:

Image 1

Really weird, especially since the previous 4 rows of code seemed to work fine, doing exactly what the one line of code was doing.

Anyway, to fix it, I had to do the following:

Read more of this post

Dabbling in Bootstrap and Font Awesome Part 6-3: (re)Use Me!

Today, I will create two additional, reusable custom controls for Bootstrap’s Input Group. Input groups allow you to add text, icons or buttons before, after or on both sides of any text-based input. For more information, please follow this link.

In addition to creating the two custom controls, I will also demonstrate a little bit, how to use the “Visible” property for property definitions.

Read more of this post

Dabbling in Bootstrap and Font Awesome Part 5: How to activate the tooltip

If you’d like to make use of the Bootstrap tooltip, you need to activate it by adding some client-side JavaScript to your XPage. Once that is done, you can set the tooltip simply by adding attributes to your control for which you’d like to have a tooltip displayed.

Lets get started.

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