Styling the Pager control for Bootstrap UI

Many of us are acquainted with  Bootstrap in our XPages application. However if you place a Pager control on your XPage it does not render according bootstrap style.

So what can you do?

If you have the option to install the Extension Library with Bootstrap in it: DO IT.

If you don’t have that option you can place the Bootstrap resources in your NSF or use a CDN.

If you are using these last two options you will notice the Pager control is still non-Bootstrap styled. You can either:

  • Apply CSS yourself (link, link)
  • Apply your renderer (link)

I noticed in the first approach the … display for page numbering will not be proper styled:

Screen Shot 2016-03-01 at 10.46.13.png

If you are a CSS-wizard you probably can fix this (I can’t).

The second approach renders the Pager perfectly with Bootstrap style applied and hopefully the strange behaviours Frank van der Linden refers to do not appear.

Happy development =)

 

 

Internationalization of the Pager controls

While translating an app for internationalization I noticed that Pager controls (e.g Pager Expand/Collapse, Pager Show/Hide Details)) were still default in English. So I wondered how you could translate them since they did not adapt to the selected language in my browser?

It turns out that a workable way is to set the text explicit in the controls first to your default application language:

Screenshot_1

 

Now they have become available for translation:

Screenshot_2

If you open the properties file for the XPage/Custom Control you can allocate the strings to translate:

Screenshot_3

 

The downsize to this approach is that you have to translate them for every design element you have the controls on. I assume this should not be the intention, so if you know the proper way, please let me know.

Update

pagerSizes

Paul Withers replied to my post how to set the pages in the pagerSizes control.

Screenshot_4

Here is a demo code:

<xe:pagerSizes id=”pagerSizes1″ for=”dataView1″ text=”Page {0}” />

In the properties file translate it accordingly e.g.

pagerSizes1/@text=Sida {0}

I am not sure how to set the ‘All’ text.

pager

The pager control you can also translate. A description you can find in the XPages Wiki maintained by Julian Buss.

 

Here is an example code:

<xp:pager partialRefresh=”true” id=”pager1″ for=”dataView1″ style=”padding-right:20px;”>
<xp:pagerControl type=”Previous” id=”pagerControl1″ value=”Previous”></xp:pagerControl>
<xp:pagerControl type=”Group” id=”pagerControl3″></xp:pagerControl>

<xp:pagerControl type=”Next” id=”pagerControl2″ value=”Next”></xp:pagerControl>
</xp:pager>

Again, translate the labels in the properties file accordingly.

Below is the result of the translation:

Screenshot_5