Visual Studio 2012 LightSwitch - Getting Started with Building Business Applications

Posted by: Pravinkumar Dabade , on 2/10/2013, in Category Visual Studio
Views: 27973
Abstract: In this article, we will create a Visual Studio 2012 LightSwitch application which fetches data from SQL Server database. We will also see how to Sort the data as well as Filter the data by adding the Parameters

I plan to start a series of article on Visual Studio 2012 LightSwitch. In the first part of this series, we will build an application using “Visual Studio 2012 LightSwitch HTML application” which will display data from the SQL Server database. We will also see how to “Sort” and “Filter” the data by adding parameters. For this demonstration, I am using Windows 7 and Visual Studio 2012.

 

Visual Studio LightSwitch is used for building Business Applications for Desktop and the cloud. LightSwitch HTML Application can also be used for building applications for Mobile.

 

 

To create a LightSwitch application in Visual Studio 2012, open Visual Studio and click on New Project and create a project with the name “NorthwindBusinessApplication” as shown below –

create-lightswitch-proj

Once your project is ready, you can start with “Start with data” option as shown below –

startdata

The “Start with data” has two options –

1. Create new table – by using this option, we can create our own tables with our own structures.

2. Attach to external Data Source – by using this option, we can connect to external Data Sources like –

  • a. Database – using this external data source, we can connect to SQL Server database and fetch the Tables or Views.
  • b. SharePoint – using this external data source, we can connect to SharePoint site and fetch the lists data in our project.
  • c. OData [Open Data Protocol] – using this external data source, we can connect to existing OData services to fetch the data into our project.
  • d. WCF RIA Service – using this external data source, we can fetch the data using WCF Services in our project.

Click on “Attach to external Data Source”. It will show the attach data source wizard as shown below –

dswizard.

Choose “Database” and click on the “Next” button. Specify the SQL Server name, choose the authentication and then select “Northwind” database as shown below –

sqlconn

Once your connection is successful, it will show you the “Tables” and “Views” from the Northwind database. Choose “Customers”, “Orders” table from “Tables” section and click on “Finish” button.

Now in the “NorthwindBusinessApplication Designer” window, it will show you “Customers” with its properties. It also shows you the relationship with “Orders” as shown below –

customerpropertywin.

You can change the type of properties as per your business needs. For example, change the Phone type to Phone Number as shown below –

changetype

Now let’s take a closer look in our solution explorer. If you check, in our Project, we have two sections. First is “Server” and second is “Client”. If you expand the “Server” folder, you will see our Tables under NorthwindData. The “Client” folder will have our Screens on which we will display our data.

Right click the “Client” folder and click on “Add Screen” as shown below –

addscreen

You will now see the “Screen Template Window”. Here we can choose the template to display our data, name the screen and choose the data for the screen as shown below –

choosetemp

Click on the OK button. You will see “Customer Screen” with layout option and a Query Designer as shown below –

customerscreen

Run your project with the default options of the screen. You will see the following output in your browser –

output1

You can change the display of this Customer Screen from List to Tile list as shown below –

changelauout

Run your project again and observe the Tile List output as shown below –

output2

Let’s change the Layout of the Customer Screen. You have multiple choices to display the layout of the screen, as shown below –

layout

Try all the different layouts by running your project.

Edit Query Option

Now let’s take a look at the “Edit Query” option. On the left hand side section, you will find the “Customer” Edit Query option. Click on Edit Query as shown below –

queryeditoption

Under Edit Query option, you will find three different options as described –

1. Filter – In this filter section, you can add a Single or Group Filter.

2. Sort – You can add Sorting expression while displaying the data.

3. Parameter – You can add the Parameter(s), which can be mapped to your filters as per your business need.

For this demonstration, we will do the sorting of our “Customer” data by ContactName property. In the “Edit Query” window, click on “Add Sort” and set the “Sort by” expression to “ContactName” from the drop down list. Keep the sorting direction “Ascending” which is default as shown below –

addsort

Run your project and now you will see the Customers sorted with ContactName ascending order. After sorting the data, now let’s add a Filter and Parameter to our query.

To add the “Parameter” and “Filter”, let’s click on “Edit Query” from the designer window located at the left hand side. Click on “Add Parameter”. Name the parameter as “City” and set its Type to String as shown below –

addpara

Let’s add a “Filter”. Click on “Add Filter” drop box and click on “Single” from the “Filter” section. Choose the “Where” condition and  a “City” property. Operator should be “=”. The Filter value should be taken from parameter and set the name of the Parameter “City” as shown below –

filter

Now go back to main design window. On the left hand side, you will see “Query Parameters” with the City parameter. Drag and drop “City” Parameter under “Rows Layout” as shown below –

mapparameter

Now let’s run the project. Your will see a “Textbox” where we can add our “City” to filter the data. Write “London” city and press Tab Key. This brings up all the customers from “London” city as shown below –

output3

That's it for now. In the next part, we will see how to create connected screens and add a dialog box in our application.

Conclusion

In this article, we have created a Visual Studio 2012 LightSwitch application which fetches the data from SQL Server database. We have also seen how to Sort the data as well as Filter the data by adding the Parameters.

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Pravinkumar, works as a freelance trainer and consultant on Microsoft Technologies. He is having over 10 years of experience in IT and is also a Microsoft Certified Trainer(MCT). He has conducted various corporate trainings on all versions of .NET Technologies including .NET, SharePoint Server, Microsoft SQL Server, Silverlight, ASP.NET, Microsoft PerformancePoint Server 2007 (Monitoring). He is passionate about learning new technologies from Microsoft. You can contact Pravinkumar at dabade[dot]pravinkumar [attherate] gmail[dot]com


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by Priyanka Kapoor on Wednesday, February 27, 2013 12:18 AM
Really good and very helpful also.
Comment posted by Pravinkumar R. D. on Wednesday, February 27, 2013 5:59 AM
Thank you Priyanka Kapoor !!
Comment posted by Aruna on Tuesday, July 8, 2014 3:09 AM
Is there any way to consume existing WCF or Web service in lightswitch as a datasource?

Categories

JOIN OUR COMMUNITY

POPULAR ARTICLES

FREE .NET MAGAZINES

Free DNC .NET Magazine

Tags

JQUERY COOKBOOK

jQuery CookBook