In this post I’d like to discuss a feature of LightSwitch that helps speed up your development of HTML client applications. We first released this feature in Visual Studio 2012 Update 2 with the LightSwitch HTML Client and it is also available in Visual Studio 2013 Preview. Beth Massi briefly touched on some aspects of this feature in one of her “How do I” videos (jump to the 2 minute mark to see it in action).
LightSwitch Application Development
Making Development Easier
Let us walk through a couple examples. Using Visual Studio 2012 Update2, I have created a LightSwitch HTML Application (C# or VB) project. I have added a “Contact” entity and a “Browse” screen for Contacts.
Adding/Editing Screens and Editing Entities
Under “Debug configuration” launch the runtime (by pressing F5 or Start). The Browse Contacts screen is displayed with no data (because we haven’t added any yet).
While running, let us add a screen for entering data and a button to launch it from the browse screen. Right-click on the rows layout and select “Add button” and choose the existing method “addAndEditNew”.
The new screen gets added (see below). Notice that the screen designer and properties windows are available for editing so you can customize any part of the screen while debugging.
In many instances, changes might be spread across several files and clicking just the “Save” button on the toolbar or Ctrl+S might leave some files unsaved. Hence, when you are finished, click the “Save All” button on the toolbar or Ctrl+Shift+S.
Refresh the browser to see your updates. In many instances refreshing the browser will require navigating back to the Browse/Home screen.
Now let us add some data. While running, we can continue to customize the Browse Contacts screen by moving the “Add Contact” button above the list. We can also change the control from a List to a Tile List, or perform a multitude of other screen customizations. After you save and refresh the browser, the application is updated.
This also works under the HTML client perspective in the data designer. The designer & properties window is editable. Open the entity and select the client perspective at the bottom of the data designer.
Also note that adding a screen through here or through the Solution Explorer is also available while the application is still running.
We can also customize the rendering methods for controls on any screen. For this example, let us customize the “Add Contact” button so that it shows the “+” icon. Select “Edit PostRender Code” link from properties (or alternatively, you can select “postRender” event from “Write Code” drop down).
Editing CSS & HTML Files
Editing CSS and HTML files on disk should be as familiar as traditional Web development. You simply change a file in the project and refresh the browser to verify the change.
Let us change the theme of the application by making a small change in the htm file while application is still running. Like I described above, this will require going to “File View” (in VS2012). Under the HTML client project, open the default.htm file. We can make the following changes to switch to the dark theme.
Press “Save All” on the toolbar and refresh the browser to verify our changes.
As you can see, there are a lot of modifications you can make to the HTML client while debugging. This should help speed up development of your LightSwitch applications.
Things to Remember
There are a few things to keep in mind when using this feature:
- Remember to launch your app under Debug Configuration (F5)
- You can’t delete & rename screens while the application is running
- Undo & redo of changes in designers are not allowed at this time
- You can’t edit screen queries because queries are executed on the server
- Always remember to Save All (Ctrl+Shif+S) after making changes and before refreshing the browser
As always, we love to hear about your experience with this feature and if you find it useful. Please leave a comment below or you can always leave feedback in the LightSwitch Forum.
-Sudhanshu Kulkarni, Developer, LightSwitch Team