Set the Bootstrap class for all multiline text fields and labels in XPages with a Theme

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):

BootstrapTextArea_Labels_Before

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:

BootstrapTextArea_Labels_After

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: