You are here:   Blog
Register   |  Login

 

Mar 18

Written by: Michael Washington
3/18/2014 4:43 AM  RssIcon

image

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

NOTE: You can see an article on creating a report for this application at: Creating A LightSwitch HTML Report Using ActiveReports (using Parameters and Intrinsic Data)

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. Also, you must have Visual Studio 2013 (or higher) and the Office Developer Tools for Visual Studio 2013 – March 2014 Update (or higher) installed.

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 
  • 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
  • Features
    • Display the number of orders for a User
    • Display the number of order details for an order

 

image

The application allows you to create a list of Products.

image

 Products can be edited.

image

Orders can be created.

image

An Order consists of multiple Order Details.

image

An Order Detail consists of a Product, selected from the list of available Products and a quantity.

Creating The Application

image

Open Visual Studio and select File, then New Project.

image

Create a new LightSwitch HTML Application.

image

The application will be created.

image

The application will display in the Solution Explorer.

image

Right-Click on the Data Sources folder in the Server project 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 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.Name);
        }

All data that accesses 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 so that the UserName cannot be set improperly.

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<Order> query)
        {
            // Only show the Orders for the current user
            query = query.Where(x => x.UserName == this.Application.User.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 Common Screen Set using the Products table.

image

The screens will be created.

image

Hit F5 to run the application.

Note: You will be automatically logged in as TestUser when debugging.

image

Click the Add button to add a Product.

image

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

image

The Product will show in a list.

Click on the Product to display it in the view detail screen.

image

Click the Edit button to edit the record.

Click the web browser back button to return to the previous page.

Create The Main Page

image

We will now create the Main screen.

Right-click on the Screens folder and select Add Screen…

image

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

image

The first thing we want to do is open a new screen when the user clicks on a Order in the list.

Click on the the Tile List control, and select the Item Tap action in the Properties for the control.

image

When the Edit ItemTap Action dialog opens,  connect the screen to a new Edit screen.

Select Choose an existing method.

Select Orders.editSelected.

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

On the Main page, we need to add a button to create a new Order.

Open the Command Bar on the Main page and click the add button to create a link to the AddEditOrder page (in the Add mode).

image

Right-click on the Main screen and select Set as Home Screen, so that it will be the first screen that comes up when we run the application.

Looking At The Application So Far…

image

Run the application.

image

We see that we can navigate to the Products page using the dropdown.

image

When we click the Add Order button to open the the Add Edit Order dialog, the User Name is not filled in for us (also it should be read only).

The Order Date should also be set to the current date as its default value.

image

When we switch to the Order Details tab, we do not have a button to add an Order Detail.

Close the web browser and return to Visual Studio.

Create The Order Detail Edit Screen

image

To allow us to create and edit a Order Detail record, open the AddEditOrder screen and under Order Details (Tab), select Add under the Command Bar.

Select the addAndEditNew method of the OrderDetails collection and (New Screen) for Navigate To.

image

When the Add New Screen dialog shows, select OrderDetail Details as Additional Data to Include.

image

When the AddEditOrderDetail screen opens, right-click on the Rows Layout that contains 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.

image

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

Return to the AddEditOrder screen.

Click on the OrderDetails Tile List, and in the Properties, select the Item Tap event.

In the Edit ItemTap Action dialog, select OrderDetails.editSelected and Navigate To: Add Edit Order Detail (the screen you created in the previous step).

image

When we run the application, we now have a button to Add Order Detail.

image

We can click on the plus in a circle icon in the Product box to see a list so we can select a Product.

image

However, when we create a Order Detail, we see that the display can be improved.

Close the web browser and return to Visual Studio.

Formatting Order Details

image

We return to the Add Edit Order screen and change the Order Details Tile List control to a List.

image

Next, we change the Rows Layout control under the List control to a Custom Control.

image

In the Properties for the Custom Control we select Edit Render Code.

We use the following code:

    // 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: this codes uses Promises, 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.

 

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

Right-click on the Server project and select Add then New Folder.

Create a folder named Web.

image

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

image

Create a new Generic Handler named GetUserName.ashx.

(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

Open the Order table, select the HTML 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

Lastly, we open the AddEditOrder screen and change the User Name control from a Text Box to a Text label.

image

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

You will now be able to create and save records.

Calling A Custom Query

Next, we will call the query we created earlier so that we can display the number of Orders for the current user.

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.

Calling A Custom JavaScript Query

image

Now, we desire to show the number of associated Order Details when displaying an Order on the main page.

First, we open the Main page and delete the User Name and Created By fields in the Tile List.

image

Add the Id field to the list.

image

Change the control to a Custom Control.

Use the following code for the Render method of the control:

 

    // Get the current OrderId
    var OrderId = contentItem.value;
    var Int32 = ':Int32';
    // Get all the OrderDetails associated with the current Order
    var filter = '(Order/Id eq ' + msls._toODataString(OrderId, Int32) + ')';
    msls.showProgress(myapp.activeDataWorkspace.ApplicationData.OrderDetails
    .filter(filter)
    .execute()
    .then(function (result) {
        // Loop through each record in the result
        var index = 0;
        var Entities = result.results;
        Entities.forEach(function (entity) {
            // Count the Order Details
            index = index + 1;
        })
        // Set the final output
        var NumberOfOrderDetails = $('<label class=msls-label-text> Number of Order Details: ' + index + '</label>');
        NumberOfOrderDetails.appendTo($(element));
    }))

 

image

When we run the application, we see the number of Order Detail records for the Order.

However, we now notice that the totals on the Main page do not show the correct amounts until the page is refreshed. We can automatically refresh the page…

Automatically Refreshing the Page By Using A Custom Button

image

We can create a custom button by selecting the Item Tap event for the Tile List on the Main Page and selecting Write my own method.

image

The method will show up in the View Model on the left side of the screen designer.

Right-click on it and select Edit Execute Code.

Use the following code for the method:

 

    myapp.showAddEditOrder(null, {
        beforeShown: function (addEditOrderScreen) {
            // Set the Order on the AddEditOrder screen
            // to the selected Order on the Main screen
            addEditOrderScreen.Order = screen.Orders.selectedItem;
        },
        afterClosed: function (addEditScreen, navigationAction) {
            // If the user commits the change,
            // update the selected order on the Main screen
            if (navigationAction === msls.NavigateBackAction.commit) {
                // *****************************************
                // Reload the Orders
                screen.Orders.load();
            }
        }
    });

 

image

After editing a record, the totals are automatically updated.

Deleting Records

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 editing an Order Detail the Delete button will now show.

image

You will have to click the Save button on the Add Edit Order page to commit the change.

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) {
        msls.showMessageBox(e.message, {
            title: "Error",
            buttons: msls.MessageBoxButtons.ok
        }).then(function (result) {
            if (result === msls.MessageBoxResult.ok) {
                // Discard Changes
                screen.details.dataWorkspace.ApplicationData
                    .details.discardChanges();
            }
        });
    });
};

 

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.

 

LightSwitch Help Website Articles

 

LightSwitch Team HTML and JavaScript Articles

 

Download Code

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

(you must have Visual Studio 2013 (or higher) and the Office Developer Tools for Visual Studio 2013 – March 2014 Update (or higher) installed to run the code)

23 comment(s) so far...


Gravatar

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

Hello everyone:

Is it possible to create an approval form on LightSwicth, such as:

Design: http://www.it-bi.com/shared/1.PNG
Production: http://www.it-bi.com/shared/2.PNG
I made it on InfoPath + Sharepoint workflow. It works fine, but we need a SharePoint Enterprise license.
All I've seen on LightSwitch so far is not suitable.
Further question: how to upload an attachment file to SharePoint list?

Thanks

By Sergey Zhukov on   4/2/2014 3:08 AM
Gravatar

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

@Sergey Zhukov - In my opinion LightSwitch can do it. You can get answers to your other questions in the LightSwitch Forums: http://social.msdn.microsoft.com/Forums/vstudio/en-US/home?forum=lightswitch

By Michael Washington on   4/2/2014 3:49 AM
Gravatar

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

Thanks!

By Sergey Zhukov on   4/4/2014 2:28 AM
Gravatar

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

Thanks Michael. good tutorial

have two issues:

1. No drop down next to "Main" on main screen
2. code to update order detail count doesn't work. Get error loading project

By Mark Anderson on   4/12/2014 10:09 AM
Gravatar

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

@Mark Anderson - If you mean the download available on this site, I recently tested it and did not get any errors.

By Michael Washington on   4/12/2014 11:30 AM
Gravatar

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

Great introduction, Michael, to using LightSwitch. I learned a lot.

By Johnathan Lightfoot on   5/24/2014 11:03 AM
Gravatar

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

Hi Michael

Thank you for sharing this, a great place to start learning HTML5/ LightSwitch. I am not a very experienced experienced programmer and work in application support/installation. LightSwitch to be suitable for my skill level, which I want to enhance by learning to program

Please assist with this: Is it possible to write a complete LOB application using HTML5 client, is it recommended ? I will use the application in both client server and web/cloud

Thank you
Bhuven

By Bhuven on   5/29/2014 10:41 PM
Gravatar

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

@WBhuven - I have created many HTML5 LOB applications and posted them to the Downloads page on this site.

By Michael Washington on   5/30/2014 3:59 AM
Gravatar

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

Thank you MIchael

By Bhuven on   6/2/2014 9:35 AM
Gravatar

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

Hi Michael

Thanks for your responses and the opportunity to learn. I am starting to develop a package that requires the use of grids and this limiting when using HTML5. Can I setup a solution both client for backend and HTML5 for mobile apps in the same solution.

