You are here:   Blog
Register   |  Login

 

Feb 7

Written by: Michael Washington
2/7/2013 9:40 PM  RssIcon

image

An End-To-End LightSwitch HTML Example

Live Demo: https://endtoendexample.lightswitchhelpwebsite.com/Client/default.htm (use your username and password from http://LightSwitchHelpWebsite.com)

In this article we will create an end-to-end HTML application in Visual Studio LightSwitch. The purpose is to demonstrate how LightSwitch allows you to create professional business applications that would take a developer days to create. With LightSwitch you can create such applications in under an hour.

You can download LightSwitch at: http://www.microsoft.com/visualstudio/en-us/lightswitch.

The Scenario

In this example, we will be tasked with producing an application that meets the following requirements for a order tracking system:

  • Products
    • Add Products
    • Edit Products
    • Delete Products
  • Orders
    • Add Orders
    • Edit Orders
      • Add Order Details
      • Edit Order Details
      • Delete Order Details
    • Delete Orders
  • Business Rules
    • Allow the current user to only see their orders
    • Show the number of orders for the current user
  • Features
    • Display the number of orders for a User

 

Creating The Application

image

Open Visual Studio and select File, then New Project.


image

Create a new LightSwitch HTML Application (note you must have the LightSwitch HTML Client installed).

 

image

The application will be created.

 

image

Right-Click on the Server node in the Solution Explorer and select Add Table.

 

image

Click on the table name to edit it.

Change the table name to Product.

 

image

Also, add ProductName and ProductPrice fields to the table.

 

image

Click the Save button to save the table.

 

image

Create an Order table (with the fields in the image above).

 

image

Create an OrderDetail table (with the fields in the image above).

 

Create Relationships

You will always want to make relationships when tables are related. This allows for optimal LightSwitch application construction. When creating queries, having relationships defined allows you to simply type a period (“.”) and traverse from one entity to another. This saves a lot of coding work and reduces coding errors. 

When creating user interfaces, defining relationships allows you to save a lot of coding work because LightSwitch will be able to automatically associate, for example, Order Details with their associated Order.

image

Click on the Relationship button to create a relationship between the Order Detail and the Product table.

 

image

A box will appear. Select Product for the To table and click OK (ensure the other fields match the image above).

 

image

You will see that a relationship has been created. you can double-click on the line to edit the relationship.

 

image

Click on the Relationship button again and make a new relationship to the Order table.

 

Create a Filter

One feature we are required to implement is to only show a user their own orders (and allow an administrator to see all orders). We must keep in mind that all LightSwitch applications expose all data via OData so we must always set security in the server-side code not only in the client-side code (such as the HTML or Silverlight LightSwitch clients).

image

The first thing we need to do is turn on security.

image

Next, we open the Orders table and select Write Code, then Orders_Filter.

Use the following code for the method:

 

        partial void Orders_Filter(ref Expression<Func<Order, bool>> filter)
        {
            // Only show the Orders for the current user
            filter = (x => x.UserName == this.Application.User.Identity.Name);
        }

 

All data that access this table will pass through this filter.

 

Set Defaults

Keeping in mind that we must set everything that relates to security in server-side code, we realize that marking orders with the UserName of the current user must be set using server-side code.

image

Open the Orders table and select Write Code, then Orders_Inserting. Use the following code for the method:

 

        partial void Orders_Inserting(Order entity)
        {
            // Set the Username 
            entity.UserName = this.Application.User.Name;
        }

 

Do the same for the Orders_Updating event.

Later, we will also set the UserName using client-side code, however, the server side code will always run and overwrite any value set client-side.

 

Create a Query

Another feature we are required to implement is to show the number of orders for the current user. We will make a query that we can later consume from the client-side.

image

Right-click on the Orders table and select Add Query.

image

Name the query OrdersForUser by clicking on the title and editing it. Save it first, then select the OrdersForUser PreprocessQuery.

use the following code for the method:

 

        partial void OrdersForUser_PreprocessQuery(ref IQueryable query)
        {
            // Only show the Orders for the current user
            query = query.Where(x => x.UserName == this.Application.User.Identity.Name);
        }

 

Create The User Interface For Products

image

We will first create a screen that will allow us to see Products.

Right-click on the Client node in the Solution Explorer and select Add Screen.

image

Create a Browse Data Screen using the Products table.

image

The screen will be created.

image

We will now create a screen that will allow us to edit a Product that is selected.

Click on the Products List and in its Properties select the Item Tap action.

image

Select Choose an existing method, choose editSelected.

image

We will now connect the Browse Data Screen to a new Edit Screen.

For Navigate To, select (New Screen…) and click OK.

image

The Add New Screen box will show. Select only the Product Details and click OK.

image

The screen will be created.

image

Now we will add a button that will create a new Product.

Return to the Browse Products screen.

image

Select  the Command Bar, then Add then Choose an existing method, then AddAndEditNew.

image

For Navigate To, select Add Edit Product (the screen created in the earlier step) and click OK.

image

Hit F5 to run the application.

Click the ADD PRODUCT button to add a Product.

image

Add a product and click the Save button to save it.

 

image

The products will show in a list.

 

Create The Main Page

image

We will now create the Main screen

Create a new screen called Main using the Orders table for Screen Data.

image

Select the Item Tap action for the List control.

image

We will now connect the screen to a new Edit screen.

For Navigate To, select (New Screen…) and click OK.

image

The Add New Screen box will show. Select the Order Details and Order OrderDetails and click OK.

image

The screen will be created.

Format The Add Edit Order Screen

image

Change the User Name Text Box to a Text label.

image

We will now allow the user to select an Order Detail and edit it in a new screen.

Click on the Order Details List control and then click on the Tap action in its Properties.

Select OrderDetails.editSelected and then Navigate To: (New Screen…).

image

The Add New Screen box will show.

Select the OrderDetail Details and  click OK.

image

The screen will be created.

Format The Add Order Detail Edit Screen

image

Right-click on the Rows Layout for the Order dropdown and Delete it.

We don’t need to show the Order (and allow it to be changed) because it will be set by the time the user gets to this screen.

We will return to this screen later to add a delete button. That delete button will require custom JavaScript and we will show how to do that later.

Therefore, we are done with this screen for now.

Create an Add Order Detail Button

image

We will create a button to allow the user to add a new Order Detail.

Return to the AddEditOrder screen.

Open the Command Bar for the Order Details Tab.

Select Add to add a new button.

In the Add Button popup, select OrderDetails.addAndEditNew and Navigate To: Add Edit Order Detail (the screen you created in the earlier step).

Create an Add Order Button

image

We will create a button to allow the user to add a new Order.

Return to the Main screen.

Open the Command Bar.

Select Add to add a new button.

In the Add Button popup, select Orders.addAndEditNew and Navigate To: Add Edit Order (the screen you created in the earlier step).

image

In the Solution Explorer, right-click on the Main page and select Set as Home Screen.

Setting Default Values

image

If we run the application, and click the Add Order button…

image

… and try to create an Order it wont save.

We are missing the User Name. We have already added code to overwrite the User Name with the current user, but since we made it a required field, it must still be supplied. We could just make the User Name field a text box and allow the user to type it in, but we can use ServerApplicationContext to insert it client side automatically.

See the following article for a step by step tutorial: Retrieving The Current User In The LightSwitch HTML Client.

 

Using Server Application Context

We will now create a file handler that will use the Server Application Context API to retrieve the currently logged in user’s User Name. We will then call that handler from JavaScript code on the client-side, to fill in the value on the screen.

image

In the Solution Explorer, click on the project and switch to File View.

 

image

Right-click on the Server/Web folder and select Add then New Item.

 

image

Create a new Generic Handler.

(note: you must create the file from scratch so that the proper references are added to the project. If you simply copy and paste, or drag and drop the file into the project, it will not work.)

 

Use the following code for the file:

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace LightSwitchApplication.Web
{
    public class GetUserName : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            using (var serverContext = ServerApplicationContext.CreateContext())
            {
                context.Response.ContentType = "text/plain";
                context.Response.Write(serverContext.Application.User.Name);
            }
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

 

image

Switch back to Logical View, open the Order table, select the Client (tab), Write Code, and then the created method.

Use the following code for the method:

 

myapp.Order.created = function (entity) {

    // Set the default date for the Order
    entity.OrderDate = new Date();

    // Using a Promise object we can call the CallGetUserName function
    msls.promiseOperation(CallGetUserName).then(function PromiseSuccess(PromiseResult) {
        // Set the result of the CallGetUserName function to the 
        // UserName of the entity
        entity.UserName = PromiseResult;
    });
};

// This function will be wrapped in a Promise object
function CallGetUserName(operation) {
    $.ajax({
        type: 'post',
        data: {},
        url: '../web/GetUserName.ashx',
        success: operation.code(function AjaxSuccess(AjaxResult) {
            operation.complete(AjaxResult);
        })
    });
}

 

(note: see Using Promises In Visual Studio LightSwitch for more information on using the msls.promiseOperation)

 

image

When we run the application, the User Name and Date are now set to their default values when a new record is created.

You will now be able to create and save records.

 

Formatting Output

image

When we look at the Order Details, we see that it is not formatted the way we want.

image

We return to the Add Edit Order screen and change the Order Detail Summary control to a Custom Control.

image

In the Properties for the control we select Edit Render Code.

We use the following code:

 

myapp.AddEditOrder.RowTemplate_render = function (element, contentItem) {
    // We need to wait until the Products for the Order Detail are loaded
    // so we create a binding to "value.Product.ProductName"
    // When the data is loaded the binding will be raised
    // We will then have all the data required for our display
    contentItem.dataBind("value.Product.ProductName", function (newValue) {
        // clear the element
        element.innerHTML = "";
        // Create a template
        var itemTemplate = $("<div></div>");
        // Get the Product name and quantity
        var ProductName = contentItem.value.Product.ProductName;
        var ProductQuantity = "";
        if (contentItem.value.Quantity !== undefined) {
            ProductQuantity = ' [' + contentItem.value.Quantity + ']';
        }
        // Create the final display
        var FinalName = $("<h2>").text(ProductName + ProductQuantity);
        // Complete the template
        FinalName.appendTo($(itemTemplate));
        itemTemplate.appendTo($(element));
    });
};

 

(note: for more information about Promises see: Using Promises In Visual Studio LightSwitch.
Also see: Writing JavaScript That Implements The Binding Pattern In Visual Studio LightSwitch)

 

image

When we run the application, the output is formatted as we desire.

 

Calling A Custom Query

Next, we will call the query we created earlier.

image

Open the Main screen, select Add Data Item, and create a Integer property.

image

Drag and drop the property from the View Model to the screen layout.

image

In the Properties, make the label Left-aligned.

image

To set the value for the property, select Write Code, then the created method.

 

Use the following code:

 

myapp.Main.created = function (screen) {
    myapp.activeDataWorkspace.ApplicationData.OrdersForUser().execute().then(function (results) {
        var TotalCountOfOrders = CountOrders(results);
        screen.TotalOrdersForCurrentUser = TotalCountOfOrders.toString();
    });
};
function CountOrders(Orders) {
    var TotalOrders = 0;
    var orders = Orders.results;
    orders.forEach(function (order) {
        TotalOrders = TotalOrders + 1;
    });
    return TotalOrders;
}

 

 

image

When we run the application we see a count of the Orders.

 

Easy Formatting

image

When we look at the Main screen, we see that it shows the User Name and we would like to show the Order Date.

image

In Visual Studio, open the Main screen.

Change the Order Summary control to a Rows Layout.

image

Right-click on the User Name label and delete it.

image

When we run the application, we will see the Order Date.

Deleting A Record

image

Open the Add Edit Order Detail screen and add a button to the Command Bar.

Make a Delete method for the button.

image

Right-click on the Delete method in the View Model and select Edit Execute Code.

use the following code for the method:

 

myapp.AddEditOrderDetail.Delete_execute = function (screen) {
    screen.OrderDetail.deleteEntity();
    return myapp.commitChanges().then(null, function fail(e) {
        myapp.cancelChanges();
        throw e;
    });
};

 

image

When you run the application, you will be able to delete the selected Order Detail.

image

You will need to Save the changes to actually delete the record.

We can also add a Delete button to the Add Edit Order screen using the following code:

 

myapp.AddEditOrder.Delete_execute = function (screen) {
    screen.Order.deleteEntity();
    myapp.commitChanges().then(null, function fail(e) {
        alert(e.message);
        myapp.cancelChanges();
        throw e;
    });
};

 

image

You will notice that if we try to delete an Order that still has Order Detail records…

image

…it will throw an error because the relationship that we created between the tables earlier was set to not allow an Order to be deleted if there were associated records.

Delete all the Order Details first and then you can delete the Order.

Navigate To A Screen

image

Open the Main screen and create a button that will navigate to the Browse Products screen.

image

The Show Browse Products button will show.

 

LightSwitch Help Website Articles

Full Control LightSwitch (ServerApplicationContext And Generic File Handlers And Ajax Calls)

Saving Data In The Visual Studio LightSwitch HTML Client (Including Automatic Saves)

Creating A Desktop Experience Using Wijmo Grid In LightSwitch HTML Client

Creating ASP.NET Web Forms CRUD Pages Using ServerApplicationContext

Using Promises In Visual Studio LightSwitch

Retrieving The Current User In The LightSwitch HTML Client

Writing JavaScript That Implements The Binding Pattern In Visual Studio LightSwitch

Implementing The Wijmo Radial Gauge In The LightSwitch HTML Client

Writing JavaScript In LightSwitch HTML Client Preview

Creating JavaScript Using TypeScript in Visual Studio LightSwitch

Theming Your LightSwitch Website Using JQuery ThemeRoller

Using Toastr with Visual Studio LightSwitch HTML Client (Preview)

 

LightSwitch Team HTML and JavaScript Articles

Visualizing List Data using a Map Control

Enhancing LightSwitch Controls with jQuery Mobile

Custom Controls and Data Binding in the LightSwitch HTML Client (Joe Binder)

Creating Screens with the LightSwitch HTML Client (Joe Binder)

The LightSwitch HTML Client: An Architectural Overview (Stephen Provine)

Writing JavaScript Code in LightSwitch (Joe Binder)

New LightSwitch HTML Client APIs (Stephen Provine)

A New API for LightSwitch Server Interaction: The ServerApplicationContext

Building a LightSwitch HTML Client: eBay Daily Deals (Andy Kung)

 

Download Code

The LightSwitch project is available at http://lightswitchhelpwebsite.com/Downloads.aspx

(you must have HTML Client Preview 2 or higher installed to run the code)

62 comment(s) so far...


Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

Hi,
I installed LightSwitch HTML Client ,but my vs 2012 can only show the two default lightswtich application templates which are installed default by vs 2012.I can't find the "LightSwitch HTML Application" template ,can you help me out?

By wang on   2/12/2013 5:28 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

Great tutorial!
I want more explanation on the various codes.
Can you explain in detail the meaning of (x => x.UserName == this.Application.User.Identity.Name)

By Mensah Stephen on   2/14/2013 8:24 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

Hi Michael,

Really good article

Is there any user name and password to start Demo?

Thank you,
URVISH SUTHAR

By URVISH SUTHAR on   2/16/2013 6:00 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

Michael: Extraordinary example "EndToEndExample", thank you very much for his contribution

By Luis Mariano Russo on   2/19/2013 8:22 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

Great tutorial overall, but as of the release of Update 2 CTP 4 on 3/3/2013 this tutorial needs to be updated slightly. The big issue I ran into trying to follow this was that the deleteSelected method no longer appears in the list of predefined functions for creating a UI button. editSelected, viewSelected and addAndEditNew are still there but I cannot find deleteSelected anywhere (for any of the screens). I've followed the tutorial step by step otherwise, thanks for the walkthrough! (sorry if this posted twice, the captcha is acting funny)

By Steve Kehoe on   3/6/2013 10:44 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

Hey Mike, nice work (as usual)

in the quantity field, any reason I can't the numeric keys and I can only use the numeric pad on keyboard's right side?
Another words, the field does not take number if I use the keys that are below the function keys.

Thanks!
..Ben

By Ben Hayat on   3/11/2013 3:43 PM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

Good job, Michael, this tutorial has so far been a great help in familiarizing me with Lightswitch and getting started with Silverlight.

I do have one issue I hope you can help me with, however; after creating the generic handler and filling in the created method on the client side to use CallGetUserName() I still have no user name filled out. I thought that it was because I failed to set a default value someplace but I have looked over the entire article a number of times and dont' see where I missed that. Could you point in me the direction I need to look to get the default value of TestUser set up?

By Clay Ratliff on   3/20/2013 6:15 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

I believe you, as I said, your sample code works exactly as described when I run it as a project.

I'm sure it's something with the way I have VS and/or IIS configured on my machine. I am very new to windows development having spent almost 16 years developing for some flavor *nix.

One question though; in the AddEditOrder.RowTemplate_render function you reference "element.innerHTML", however, this does not appear on my intellisense. Instead I get element.innerText, which is what I used and it works fine. Are one of these deprecated or is there a subtle difference between them that doesn't show up in this example?

I have finished the walk-through and aside from the odd behavior of my test user, everything functions exactly as you have pointed out. Fantastic job!

By Clay on   3/20/2013 10:48 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

Great job as usual.

By Richard Waddell on   4/10/2013 7:44 PM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

Enjoyed the article. Annotating the steps in red is very effective because LightSwitch is very step oriented.

By Robert Salita on   4/12/2013 8:51 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

Hi Michael , great job to sharing goodnes of LS , i developing a application , using the authentication of DNN , same as your site .. is transparente the form authenticacion form users ASP.NET Membership in DNN and LightSwitch ... ?? i dont figured out how its workk in your example .. thanks

By ezazueta on   4/18/2013 10:22 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

You mention the Administrator can see all orders. Where in the code is this implemented?

By Ken Draper on   4/24/2013 10:33 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

Great job but the deployed, non dev server, App fails after authentificacion:

"The application could not be loaded. Please try refreshing the page.
Failed to load model: /msls/model_failed_server_1args"

By Jose Vales on   5/2/2013 9:54 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

Hi
I tested your application at this link: https://endtoendexample.lightswitchhelpwebsite.com/Client/default.htm
It's work perfectly.
I have a similar application in LightSwitch HTML5 and it runs correctly inside VS2012 (Debug and Release).
I released this application on a remote server machine with all prerequisites components installed .
But when I run the application from my browser (Chrome or Internet Explorer) on my client pc, I get following error:
"no handler for data".
What I need to the server machine for viewing data correctly (I used SQL Server 2012)?
How do I resolve this?

Thanks

By AlePM on   6/25/2013 7:44 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

@Jose Vales. I saw that error on IIS6.

If that is your deployment target you need to add the extensions .json & .resjson as MIME types application/json.

Try this:
In IIS Manager, right-click the "MachineName (local computer)" node and select "Properties". On the "Properties" tab, press the "MIME Types" button.
On the "MIME Types" dialog press "New" and add this type: Extension .json and MIME Type application/json
Again, press "New" and add another type: Extension .resjson and MIME Type application/json

Hit OK as many times as needed to close opened windows, restart IIS and that's it!

Hope it helps...

By zile on   7/4/2013 4:55 PM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

Great stuff! Keep up the good work.

I only had one issue. When VS decided to suddenly shut itself down to install updates without warning. It was very odd. It just vanished. Then when I started it again I got this message:

"visual studio was automatically closed during the install of an update"

Sometimes I find MS software totally baffling.. thankfully your tutorial made a lot more sense..

By Gus Beare on   8/20/2013 2:45 PM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

Hi Michael,

Well, I tried this tutorial with VS 2012 and the HTML client installed. I get nothing but script errors when i try to run it in the dev web server. Once I get past the errors, I have nothing displayed in the browser. It starts with win.js-1.0.min, then msls-1.0.0.min and so on and so on for about five error messages total. Almost all of them say Object doesn't support this property or method.

Using Microsoft Visual Studio Professional 2012
Version 11.0.60610.01 Update 3
Microsoft .NET Framework
Version 4.5.50709

Installed Version: Professional

LightSwitch for Visual Studio 2012 04938-004-0034007-02859
Microsoft LightSwitch for Visual Studio 2012

Any ideas?

Thanks!

By Nick Phares on   10/31/2013 2:27 PM
Gravatar

Please Help

Hello, I am trying to develop lightswitch HTML application using C#
inside it I want to call an sql query (select from table where ...) and use the result in order to do something with a custom control button

the problem lies that inside the "write code" I don't know how to call that SQL statement and use it in order to configure my own button

is there any solution

By Zaher Zohbi on   11/6/2013 4:39 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

@Zaher Zohbi - Please direct any technical questions to the official LightSwitch forums: http://social.msdn.microsoft.com/Forums/vstudio/en-US/home?forum=lightswitch

By Michael Washington on   11/6/2013 4:40 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

@Nick Phares - Please direct any technical questions to the official LightSwitch forums: http://social.msdn.microsoft.com/Forums/vstudio/en-US/home?forum=lightswitch

By Michael Washington on   10/31/2013 2:28 PM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

@nova - I just tested it and it worked for me. No matter, you can download the code from the download page.

By Michael Washington on   8/18/2013 8:22 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

@CJL - The link "An End-To-End Visual Studio LightSwitch HTML5 Application" is there on: http://lightswitchhelpwebsite.com/Downloads.aspx

By Michael Washington on   7/23/2013 3:16 PM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

@AlePM - Please direct any technical questions to the official LightSwitch forums: http://social.msdn.microsoft.com/Forums/vstudio/en-US/home?forum=lightswitch

By Michael Washington on   6/25/2013 7:45 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

@Jose Vales - The official LightSwitch forums (http://social.msdn.microsoft.com/Forums/en-US/lightswitch/threads) should be able to help you with deployment issues. The problem is not with my sample because the link in the article is to the application running on a production server.

By Michael Washington on   5/2/2013 9:55 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

@Tam Nguyen - Please direct general LightSwitch questions to the official LightSwitch forums: http://social.msdn.microsoft.com/Forums/vstudio/en-US/home?forum=lightswitch

By Michael Washington on   4/6/2014 5:45 PM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

@Darly - See sample code in: http://lightswitchhelpwebsite.com/Blog/tabid/61/EntryId/1215/LightSwitch-Employee-Vacation-Tracker-Using-The-ComponentOne-HTML-Scheduler-Control.aspx

By Michael Washington on   7/23/2014 4:11 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

@nikos - You can use afterclose to direct a person to direct a person to the add page. The only example I have that comes close is: http://lightswitchhelpwebsite.com/Blog/tabid/61/EntryId/1203/HUY-Volume-II-Visual-Studio-LightSwitch-Advanced-JavaScript-Examples.aspx

By Michael Washington on   11/19/2014 4:59 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

@Ken Draper - That was from an earlier version of the code. I fixed the article to take that out, thanks.

By Michael Washington on   4/24/2013 10:33 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

@ezazueta - See http://lightswitchhelpwebsite.com/Blog/tabid/61/EntryId/29/Easy-DotNetNuke-LightSwitch-Deployment.aspx

By Michael Washington on   4/18/2013 10:23 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

@Rick Gustafson - No it is not. See JQuery Mobile Compatibility for more information.

By Michael Washington on   4/4/2013 1:24 PM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

@cetorr - It is automatic.

By Michael Washington on   4/15/2013 8:24 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

@Richard Waddell - Thanks for the kind words :)

By Michael Washington on   4/10/2013 7:44 PM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

@Clay - Intellisense can be inconsistant.

By Michael Washington on   3/20/2013 10:49 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

@Clay Ratliff - Please download the code and see if it works for you.

By Michael Washington on   3/20/2013 6:16 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

@Jack Stephenson - Thanks for the compliments. I do not have a good example of what you are looking for. I suggest a google search because there is probably something in the official LightSwitch forums.

By Michael Washington on   3/11/2013 10:22 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

@Clay - The live sample is using the same code and it works.

By Michael Washington on   3/20/2013 7:47 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

@Ben Hayat - Thanks! Questions like that can only be answered by the LightSwitch team :)

By Michael Washington on   3/11/2013 3:49 PM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

@Lone Lone - The file you want is: VS2012.2 CTP.exe (you must do the steps here first: http://social.msdn.microsoft.com/Forums/en-US/lightswitchhtml/thread/76d8e037-3757-479d-9288-46fc90b957c5

By Michael Washington on   3/11/2013 8:09 PM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

@Steve Kehoe - I am in the process of updating the tutorial from scratch.

By Michael Washington on   3/6/2013 10:45 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

The code on the download page has been updated to CTP4

By Michael Washington on   3/9/2013 10:43 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

The tutorial has been updated to CTP4

By Michael Washington on   3/10/2013 3:16 PM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

@Luis Mariano Russo - Thank You!

By Michael Washington on   2/19/2013 8:23 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

@URVISH SUTHAR - You make an account on this site and use that user name and password.

By Michael Washington on   2/16/2013 6:02 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

@Mensah Stephen - For more information about the syntax you will want to Google linq lambda expressions. As far as the code, it simply limits the records to the ones belonging to the current user.

By Michael Washington on   2/14/2013 8:27 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

@wang - Please see the link in the article: (you must have HTML Client Preview 2 or higher installed to run the code). There is also a Preview that is not Preview 2 that will not work. Otherwise I have no idea, sorry.

By Michael Washington on   2/12/2013 5:30 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

Great article, I learned a lot.

One question: does the application detect a mobile browser? It sure looks like it (since it behaves differently). Is it a new function of Lightswitch HTML Client, or did you program it?

By cetorr on   4/15/2013 7:53 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

Is IE 10 required to run a project built with the HTML Client ?

By Rick Gustafson on   4/4/2013 12:44 PM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

I want to modify the sample so that only the administrator can browse/edit the list of products through the UI. In other words hide the BrowseProducts screen from non admins.

By Jack Stephenson on   3/11/2013 9:18 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

By the way. This demo is very well done. You should be proud.

By Jack Stephenson on   3/11/2013 9:42 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

Hi Micheal

Thanks a lot, Micheal! It is very helpful me a lot. :)

