Introduction
For an application I needed a carousel to display images on the frontpage. Since we go “all-in” Bootstrap the “natural choice” would be the Carousel component from the Extension Library. Unfortunately that control currently only accepts “static” slideNodes so I had to come up with something similar.
In the beginning…
First I just took the sample code from W3schools how to setup a basic Bootstrap Carousel component.
Second I set up a Notes view that contains the data I need for my carousel. This view will be the source for an XPages Rest Service control (PDF alert) which I call after page load with an Ajax call using jQuery’s getJSON.
As you can see I update the Bootstrap sample code with the received result(s).
As a result I get the Carousel component from Bootstrap but now with ‘dynamic content’.
(for those who have never seen a Carousel)
The only complication I experienced was due to the fact that I separate the design from the data and accessing the data is easier in SSJS/Java then CSJS.
Here is the code: Link Dropbox
Happy development =)
I prefer to roll my own Bootstrap in an XPage application. I feel that it gives me more flexibility.