Thank you Michael, much appreciated

By Bhuven on   6/9/2014 7:57 AM
Gravatar

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

@WBhuven - Yes, but I have no examples, sorry.

By Michael Washington on   6/9/2014 8:35 AM
Gravatar

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

Thanks Michael, this helps me greatly,

By Bhuven on   6/9/2014 9:02 AM
Gravatar

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

How do I troubleshoot LightSwitch? Debug breakpoints???

The "Add Order Details" button does not show up. Can't post any screen shots in this editor.

By Andy on   6/26/2014 5:17 PM
Gravatar

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

@Andy - Download the code sample on the download page and compare the code to your own.

By Michael Washington on   6/26/2014 5:28 PM
Gravatar

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

i have error:-

Unsupported
This version of Visual Studio is unable to open the following projects. The project types may not be installed or this version of Visual Studio may not support them.
For more information on enabling these project types or otherwise migrating your assets, please see the details in the "Migration Report" displayed after clicking OK.
- EndToEndExample, "E:\2\EndToEndExample_2013\EndToEndExample\EndToEndExample.lsxtproj"
- EndToEndExample.Server, "E:\2\EndToEndExample_2013\EndToEndExample\EndToEndExample.Server\EndToEndExample.Server.csproj"


No changes required
These projects can be opened in Visual Studio 2013, Visual Studio 2012, and Visual Studio 2010 SP1 without changing them.
- EndToEndExample.HTMLClient, "E:\2\EndToEndExample_2013\EndToEndExample\EndToEndExample.HTMLClient\EndToEndExample.HTMLClient.jsproj"
- EndToEndExample, "E:\2\EndToEndExample_2013\EndToEndExample.sln"

By LAHIRU on   7/3/2014 12:26 AM
Gravatar

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

@LAHIRU - You do not have the correct version of Visual Studio with the latest updates and service packs.

By Michael Washington on   7/3/2014 4:35 AM
Gravatar

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

hi all - I am designing a catalog to the company I work. We have/hold thousands of HW and SW part numbers. I was designing the catalog to work as a water-fall in few degrees of cascades. And also I designed few water-fall in parallel. The result is always "one" correct solution in HW, another SW solution. more solutions in Services. Chips, servers, etc. I was thinking if it's possible to use the great end-to-end apps above and create a "list" of all the unique part-numbers (several + quantities) into a single list? Like a "grocery list" as we say here. I need your tip please - is it doable to a aggregate from few sources (few UI screens) into a single list(one UI)? I work and design in HTML only of course. Please assist...Yuval

By Yuval on   7/4/2014 7:54 AM
Gravatar

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

@Yuval - You will want to look at WCF RIA Services.

By Michael Washington on   7/4/2014 8:39 AM
Gravatar

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

Hi !
If you try to reproduce this exemple using VB.NET, when you create the 'GetUserName' class with Generic Handler template, don't use any namespace.
In my case, if I use namespace, the app crash!

By Ciro on   8/13/2014 4:09 AM
Gravatar

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

Hi Michael,
Thank you for a great tutorial. I have followed it in your book rather than this blog and if functions as expected when run under Visual Studio. I published it to Windows Azure which appeared to go fine. Unfortunately when I try to run it @ doctourend2end.azurewebsites.net I get an HTTP 403 error message saying “The website declined to show this webpage.” Could you please direct me to a source of help as I cannot see how valid users are setup.

By MisterB on   8/18/2014 11:33 PM
Gravatar

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

@MisterB - In the book I show how you can deploy the application to SharePoint and SharePoint has user management built-in. If you only want to use LightSwitch you can add a Desktop Client to the project that will provide user management, or you can use this code: Allowing Users To Self Register In Your LightSwitch Website http://lightswitchhelpwebsite.com/Blog/tabid/61/EntryId/166/Allowing-Users-To-Self-Register-In-Your-LightSwitch-Website.aspx

By Michael Washington on   8/19/2014 3:50 AM
Gravatar

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

Hi Micheal
Thank you for a speedy and full answer.

Brian

By MisterB on   8/21/2014 5:35 AM
Gravatar

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

VB.Net GenericHandler Template issue: for me it only worked when I removed LightSwitchApplication.Web Namespace.
Here is my fixed code:

Imports System.Web
Imports System.Web.Services

'Namespace LightSwitchApplication.Web

Public Class GetUserName
Implements System.Web.IHttpHandler

Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest

Using serverContext As ServerApplicationContext = ServerApplicationContext.CreateContext()
context.Response.ContentType = "text/plain"
context.Response.Write(serverContext.Application.User.Name)
End Using

End Sub

ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
Get
Return False
End Get
End Property

End Class

'End Namespace

Best regards,

By Ciro on   9/11/2014 4:28 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