Speed up LightSwitch Development with “Edit & Refresh” (Sudhanshu Kulkarni)

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

In traditional web development, you can edit HTML, CSS & JavaScript files and refresh the running application (browser) to see the changes immediately. LightSwitch applications are much more than just HTML, CSS & JavaScript which makes it challenging to follow the traditional model of “save and refresh the browser”. The repetitive cycle of Edit-F5-Verify becomes a little painful for LightSwitch HTML projects.

Making Development Easier

Let me introduce a feature we call “Edit & Refresh for LightSwitch HTML client”. This featureallows you to continue your design & debugging experience without shutting down the runtime. As long as your changes are within the HTML client (adding and editing screens, editing an entity in the client perspective, writing JavaScript code, editing HTML & CSS, etc.) you no longer need to stop and restart debugging!

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.

Writing JavaScript Code

Similarly, you can add JavaScript code for screens and entities while the application is running. For instance, open the Contact entity in HTML client perspective, select the “Write Code” drop down, and choose the “Created” event. We can add code to the entity’s Created event to set a default value – in this example we will set the “Active” field to true.

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).

You will be able to edit the existing JavaScript code, Save, and quickly verify the changes in the running application. Please note that while the application is running, the scripts shown under the “Script Documents” node in the Solution Explorer are read only. If you want to edit a JavaScript file in Visual Studio 2012, go to the “File View” by toggling the view (see below). After switching to file view, you will see the folder under the HTML client project containing your JavaScript code.

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.

Notice the dark theme of the application. Also note the customization of the “Add Contact” button that we made in JavaScript. If you click the “Add Contact” button, you will see the “Add Edit Contact” screen we added previously and the flip switch control for the “Active” field now defaults to Yes (true). You will see the BrowseContacts.js and Contact.js files that contain these modifications under the list of scripts in the Solution Explorer.

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.