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

 

 

Advertisements

fix for down caret icon in dijit.TitlePane when using Bootstrap from ExtLib

For unknown reason the dijit.TitlePane is not part of the Dojo controls in the ExtLib. You can implement your own version and Mark Roden posted a nice description how to achieve this. HOWEVER in case you are using the Bootstrap theme in the Extension Library you will notice when opening a pane the down caret icon can not be displayed.

Here is the build up for 2 TitlePanes dijits:

<xp:div id=”titlePaneGemCars” dojoType=”dijit.TitlePane” title=”German Cars”>
Audi
BMW
Mercedes
<xp:this.attrs>
<xp:attr name=”open” value=”false”></xp:attr>
<xp:attr name=”toggleable” value=”true”></xp:attr>
</xp:this.attrs>
</xp:div>
<xp:div id=”titlePaneJapBikes” dojoType=”dijit.TitlePane”
title=”Japanese Bikes”>
<xp:this.attrs>
<xp:attr name=”open” value=”false”></xp:attr>
<xp:attr name=”toggleable” value=”true”></xp:attr>
</xp:this.attrs>
Honda
Suzuki
Yamaha
</xp:div>

Here is how it looks like in the browser:

titlepane_error

In case you choose another theme e.g. oneUI (*cough*) the panes are displayed as followed:

titlepane_oneUI

Note the display of carets is different (no carets for closed panes).

So how are we going to fix this? Via your friend CSS! Include the following CSS snippet at your page/stylesheet/theme:

.xsp.dbootstrap .dijitTitlePane .dijitArrowNode::before {
color: #428bca;
font-family: “Glyphicons Halflings”;
content: “\e114”;
font-size: 12px;
padding-left: 10px;
position: relative;
top: -1px;
}

The definition is similar for a closed dijit but the content is set here to specific Glyphicon (the chevron down icon). The content is set to a hexidecimal value for an icon? On the glyphicons site you can search for halflings and it will tell for the chevron-down icon the value is UTF+e114.

As a result your opened titlepane wil have the correct icon displayed:

titlepane_fixed

Happy coding!

Ps I assume there is someone smart here to register this break as a request at IBM?

Tip of the day: isDocument() for nested data in the Data View control

You can show nested data in the details section of the Data View control. Read about it here: Data Views – Part 10: Nested Repeat in the Detail Section.

In case you have a ‘flat’ Data View (one without collapisble categories) you do not need to detect if your ‘var’ property is a document. But when you have a categorized Data View you better check it otherwise opening/closing categories will give an error…

Demo of the Single Page Application Wizard control

You can bring a IBM Notes application without much work to the web browser via the Notes Browser plugin. But since Mobile is the standard nowadays that plugin seems to be obsolete almost. So what other options do you have for your enterprise apps?

  • You can introduce a mobile application platform, if you have the time and the money.
  • You can migrate your whole collaboration platform in exchange for something less, similar or not similar at all. And prey for mobile tools on that platform.
  • You can rewrite your apps and deliver them with the help of frameworks as mobile web application or in between solution.

Or… you save yourself the time & bucks and install the Extension Library version that contains the Single Page Application wizard from OpenNTF.

I have made a video in which I demonstrate how to mobilize the fakenames application in a couple of minutes. First I will describe the wizard and how the process for mobilizing an app looks like. Then I demonstrate the actual development which will take about 8 1/2 minutes.

Update – watch on Vimeo

Video on Vimeo: http://vimeo.com/99537780 in case you experience the message ‘This video is not available in your country’.

Youtube

Enjoy the video!

In case you want to contact me on mobilizing your Notes app, just send me an email.