Walkthrough: Using LightSwitch Data in a Windows Store App

Article
03/27/2017

For the latest documentation on Visual Studio 2017, see Visual Studio 2017 Documentation.

By following this walkthrough, you can learn how to create or configure a Windows 8.x Store app or other application that supports the Open Data Protocol (OData) to consume data from any LightSwitch application.

Prerequisites

To complete this walkthrough, you must be running Visual Studio 2012 on Windows 8. You’ll also need to download the Contoso Construction application from the MSDN Samples Gallery on the Microsoft website and follow the setup instructions in the readme.txt file. If you’ve never created a Windows 8.x Store app before, you’ll be prompted to acquire a developer license when you create the project for the Windows 8.x Store app.

To expose an OData data source

On the menu bar, choose File, Open, Project/Location.
In the Open Project dialog box, browse to the ContosoConstruction.sln file, and then open it.
In Solution Explorer, open the shortcut menu for Properties, and then choose Open.
In the Application Designer, choose the Edit DesktopClient properties link.
In the Desktop Client designer, choose the Client Type tab.
In the Client section, choose the Web option button.

This procedure exposes both of the data sources for the Contoso Construction application as OData feeds.

To create the Windows Store app

On the menu bar, choose File, Add, New Project.
In the list of project types for JavaScript, choose Split Application.
In the Name text box, specify ContosoProjects, and then choose the OK button.

The ContosoConstruction project is added to the solution.

To add script libraries

On the menu bar, choose Tools, Library Package Manager, Package Manager Console.

The Package Manager Console window opens.
At the Package Manager Console command prompt, enter install-package jquery, and then choose the Enter key.
After the command completes, enter install-package datajs, and then choose the Enter key.

After the command completes, the following JavaScript files appear in the Scripts folder in Solution Explorer:
- datajs-1.0.2.js
- datajs-1.0.2.min.js
- jquery-1.7.1.js
- jquery-1.7.1.min.js
- jquery-1.7.1.-vsdoc.js

To modify the Windows Store app

In Solution Explorer, open the default.html file.

Under the WinJS references section, add the following references:

<!-- jQuery references -->   
  <script src="/Scripts/jquery-1.7.1.js"></script>   
  <!-- datajs references -->   
  <script src="/Scripts/datajs-1.0.2.js"></script>

In Solution Explorer, expand the js node, and then open the default.js file.
Under the var app = WinJS.Application; line, add the following variable:
```
var OData = window.OData;  
```
In Solution Explorer, open the data.js file.

Replace the code in the sampleGroups section with the following code:

var sampleGroups = [   
        {  
            key: "allProjects", title: "All Projects", subtitle: "All Contoso projects.",  
            backgroundImage: darkGray  
        },  
    ];

Locate the function after the comment // TODO: Replace the data with your real data., and replace the existing code with the following code:

//Generic function for loading data via a odata url  
    function loadData(data, odataUrl, dataLoaded) {  
        if (data) {  
            return WinJS.Promise.as(data);  
        }  
        else {  
            return new WinJS.Promise(function (complete, error, progress) {  
                OData.read(odataUrl,  
                function (data) {  
                    complete(dataLoaded(data.results));  
                },  
                function (dataerror) {  
                    error(dataerror);  
                });  
            });  
        }  
    }  

    var projectsODataUrl = "https://localhost:#####/ApplicationData.svc/Projects";  
    //TODO: Replace projectsODataUrl with url for deployed OData service  
    //  before publishing this application.  
    var _projects;  
    //Loads projects  
    function loadProjects() {  
        loadData(_projects, projectsODataUrl, function (results) {  
            _projects = results;  
            return _projects;  
        }).then(function (projects) {  
            var items = [];  

            $.each(projects, function (l, e) {  
                var notes;  
                if (e.Notes === null) {  
                    notes = "";  
                }  
                else {  
                    notes = e.Notes;  
                }  
                items.push({  
                    displayName: e.ProjectName, subtitle: "Estimate: $" +  
                        e.OriginalEstimate, description: "", content: notes  
                });  
            });  
            showProjects(items.sort(), sampleGroups[0]);  
        });  
    }  

    //Adds projects to binding list.  
    function showProjects(items, itemGroup) {  
        items.forEach(function (item) {  
            list.push(  
                {  
                    group: itemGroup, title: item.displayName,  
                    subtitle: item.subtitle, description: item.description,  
                    content: item.content, backgroundImage: lightGray  
                }  
              )  
        });  
    }  

    loadProjects();

To specify capabilities for the Windows Store app

In Solution Explorer, open the package.appxmanifest file.
On the Capabilities tab, select the Private Networks (Client and Server) check box.

This procedure enables an enterprise app to access Intranet resources. This setting isn’t necessary for typical Windows 8.x Store apps from the Windows Store.

To debug and test the application

In Solution Explorer, open the shortcut menu for the Solution node, and then choose Properties.
Choose the Multiple startup projects option button.
In the Action column, choose Start for both the ContosoConstruction and ContosoProjects projects.

Important

Make sure that ContosoContruction is listed before ContosoProjects in the startup order.
In Solution Explorer, open the data.js file.
In the line that starts return new WinJS.Promise, set a breakpoint.
Choose the F5 key to start debugging.

The application will start to load and then stop running when the breakpoint is reached.
In the browser window where the Contoso Construction application is running, copy the port number from the Address Bar.

The port number is the numeric value that follows https://localhost: in the URL.
In the Immediate window, enter odataUrl = https://localhost:#####/ApplicationData.svc/Projects, substituting the port number for #####, and then choose the Enter key.
Choose the F5 key to resume loading the Contoso Projects app.

The Contoso Projects app appears.
Choose the All Projects button to display a list of projects from the Contoso Construction application.

Next Steps

When you are ready to deploy the app, you must publish each project independently. First, you publish the LightSwitch application to your production server. After the LightSwitch application is deployed and you know the OData service URL for the production server, you update the port number in the data.js file for the Windows 8.x Store app before you then deploy it.