Lessons learned with LightSwitch HTML Client project



LightSwitch as a technology/tool  has always impressed me.I was quite fascinated that how this super cool technology enables us to avoid all that plumbing code and concentrate on the real core busineslessons learneds logic. In a true sense it supports Rapid Application Development. I was already familiar with the Silverlight Client and had developed complete ERP application. LightSwitch team recently shipped the HTML  Client with Visual Studio 2012 Update 2. When I first read about it , the first thought that came to my mind was that it can be a game changer of building LOB apps on mobile.It fully supports adaptive rendering and it based on the Single Page Application concept. I immediately decided that I will try my hands on it but wanted to do some real project rather than some small examples. I decided that I will try to convert one of my modules that were written in Silverlight client to HTML client. So I started the conversion. During the development phase I got stuck up but thanks to Huy Nguyen , from MS who helped me with it. So in this post I share the code snippets of the common scenarios that are required for any LOB apps. I assume if you are reading this post then you are already aware of the basics of LightSwitch client , if not then I recommend you to learn first and revisit this post.


It is one of the common requirements that when the form loads, to increase the usability of the application the cursor should be focused on the first element of the form. This will avoid the user an extra click of focusing the cursor on the control and he/she can immediately start typing. Here you need to target the post_render event of the textbox , of which you need to set focus. One important thing to note in the code snippet is that we are calling the focus method under settimeout method. This is just to ensure that the all the required elements are loaded in DOM.


  1. myapp.AddEditCustomer.CustomerName_postRender = function (element, contentItem) {
  2.     // Write code here.
  4.     var $firstTextBox;
  5.     $firstTextBox = $("input", $(element)); //get the input tag
  6.     setTimeout(function() {
  7.         $firstTextBox.focus(); //set the focus
  8.     }, 2);
  9. };


Imagine you are developing an order data entry screen , You have customer dropdown in this screen and every customer has a fixed percentage of discount associated to it. Now whenever the dropdown value changes you need to retrieve the discount value from the selected customer and do the processing of the discount calculations and update the final price read-only textbox on the screen. Let us see how you can achieve this.


  1. myapp.AddEditOrder.created = function (screen) {
  2.     var order = screen.Orders;
  4.     function updateTotal() {
  5.         var price;
  6.         var discount = 0;
  8.         price = order.Item.Price;
  9.         //if selected customer on order screen is not null
  10.         if (order.Customer) {
  11.             discount = order.Customer.DiscountType;
  12.         }
  14.         order.Total = price * (1 – discount / 100);
  15.     }
  17.     // When the order's Customer changes, update its total by attaching the change event listener.
  18.     order.addChangeListener("Customer", updateTotal);
  19. };



You have the screen of unapproved orders which is data binded to your custom query (where isApproved==false) of Orders entity. All this orders are displayed as Tiles. When any tile is selected a new screen(AddEditOrder) from where the user can set the approved flag equals true. When this screen closes the accepted behaviour should be that the parent screen should no more show that order, unfortunately LightSwitch cannot handle this automatically. And we need to write the custom code for this to get achieved. You cannot use the default EditSelected on the ItemTap event but write your own custom code for it.

  1. myapp.ApproveOrders.Orders_ItemTap_execute = function (screen) {
  2.     // Write code here.
  3.     myapp.showApproveOrdersScreen(screen.UnApprovedOrders.selectedItem, {
  4.         afterClosed: function () {
  5.             screen.UnApprovedOrders.load(); // manual refresh
  6.         }
  7.     });
  8. };



Cheers and Keep learning new stuff 🙂


11 thoughts on “Lessons learned with LightSwitch HTML Client project

  1. Pingback: LightSwitch Community & Content Rollup– May 2013 (+more) - Beth Massi - Sharing the goodness - Site Home - MSDN Blogs

  2. Hi,
    thanks for your article.

    I don’t get your example “AUTO REFRESH OF PARENT SCREEN” work.
    I’m on the Screen ViewBuilding, each Building has multiple Units, which should be refreshed in the afterClosed-Event.

    But I don’t have the functions in your example.
    Getting the selectedItem is only possible asynchronously and a load() is not possible, because getUnits() or Building.getUnits() only returns a Promise.

    myapp.ViewBuilding.Units_ItemTap_execute = function (screen) {
    screen.getUnits().then(function (res) {
    myapp.showViewUnit(res.selectedItem, {
    afterClosed: function () {
    screen.getUnits().??? // manual refresh

    The screen.Building-Object also doesn’t have a Function load().

    Do you have any idea, where’s my mistake?

    • Hi Fred,
      In my scenario I had a screen of unapproved orders displayed as tiles (this is my parent screen). When any of the tile was getting selected , I was opening the corresponding record in the popup (this is my child screen). In the popup I used to change few fields and then close it. As that selected record was now updated , the changes were not reflected on the parent screen as a result of which I had to write my custom code on Item_Tap event.
      If you are expecting that VS 2012 should provided the complete intellisense then my friend you are still in the illusion. The JavaScript editor for LightSwitch is still not matured as C#.
      If your case is similar to mine then the code snippet in blog post should definitely work. The only thing that will be replaced is your viewmodel.
      Hope things are clear to you now.

  3. Hi
    the article is great, but I create a new order (not a selectedItem). I must pass the parameter in myapp.showNewOrder.
    How can I do?


    • Hi Ale,
      If your screen is based on AddEditTemplate then you can pass the null in the params.
      But the easy way would be to add the button in the command bar and then choose the predefined actions under navigation section.


  4. What you say is correct, but I need which the screen (AddEditTemplate) when is closed, I must refresh my list.
    For example, for refresh the count label about count list data.
    This, is possible?

    Thanks, you help is very important.

  5. Hi,
    I used ‘SETTING FOCUS ON FIRST TEXTBOX IN THE FORM’ in the application LightSwitch Html and work succesfully .
    But I would setting the ‘Details Modal Picker’ in the form.
    I think of change ‘input’ tag, but don’t work.
    Is It possible subscribe event ‘select’ or ‘changevalue’ in the Details Modal Picker ?

    Thanks, best regards

  6. Good on you for sharing your experiences. Although I pretty much know the Silverlight client inside out, when I recently started to do some work with the HTML client, suddenly I find I know nothing anymore, lol. So little tips like yours are very welcome.

    • Hi Yann
      Thanks for your kind words. Infact I was also coming from Silveright and HTML and JavaScript was alien to me. But MS team has made so easy with LighSwitch. The only thing is missing here is these how to do the common tasks so I thought let me document it.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s