In my last post, I showed how to automatically set the class name to pick up Bootstrap styling on all text fields in an XPages application via the theme. In this post, I’ll show how to set the class name on multiline fields and field labels as well.
If I update the form from the last post to include a multiline edit box, it will look this (if I already have the code from the last post included in the theme):
The multiline edit box doesn’t match and the field labels also aren’t picking up Bootstrap styling.
This code in the theme will update the multiline edit box controls to pick up the required form-control class:
<!-- Set all multiline inputs to Bootstrap styling --> <control> <name>InputField.TextArea</name> <property mode="concat"> <name>styleClass</name> <value>form-control</value> </property> </control>
This code will automatically provide the class to all field labels via the theme:
<!-- Set all labels to Bootstrap styling --> <control> <name>Text.Label</name> <property mode="concat"> <name>styleClass</name> <value>control-label</value> </property> </control>
Now, everything on the form is picking up the correct styling:
In order to enable your fields to pick up Bootstrap styling, you must specify the class name form-control on each of them. In this post, I’ll show how to make this much easier by setting it for all text fields at one time via the theme.
My application is already using a custom theme in order to make Bootstrap and other resources available globally, so I added this code to automatically add the form-control class to all input text controls.
<!-- Set all inputs to bootstrap styling --> <control> <name>InputField.EditBox</name> <property mode="concat"> <name>styleClass</name> <value>form-control</value> </property> </control>
This instructs the server to look for all text fields and add form-control to the styleClass attribute. The property mode is set to concat so it will add the class to any other classes you define on the control rather than overwrite it. Now, all text fields will automatically pick up the correct styling!
That’s more like it.
This assumes you already have bootstrap enabled in your application. The specific layout in these screen shots was created with a well and other divs with standard Bootstrap scaffolding classes.
I’ve wrestled with IE’s compatibility mode (which makes higher versions of IE act like IE7) a few times recently. Some workarounds I’ve come across were documented previously. In this post, I’ll show how to conditionally load a style sheet that has styles specifically for compatibility mode.
Themes to the Rescue
Fortunately, you can determine the browser and version in XPages and you can use a theme to conditionally load a style sheet based on the browser and version.
The snippet below will load one style sheet if the browser is IE7 (or below) and load another style sheet if the browser is anything else.
The .isIE(0,7) method returns true or false based on whether the current browser is any version of IE from 0 to 7.
It’s a massive headache to deal with compatibility mode, but this flexibility makes it a little easier to adjust styles as needed.
When users view an XPage, they icon they see in the browser tab by default is a Notes icon. In this post, I’ll show how you can change that icon with a theme setting in order to add another nice touch of customization.
By default, the users will see a Notes icon displayed in the browser tab:
You can customize the icon that’s displayed in the browser tab globally for the application via the theme using the pageIcon property of ViewRoot.
For example, if I have an image resource in my application named document.png, I can set it as the favicon by adding this to the application theme:
<control> <name>ViewRoot</name> <property> <name>pageIcon</name> <value>/document.png</value> </property> </control>
Now I have a custom favicon:
If you happen to specify an invalid icon path, this is what it looks like in Firefox: