How to create a LightSwitch Web Application


Introduction:

In this article, we will see how to create a LightSwitch Web Application, such as a LightSwitch Desktop application; we need to do some steps to set it up.

Creating LightSwitch Web Project:

Fire up the VS 2010, select the LightSwitch [No: 1] from Installed Template and Create the Project with name SampleLSWebApplication.

LightSwitch1.gif

Preparing for Web Application:

After successful creation of the LightSwitch project go to the Solution Explorer. Right click the solution and select the Properties option.

LightSwitch2.gif
 
In the properties window you have to select the Application Type [No: 1] Menu Tab. In the Application Type Menu Tab, there will be three types of LightSwitch Application types. To create the Web Application [Browser Client] we have to select the third option i.e. Browser client, 3-tier deployment [No: 2].

The LightSwitch Web application needs the IIS Server to host the application on the local machine.

Adding new Table to the Screen:

After creating the project, the first screen that appears is the DataSource selection screen.

In that screen, we have to select the Create New Table option to create the new table.

LightSwitch3.gif

The second option is for creating the application that will use the external database as DataSource.

Adding Fields to the Table:

After creating the table, we have to add the fields. The LightSwitch gives the nice GUI to create the fields required. We can set the field type and can set the Required field option by checking the Required checkbox [No: 1].

LightSwitch4.gif 

Adding Screens to the Application:

Adding screens to the application is pretty cool. Just go to the solution explorer and there you can see the Screen folder like icon. Right click the icon and choose the Add Screen option.

LightSwitch5.gif
                                       
As I said in the LightSwitch Desktop Application article, we can add the screens from a tabbed window also.

Selecting Screen Template and Assigning Screen Data:

For designing the screen, there are some screen templates available in the LightSwitch. So we can select the screen template for our application. In this sample application, we have selected New Data Screen [No: 1].

LightSwitch6.gif 

In the left side of the Design screen, we can give the name of the Screen in that first Textbox [No: 2].

The Screen Data will be the table what we have created earlier. If we have created more than one table then the screen will be created as per the selection of the Screen Data [No: 3].

Changing the Control Type for the Table Fields:

After the creation of the screen, we can change the control type for the table fields.

LightSwitch7.gif
 
As shown, the control for the ItemCode is Textbox. We can change the control as we want.

LightSwitch Web Application in Running Mode:

LightSwitch8.gif
 
If you run the LightSwitch Web Application, you will see the screen like the one above. The left side Panel is the Menu for the Application. 

To add the data you have to click on the Menu item [No: 1]. But by default one empty record will be created.

We can see that there are separate screens for each record so that we can easily navigate the records and edit the information.

Summary:

In this article, we have seen the basics of creating a LightSwitch Application. We will get deeper into the details in the future.

Thanks for spending your precious time here. Please provide your valuable feedbacks and comments, which motivate me to give a better article next time. 


Similar Articles