Carousel with dynamic content

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.

car_code01

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.

car_code02

car_code03

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’.

carousel

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

Summary JSON in XPages

I have written a document summarizing the usage of JSON as data-interchange format in XPages development. The document has no intention to be complete, it only covers the areas I have worked with JSON in XPages (and as far as I remember)

Please feel free to add your examples or links to more supplementary resources.

Happy reading!

https://quintessens.wordpress.com/?attachment_id=1462

Job Wanted

Looking for a creative brain? Choose me!

job-wanted

Bildr on Extension Library (work in progress)

In the last week before vacation I have some time left for some experiment. So I decided after reading the extension library guide to start rewriting the Bildr project on OpenNTF. Untill now I have come pretty far and the first results look promising. Not sure if I can manage to finalize the project before the end of the week, but let’s think positive!

Below some screenshots so far…