Create a JQuery slider for LightSwitch HTML pages.

A JQuery slider (also commonly referred to as a carousel) has very little use in the LOB world, but sometimes you want one anyways, just because it’s cool.

To get started, open up any “hello-HTML app” and create a screen.  On the ViewModel, add a collection (Speakers in this example) than drag it on View so that your screen looks similar enough to my example:

Image 011

In the HTML client, there’s only three supported “Collection controls”: the List, the Tile List and the CustomControl.  To create a slider, it’s actually smarter to select the built-in List control over creating a custom control from scratch.  After all, the simple combination above, at runtime, will already look pretty fancy:

Image 008

The only thing different between the built-in List and a Slider control, is that the List is showing all items at once.  Nothing a little JQuery can’t fix :-)

I already prepped the code in a JQuery UI Widget so you can just download my switchtory.lightswitchslider and add it to the “Scripts” folder inside your HTML client project.  Don’t forget to load it as well: open the default.htm page and add:

    <script type="text/javascript" src="Scripts/switchtory.lightswitchSlider.js"> </script>

Now that the slider is part of your project, time to bind it to the collection & let it render.  Back in the screen designer, select the List control, and the first child element (Columns Layout in my example but Summary, Rows Layout, … whatever you made of it) and in Properties Window click the “Edit post-render code”.

Then glue it all together:

var slider; //Define a slider variable
myapp.Home.Speakers_postRender = function (element, contentItem) {
    slider = $(element); //Create the slider widget
    slider.lightswitchSlider({ timerInterval: 3000 }); //Initialize it
    slider.lightswitchSlider("bindToList", contentItem); ///Bind to the collection

};
myapp.Home.SpeakersTemplate_postRender = function (element, contentItem) {
    slider.lightswitchSlider("render", contentItem); //Last element? Time to render.
};

 

The slider widget has two methods (apart from the constructor with an optional timeInterval setting): “bindToList” (which grabs a hold of the actual VisualCollection, to find out how many elements are supposed to be loaded) and “render” (which grabs the HTML created by the LightSwitch default List, hides all the children and systematically unhides one child at a time…).

Press F5, you should only see one Speaker in your list:

Image 010

 

And if you wait a couple of seconds, that item will fade out and the next one will fade right back in.

Image 009

 

Awesome!

If you’re doing any fancy LightSwitch HTML customizations, remember: I showed you mine :-)

 

Keep rocking LS!

 

PS: Because a Slider usually shows 3-12ish items in rotation, the code doesn’t handle asynchronous paging

About these ads

9 thoughts on “Create a JQuery slider for LightSwitch HTML pages.

  1. Pingback: What field do you use to store an Image? | Jan Van der Haegen's blog

  2. Pingback: Create a JQuery searchbox for LightSwitch HTML pages | Jan Van der Haegen's blog

  3. Pingback: Beth Massi - Sharing the goodness

  4. Pingback: Beth Massi的中文博客

  5. That’s great!
    I’ve been trying some vendors gallery but this is already much better.
    My utlimate goal is to reproduce the iPhone picture viewer where one just slide with its finger to go from one pic to another. Do you think your code could be adapted to do so?
    Tks!

  6. I was unable to get your program to work. I get an error message ‘Cannot render before the collection is loaded’. I am not sure where the SpeakersTemplate_postRender function comes from? Could you please explain? Thanks.

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