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

With the release of the LightSwitch HTML Client Preview 2, I’d like to take this opportunity to showcase the simple steps to get an HTML client up and running. The holiday season is now upon us. In this tutorial, we will create a simple HTML client to display daily deals from eBay. Something like this:

Make sure you have the LightSwitch HTML Client Preview 2 installed on your machine. Ready? Let’s start!

Create a project

Launch Visual Studio 2012. Create a LightSwitch HTML Application project by going to File, New Project. You can choose a VB or C# project. Name the project DailyDeals.

Start with data

After the project is created, LightSwitch will prompt you to start with data. As you know, LightSwitch supports producing and consuming OData feeds in Visual Studio 2012. I found an eBay OData feed listed on the Open Data Protocol website that we can use in our example.

Let’s attach to the OData service. Click Attach to external Data Source.

In the Attach Data Source Wizard, select OData Service, then click Next.

Enter the URL for the eBay OData feed (http://ebayodata.cloudapp.net/). Select None for authentication (since the feed doesn’t require any authentication). Click Next.

The wizard finds all the data entities from the data service. In our example, we’re only interacting with the Deals table. Select Deals and click Finish.

Deals table now appears in the Solution Explorer. We have successfully attached to the eBay OData service.

Next, let’s create a screen for Deals. In Solution Explorer, right click on the Client node and select Add Screen.

In the Add New Screen dialog, select Browse Data Screen template. Name the screen DailyDeals. Select Deals as the screen data. Click OK.

DailyDeal screen is created and opened in Screen Designer.

Let’s see what we’ve got so far. Run the application by pressing F5. The HTML client is now running in your default browser!

We’ve got a list of daily deals from eBay. It is a good starting point, but there are some things we can make better. For example:

• The screen says Daily Deals and the list also has a Deals header. It seems redundant.
• The information in each deal doesn’t make much sense to me. What I really want is a list of product pictures and a way to drill in for more information about the deal.

Let’s see how we can go about to address these issues. Close the browser and return to the Visual Studio IDE.

Turn off list header

Since the screen title already says Daily Deals. It is redundant for the list to show a header. Select Deals in the screen content tree and uncheck Show Header in the Properties window.

Use a tile list

I’d like to present the deals as image thumbnails instead of a vertical list of text. LightSwitch provides a Tile List control just for that! In the screen content tree, select Deals and change its control from List to Tile List.

Once the Tile List is selected, the Deal node underneath it will expend to show all the fields available.

You can think of the Deal node as a tile. By default, it is a 150x150 pixel tile. You can customize the size via the Properties window. We will keep it 150x150 in our example.  

Delete every but Picture Url under Deal. Set it to use Image control. Note that the built-in Image control works with both binary data as well as an image URL. In the Properties window, set the Width and Height of the image to 150x150. The image will take up the entire tile.

Press F5 and run the application. We’ve got a list of product images! Next, let’s allow the user to find information about the deal by tapping on an image. Close the application and return to the Visual Studio IDE.

Create a detail dialog

In Screen Designer, drag Selected Item from the left pane to create a new dialog under Dialogs node.

Change the Display Name of the dialog to Daily Deal via Properties window. Also,

• Change Label Position to None, since we don’t want to show labels of the fields in the dialog.
• Check Use read-only controls, since we don’t allow users to edit the data.

In the dialog, delete everything but Picture Url, Title, and Converted Current Price.

• Use Image control for Picture Url.
• Move the Picture Url to the front.

Next, let’s make it open the dialog when the user tap on a deal in the tile list. Select the Deals node (Tile List) and find the Item Tap action in the Properties window. Click None.

Configure the tap action as follows. This indicates that we want to show the Daily Deal dialog with the Item Tap event on the list items. Click OK.

Press F5 to run the application. Tap on a deal to launch the deal dialog!

Alright, we’re getting closer! We can certainly make this dialog look a little better. For example:

• Make the picture bigger to fill up the dialog
• Add a currency symbol for the price
• Emphasis on the title and price with some formatting

Close the application and return to the Visual Studio IDE.

Customize the dialog

In the Screen Designer:

• Select Daily Deal (Dialog), set its Width to Fixed Width of 400 pixels.
• Select Picture Url, set the size to 400 x 350 via Properties window.
• Select Title, set the Font Style to Strong via Properties window.

Create a custom control

Next, let’s add a currency symbol to the Converted Current Price. Since the Text control doesn’t know that it’s a currency, we will write our own HTML to visualize the value.

Select Converted Current Price and choose Custom Control. Then, select Edit Render Code via the Properties window. This will launch the code editor.

Write the following code to visualize the price value with a currency symbol in an h1 tag.

myapp.DailyDeals.ConvertedCurrentPrice_render = function(element, contentItem) {

     var itemTemplate = $("<div></div>");

     var title = $("<h1>$" + contentItem.value + "</h1>");

     title.appendTo($(itemTemplate));

     itemTemplate.appendTo($(element));

 };

Add a button

Finally, we need to enable the user to go to the actually site to purchase the item. Let’s add a button in the dialog to do that.

Right click on the Daily Deal dialog and select Add Button.

Create a method called ViewDeal and click OK.

A button is now added inside the dialog. Double click on View Deal button to edit the method in the code editor.

Write the following code to open a browser window.

myapp.DailyDeals.ViewDeal_execute = function(screen) {

    window.open(screen.Deals.selectedItem.DealUrl, "mywindow");

 };

Press F5 to run the application. Tap a product image to see the much improved dialog!

Run the application on a device

So far we’ve been using the application in the debug mode with the default desktop browser. I encourage you to publish the application to Azure and view it on your favorite mobile devices.

That’s it for now. Happy holidays everybody!

-andy