Create a JQuery searchbox for LightSwitch HTML pages

I have a LightSwitch project with a query that takes a single (optional) string parameter, then performs a case-insensitive search on the server (there’s only a couple of dozen records, so don’t worry about performance).  If I create a new screen in the HTML client based on this query, then I’ll quickly have something like:

Image 032

At run-time, this screen will look like:

Image 033

Cewl, easy money!

However, for no other reason than it being a cool Friday-afternoon-hacking-project, it would be nice if that textbox would look like an actual search control, and if we could move it to the command bar where there’s lots of pretty blue space going unused at the moment…

The trick is really easy: from the screen designer, turn the “SearchTerm” control into a “Custom Control”.  From Properties Panel, choose “Edit render code”.  In the generated method stub, change the code to:

myapp.BrowseTracks.SearchTerm_render = function (element, contentItem) {
    $(element).lightswitchsearchbox();
    $(element).lightswitchsearchbox("bindTo", contentItem);
    $(element).lightswitchsearchbox("render");
};

Wait, that’s it? LightSwitch has some kind of built-in lightswitchsearchbox method?  Nope, but my JQuery widget has :-)  Just like before, find it on my github page, download, add to the project, and enjoy the result:

Image 034

 

Keep rocking LS!!!!!

About these ads

6 thoughts on “Create a JQuery searchbox for LightSwitch HTML pages

  1. Pingback: Beth Massi - Sharing the goodness

  2. nice blog, keep ‘em coming!

    I changed one line to make the search box render inside a div like LS command buttons do.

    $(‘.msls-footer’).append($(”));

    This adds ability to style the containing div such as make if float:left and add padding.

    Thanks,
    Josh

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