LightSwitch Tutorial – Creating a Basic Application

1. Right-click on Screens in the Visual Studio Solution Explorer and then select Add Screen…  You will then be shown the below screen which lists out the current screen templates available for creating user interfaces in LightSwitch:
   
2. Select Editable Grid Screen from the Listing, enter ?EditableCustomerGrid as the Screen Name  (note that you cannot use spaces for the Screen Name) and select Customers for the Screen Data as shown below and then click OK and the screen should be immediately visible user the Screens folder in the Solution Explorer. Note that for a real-world app we would probably be creating several screens for the app such as a dedicated New Data Screen for inputing data, a Search Screen for performing searches and a Details Screen to display the data.
   
3. The Properties window should be automatically open, but if not just double-click the EditableCustomerGrid icon in the Solution Explorer. The full listing of screen properties should be visible as shown below:
4. Change the Display Name from EditableCustomerGrid to Customers (this is the name of the screen that will be shown to the end-user). Then Save the changes.

That’s all that is required to create a very simple LightSwitch app.

Testing and Running the LightSwitch Application From Visual Studio

1. Once the application has been created and saved  hit F5 to run it. The application’s main window (see below)is partitioned into three main areas:
   Ribbon: This area at the top of the screen gives quick access to common tasks which are performed in the LightSwitch application. The default tasks in the Ribbon are saving the current changes and refreshing the data source.
   • Navigation Pane: On the left of the screen the Navigate Pane lists  the apps screens.
   • Main Pane: The main active working screen. To change screens click another screen from the Navigation View.

     

2. Using the grid you can enter customer data. Note that on data types such as Email and Phone Number, the validation is built in.
   
3. Once you have entered the data, click Save on the Ribbon and the data will be saved to the database.
   

Publish and Deploy a LightSwitch Application From Visual Studio

The deployment process for a LightSwitch application differs depending on the application type which has been selected for the application. The application can be set from by double-clicking Properties in the Solution Explorer and selecting the Application Type tab.  There are three  application types – Desktop 2 Tier which creates as a simple WPF desktop app, Desktop 3 Tier which creates a WCF app and uses IIS to connect to the data source and Browser Client 3 Tier which creates a browser based Silverlight app:

In this simple demo we are will leave the default, Desktop client 2 tier deployment.

To start the publication process, right-click the main application icon (in this case lightswitchdemo) and select Publish… , the Publish Application Wizard will then be launched:

The first step is to specific the location on the machine to place the application files on the Specify Publishing Preference page. On this page you also need to specify how to create the database, you can either be published directly to an existing database or create a script which can then be executed to create the database manually.

Next, in the Database Configuration specify the connection string for the database (note that the options would be different if you elected to create a database script).

Next, in the Prerequisites you can specify which additional components  to install for running the application.

Finally, you are will be able to specify any additional settings such as connections to reporting servers.

That’s it! This is a very simple application without many of the features required for actual business apps. In later tutorials we will dive deeper into features of LightSwitch.