By Lone Lone on   3/11/2013 8:19 PM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

Hi

wht is the setup name of HTML Client Preview 2? is it iso files or exe files? There are too many files at microsoft website.
Plz Help me.
Thanks a lot~~~

By Lone Lone on   3/11/2013 7:19 PM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

OK, that is just weird.
After asserting that the downloaded sample code worked correctly and failing to turn up any reference to TestUser that I could find in the files the solution used, I closed the downloaded solution.

I got some work done, came back about 30 minutes and opened my solution that I was writing as I followed along the tutorial. I discovered that if I clicked the add order button, closed the dialog and clicked the add order button again, the date and user were filled out appropriately.

Clearly I am missing something to get the odd behavior and it is reproducible. If I stop the debugger and start it again, the same behavior applies. Click on the add order button once, no date, no user; close it and click on it a second time, date and user are filled out properly.

By Clay on   3/20/2013 7:41 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

Hi Michale,

When I save a new record the application navigates automatically to the previous screen (Browse data screen), so the user has to press again the add button in order to add a new record. For fast data entry (speed) purposes I need to automatically navigate to a new entry screen when a user saves a record.(loop)

Sorry I forgot to mention that I need this functionality in LS html client.

Is there any solution about this issue.

Thank you

Nikos

By nikos on   11/19/2014 4:35 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

