Announcing Runtime Update 1 – Supporting jQueryMobile 1.3

When we took a bet on jQuery, jQueryMobile, and datajs for our HTML client, we recognized that we’d need to adapt to the rapid release cadence these frameworks employ.  At the same time, we know that small issues in our application runtime can cause considerable strife.  Our response is to start delivering a series of small, servicing releases for our HTML client runtime via NuGet that address known bugs and compatibility issues with emerging versions of jQuery, jQueryMobile, and datajs.  Today we’ve released the first update onto the NuGet gallery—Microsoft.LightSwitch.Client.JavaScript.Runtime update 1!

This first update adds support for jQueryMobile 1.3 and jQuery 1.9. Especially jQueryMobile 1.3 brings a lot of improvements and bug fixes. Embracing the mobile-first, instead of mobile-only, approach was the main focus of this release. This was achieved by implementing a popular technique called responsive design. New widgets like tables and panels work efficiently on large screens as well as small phones, enabling data-richer scenarios. Also jQueryMobile and jQueryUI are working closer together with the goal of having even more shared code and conventions.

jQueryMobiles new responsive table widget

(picture taken from the jQueryMobile 1.3 announcement)

While we cannot add new design time features as part of a runtime update, you can still start using these new controls today by utilizing the power of our custom controls. A combination of our blog posts around custom controls and jQueryMobile’s excellent documentation will help you to get started. Michael dedicated a complete post to the integration of jQueryMobile controls as custom controls and our post about using a maps control to visualize list data explains the API of the LS collection which you need to implement your own table control.

How to update?

Thanks to NuGet the installation of a runtime update is a simple, two-step process. First, you update the “Microsoft.LightSwitch.Client.JavaScript.Runtime” package, which will automatically pull in the latest supported versions of our dependencies. Second, you bump the version numbers of the updated JavaScript and CSS files in the default.htm.

Important: Due to a known bug with NuGet, JavaScript projects and source control you need to unbind your solution from source control before updating the NuGet packages. Open File –> Source Control –> Advanced –> Change Source Control and unbind your solution and the projects it contains. After performing the following steps bind it again and merge in the new changes.

Start by switching to the file view of the solution explorer. The context menu of the HTML client project contains the entry “Manage NuGet Packages…”. Selecting the “Updates” section of the package manager will show the following screen:


Updating the LightSwitch runtime will automatically update jQuery and jQueryMobile for you. After a quick restart of Visual Studio and reopening the project you need to make a few changes in the default.htm:

  • light-theme.css to light-theme-1.0.1.css
  • mlsls-light.css to msls-light-1.0.1.css
  • to
  • msls-1.0.0.min.css to msls-1.0.1.min.css
  • jquery-1.8.2.min.js to jquery-1.9.1.min.js
  • to
  • msls-1.0.0.min.js to msls-1.0.1.min.js

F5 and you are done. Since NuGet packages are defined on a per project basis, you need to perform those steps for every project you have. Also keep in mind that jQuery and jQueryMobile remove functionality that was previously deprecated with every release. If you are heavily customizing your LightSwitch application using JavaScript code this might affect you. Make sure to carefully study their release notes in order to learn about new features and removed functionality:

If you have any problems with the upgrade or want to learn more about using some of the new features you can find us in the forums or the comments section below.

– Heinrich Wendel, Program Manager LightSwitch Team