Announcing a New Preview of the LightSwitch HTML Client

UPDATE 4/4/2013: We have released the HTML Client! See: Announcing the Release of the LightSwitch HTML Client!

Today we are announcing a new updated preview of the LightSwitch HTML Client, which is now available as part of Visual Studio 2012 Update 2 CTP 4. (Users of the previous Preview 2 please read these important upgrade instructions). This update brings many new exciting features and improvements, many of which are a direct result of your feedback – thank you for being a part of this exciting release!

Key Scenarios

Before I get into the details of what’s new, let’s recap the key scenarios that define the goals of this release:

  1. Cross-browser, mobile web clients that can run on any modern device.  With many employees bringing their own devices to the workplace, building a native client for every device and deploying each implementation to separate app stores is rarely feasible. LightSwitch HTML clients are built on standards-compliant HTML5 and JavaScript and provide modern, touch-first experiences on Windows RT, Windows Phone 8, iPhones and iPads with iOS 5/6, and Android 4.x devices.  (Apps on Android 2.x devices are functional but will have some experience degradation.)
  2. Publish apps to a SharePoint 2013 app catalog.  Many enterprises today use SharePoint as a collaboration hub to better people, content, and processes.  Although you can still choose to host your apps on your own or in Azure, enabling SharePoint in your LightSwitch apps allows you to take advantage of the app lifecycle management, identity, and access control capabilities within SharePoint – not to mention the business data and processes already running in SharePoint in your enterprise. So with the new SharePoint 2013 apps model, we’re bringing the simplicity and ease of building custom business apps with LightSwitch into SharePoint / Office 365.

What’s New

Improved App User Experiences

In direct response to your feedback, we have revised the save and navigation user model to provide a user experience that is more natural, streamlined, and consistent with modern app UX guidelines.  New UI primitives such as command bars, popups, and reusable dialogs are now available to help you build a richer set of user experiences – the latter has particularly been a top feature request which we’re happy to have delivered.  Lastly, we focused on ensuring app UI can gracefully adapt to different form factors.

The following screenshots illustrate the experiences you can create using only built-in controls, default screen templates, and default navigation.


Figure 1: Built-in tile lists make efficient use of screen real estate; a command bar is docked at the bottom of the screen; the command bar buttons display icons you can pick from a selection of built-in icons, or you can optionally display custom icons of your own.


Figure 2: The Filter command has been configured to display a custom-defined in-situ popup for quick user input.


Figure 3: Tapping the Add command navigates to an Add/Edit screen – this screen has been configured to display as a dialog, which has built-in Save and Cancel commands (top-right).  Tapping Save will immediately save data and return to the previous screen by default.  This is a very common pattern, but you can customize this behavior via code.


Figure 4: Tapping a tile on the home screen opens the View Customer screen – this screen has been configured to display full screen (i.e. not as a dialog).  This screen also has a command bar – tapping Edit opens the same Add Edit screen we saw in Figure 3 – this is an example of dialog re-use that is now possible.

When the same app is run on a phone, the UI is automatically optimized for a smaller screen size.  Notice the smaller font and icon sizes, tighter margins, single column layout for fields, and how the Add/Edit Customer UI now displays full screen (since displaying dialogs on a phone form factor would look odd).


This is a good example of how LightSwitch can significantly reduce the time and effort required to build apps that can run on the wide range of modern devices used within the enterprise today!

More SharePoint 2013 Hosting Options and On-Prem Support

If you choose to enable SharePoint in your app—and we think you should, given the common business app infrastructure SharePoint 2013 provides out of the box—you can now choose to deploy your application as a provider-hosted app in addition to auto-hosting.  The benefit of a provider-hosted app for SharePoint is it can be hosted on your own Windows Azure account or any remote web platform, therefore providing you with more control over the environmental resources available to your service and database.

Also new is support for SharePoint 2013 On-Prem.  This is an addition to being able to run your app in Office 365, which was available since Preview 2.  (If you don’t manage an on-prem SharePoint 2013 server and would like to get started building apps for Office 365, Beth has a walkthrough that can get you up and running in minutes.)


Localize your App into Multiple Languages

And for the feature we know many have been waiting for… you can now localize your app into multiple languages! This has been a top requested feature and we’re happy that this capability will now unblock what has been a critical requirement for many customers.  You will now have the ability to define resource strings for all facets of your application: this includes UI in the HTML client, Silverlight client, and server-side strings, including your own custom strings (e.g. validation errors).  This update also rounds out globalization support in the HTML Client, so that date formatting, decimal separators, etc. is now handled for you depending on the locale of the running app.  Check out this walkthrough for more details on how to localize a LightSwitch app.

And More…

There are yet more features and improvements available in this release!  More details will be available in forthcoming blog posts, but to name a few more:

  • Data attach to SharePoint 2013 lists.  Apps with SharePoint enabled also automatically flow the logged-in user’s identity so that any list edits are shown to be made on behalf of the user.
  • Login page when Forms authentication is turned on.  The default login page is a standard .aspx file in your project that can be fully customized with custom branding and theming.
  • NuGet Package integration for easier acquisition of custom controls.
  • Enhanced LINQ aggregation capabilities for building dashboard UI.
  • Improved IDE navigation between related entities, screens, and queries.
  • Numerous runtime performance improvements, including minification of JavaScript and CSS resources, reduced data payload size, and runtime UI layout and navigation (most noticeable on Android devices).

Download VS2012 Update 2 CTP 4

Download the preview and tell us what you think!  If you already have a previous LightSwitch HTML Client preview installed, be sure to check out our guidance on how to correctly upgrade as well as how to bring your existing projects forward.  Please use the LightSwitch HTML Client forum to post your feedback and check the HTML Client Resources Page on the Developer Center and this blog for videos and articles as they become available!

Visual Studio 2012 Update 2 CTP 4


Also, if you’re just getting started, make sure you check out our updated tutorials.

On behalf of the team, I’d like to thank you for your continued support and feedback to help make this the best product we can – thank you!

– John Stallo, Lead Program Manager, Visual Studio LightSwitch Team