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:
At run-time, this screen will look like:
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:
Keep rocking LS!!!!!
Cool !
great Jan! just one simple thing, how to add gist to project, im not familiar with this.. 😦
Pingback: Beth Massi - Sharing the goodness
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
Josh, that is extremely sweet, thank you!!!
Keep rocking LS!
Jan
It is giving me an error message that
CustomControl error: SearchTerm_render() method error: TypeError: $(…).lightswitchsearchbox is not a function