Awesome! Michael this is an incredible intro to LightSwitch. My previous problems were because I was running it through IE 8. (Yuck!). Switched to FF and everything came up roses! Nice work.

By Nicodemus on   11/1/2013 11:40 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

FYI I needed this article to get this working: http://social.msdn.microsoft.com/Forums/vstudio/en-US/4f116cbd-4881-4c40-8a8e-eb793d105994/is-anyone-else-having-issues-enabling-money-email-phone-etc-data-types-in-lightswitch

By Robtrecht Siera on   9/20/2013 10:30 PM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

I bought your book Visual Studio Lightswitch Help Website: Creating Web Pages using the lightswitch HLTM Client in VS 2012. I cannot find the title you specified in Chapter 2 An Ent-to-End Visual Studio Lightswitch HTML5 Application in the download section as it specifies in the Book.

Curt

By CJL on   7/23/2013 2:54 PM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

Found it.
Curt

By CJL on   7/23/2013 3:15 PM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

Hi Michael

Thanks for all of the excellent lightswitch content you've created on this site.

I am unable to log in to the demo app that's listed at the top of the article

https://endtoendexample.lightswitchhelpwebsite.com/Client/default.htm

I enter my user name and password from this site, submit, and it just blinks and clears my entries.

By nova on   8/18/2013 8:04 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

Today the login went through fine.

When adding a product, the Save and Cancel icons are all but invisible, at least in ff. Everything is black except for the input fields. In IE it's presented as you intended. I wonder if this kind of issue is common with html 5...just the kind of thing I hope not to deal with.

By nova on   8/25/2013 6:07 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

Yeah, interesting, now I've seen the products list and the add product dialog go all black, with just an outline of the fields showing in grey, in firefox. And in between both screens were 'normal'.

Curious, when I have just added a new product, it appear at the top of the Browse Products list. When I return to the products list, it shows at the end of the list. Is that inconsistent behavior an out of the box LS thing? I've not checked the code but I will at some point, it's a very useful demo app...thanks,

By nova on   8/25/2013 6:16 AM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

How to get the value of Combobox after selection changes?

By Tam Nguyen on   4/6/2014 5:15 PM
Gravatar

Re: An End-To-End Visual Studio LightSwitch HTML5 Application

Hi Michale This was a good article ,I want same scenario in slot booking in a calender it need to check slot was engaged or not .Slot has
Start date and end date
if possibility for solve this issue please guide me
Thanking you,
Darly

By Darly on   7/23/2014 1:23 AM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 
Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation