LightSwitch Help Website > Blog - Writing JavaScript In LightSwitch HTML Client Preview

** THIS SITE IS AN ARCHIVE ** - New Content is at:

Keywords

Phrase

Writing JavaScript In LightSwitch HTML Client Preview

Nov 29

Written by: Michael Washington
11/29/2012 4:05 PM

When you are creating HTML 5 pages using the LightSwitch HTML Client Preview 2, you will realize that to get it to do exactly what you desire, you will need to write some custom JavaScript. At the time of this writing the LightSwitch release that creates HTML 5 pages is still in beta so there is not a lot of documentation.

Basically the LightSwitch HTML Client references some JavaScript libraries (JQuery Mobile, WinJS Promise, DataJS, ect) and creates custom JavaScript code (for example classes to communicate with your tables). It communicates with the LightSwitch back-end using OData.

The Sample Application

We will start with a simple application used in Creating JavaScript Using TypeScript in Visual Studio LightSwitch.

This application contains one simple table.

It is a complete application that allows inserts, edits, and deletes with full validation and security.

It takes less than two minutes to create from scratch.

The JavaScript That Is Deployed

To see the application that LightSwitch creates, we need to first publish the application.

clip_image001

When we look in the Client/Scripts directory, we see the referenced JavaScript libraries (JQuery Mobile, WinJS Promise, DataJS, ect). When you create custom code you will usually call JavaScript methods contained in this code. In a later section we will show how you can locate documentation on what methods are available.

When we look in the Client/Scripts/Generated directory we see custom JavaScript that LightSwitch creates based on what we have created using the LightSwitch designer in Visual Studio.

For example, the Data.js file contains a class that will be used to represent the Person entity type that we created. The viewModel.js file contains a function called BrowsePeople that invokes the WinJS Promise code. The functionality is similar to the example in the article: A Full CRUD DataJs and KnockoutJs LightSwitch Example Using Only An .Html Page but LightSwitch is creating all that complex code for you (in fact that article also uses DataJs but it uses KockoutJs for the View Model).

When we look in the Client/UserCode directory we see the custom JavaScript code we created in the LightSwitch code designer (see: Creating JavaScript Using TypeScript in Visual Studio LightSwitch for a walk-thru of that process).

The JavaScript Documentation

To see the documentation for the JavaScript libraries that LightSwitch uses, we return to Visual Studio and switch to File View.

We also want to click on the Client project in the Solution Explorer then click Show All Files.

The files with intellisense or vsdoc in their names contain the most complete documentation you will find for now. The majority of the documentation that you will be interested in, is in the msls-1.0.0.-vsdoc.js file.

The comments in green is the documentation.

This is the documentation that shows up as the intellisense in the code editing windows.

Start Here

The most up to date article regarding JavaScript and LightSwitch is:

New LightSwitch HTML Client APIs (Stephen Provine)

You will want to start there. Next, you will want to read every blog post in the LightSwitch HTML Client Forum that contains a code sample by a LightSwitch team member.