ARTICLE

How to create a LightSwitch Web Application

Posted by Jaganathan Bantheswaran Articles | LightSwitch 2012 February 15, 2011
How to create a LightSwitch Web Application, including some steps to set it up
Reader Level:
Download Files:
 

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. 

Login to add your contents and source code to this article
post comment
     

Yes Sean Wong... But due to work i cant contribute.. i will get back soon...

Posted by Jaganathan Bantheswaran Jun 27, 2012

Dear Sir, I just want to tell you that you are doing a great works, please keep going!

Posted by Sean Wong May 25, 2012

Hi all, Thank you...

Posted by Jaganathan Bantheswaran Jul 13, 2011

great article to start light switch.

Posted by Chirag Solanki Jul 12, 2011

Good work. keep it up

Posted by Rohatash Kumar Feb 16, 2011
COMMENT USING
PREMIUM SPONSORS
DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and add new content to existing PDF documents from within your applications.
SPONSORED BY
  • PDF reports have never been easier to create. With our included WYSIWYG Designer, you can layout your reports, set up your data source and let DynamicPDF ReportWriter do the rest.
Join a Chapter