(X) Hide this
    • Login
    • Join
      • Say No Bots Generate New Image
        By clicking 'Register' you accept the terms of use .

Beginners Guide to Visual Studio LightSwitch (Part - 1) – Working with New Data Entry Screen

(26 votes)
Kunal Chowdhury
>
Kunal Chowdhury
Joined Mar 28, 2010
Articles:   7
Comments:   14
More Articles
17 comments   /   posted on Oct 25, 2010
Categories:   LightSwitch

This article is Part 1 of the series “Beginners Guide to Visual Studio LightSwitch”.

Visual Studio LightSwitch is a new tool for building data-driven Silverlight Application using Visual Studio IDE. It automatically generates the User Interface for a DataSource without writing any code. You can write a small amount of code also to meet your requirement.

Recently, I got some time to explore Visual Studio LightSwitch. I created a small DB application with proper data inserting UI within a small amount of time (without any XAML or C# code).

Here in this article, I will guide you to understand it with the help of a small application. There will be a series of articles on this topic regularly. Read the complete article to learn about creating a Silverlight data driven application with the help of Visual Studio LightSwitch. 

Setting up LightSwitch Environment

Microsoft Visual Studio LightSwitch Beta 1 is a flexible, business application development tool that allows developers of all skill levels to quickly build and deploy professional-quality desktop and Web business applications. To start with LightSwitch application development, you need to install the Visual Studio LightSwitch in your development machine. To do so, follow the below steps:
  • Install Visual Studio 2010
  • Install Visual Studio LightSwitch



The LightSwitch installation will install all other components to your PC one by one including SQL Express, Silverlight 4, LightSwitch Beta server etc.

You can download the LightSwitch Beta 1 from here: Microsoft Download Center (Visual Studio LightSwitch Beta 1)


Creating a LightSwitch Project

Once you installed Visual Studio LightSwitch, Run the Product to create a new project. Go to File –> New –> Project or press Ctrl + Shift + N to open the “New Project”. From the left panel, select “LightSwitch”. In the right pane, it will filter the LightSwitch project templates. This will include of type VB & C#. Select your respective type. Here I will use the C# version.

image

In the above dialog Window, enter the name of the project, select proper location for the project to create and hit “Ok”. This will create the blank LightSwitch project for you by the Visual Studio 2010 IDE. It will take some time for the project creation. So, be patient.


Create a Database Table

After the project has been created by the IDE, it will open up the following screen:

image

You can see that, it has two options in the UI. You can create a new table for your application. Also, you can attach an external database. If you open the Solution Explorer, you will see that, the project is totally empty. It has only two folders named “Data Sources” and “Screens”.

“Data Sources” stores your application data i.e. Database Tables. On the other side, the “Screens” folder stores the UI screens created by you. I will describe them later in this tutorial.

Let’s create a new Table for our application. Click on the “Create new table” to continue. This will bring up the following screen in your desktop:

image

In the above page, you can design your Table structure as you do in the SQL server while creating a new table. Each table will have a “Id” assigned to the table of type “Int32” & it is a Primary Key to the table. Add some additional columns to the table.

image

In the above snapshot, you can see that, there are several column types (data types) available in LightSwitch application. For our sample application, we will create 4 additional columns called “FirstName (String)”, “LastName (String)”, “Age (Int16)” and “Marks (Decimal)”. Change the title of the table from “Table1Item” to “StudentTable”. This name will be used while saving the table. Save the table now. If you want to change the name of the table later, just rename the table header and save it. This will automatically update the table name.

image

Be sure to set all the fields as “Required” field. This will be helpful validating the data. I will show it to you later.


Create a Data Entry Screen

Once you are done with structuring your database table columns, you will need to create a UI screen for your application to insert records. Click on the “Screen…” button from the top panel as shown in the below snapshot:

image

This will open the “Add New Screen” dialog window to the screen. Select “New Data Screen” from the Screen Template, provide a Screen Name in the right panel & chose the database table as Screen Data from the dropdown.

image

Click “Ok” to continue. This will create a new UI screen for your application to insert new data record by end user. Now, in the solution explorer you can see that, the “Data Sources” folder has one database named “ApplicationData” and it has a table called “StudentTables”. In the “Screens” folder you can find the recently created data entry screen named “CreateNewStudentTable”.

You can change the design of the UI from the below screen:

image

You can add or delete new field or controls. You can also rearrange the controls in the UI. For our first sample application, we will go with the default layout controls.


See the Application in Action

Woo!!! Our application is ready. We will able to insert new records in our database table from our application. No need to write a single line of code. What? You are not agreeing with me! Let’s run the application by pressing F5. This will build your solution. It will take some time to compile the solution. Once it builds successfully, it will open the following UI in your desktop:

image

It is a Silverlight OOB Application. If you want to confirm, right click on the application & you will see the Silverlight context menu pops up in the screen.

OMG!!! We didn’t do anything to design the above UI! The Visual Studio LightSwitch automatically created the screen for you with a “Save” and “Refresh” button. You can see a collapsible “Menu” panel at the left of the screen. In the right side, you will see tabular panel containing some labels and TextBox which will be require to insert data in your application database.

In the top right corner of the screen, you will see a “Customize Screen” button. Once you click this, it will pop up another Child Window for you to customize the application screen at runtime. This will not be visible, once you deploy the application. We will cover them later in different article.


Validation of Fields

As I told you earlier, our application is ready. So, what to do for writing some simple validation for our application? Wait, you don’t have to worry about that. LightSwitch internally does that for you. Let’s have a demo on it.

In the form panel, insert some data. We will purposefully write invalid data in the “Age” field. Instead of entering age, we will enter some text in the age field. If you press tab or click elsewhere (on lost focus), it will do the validation & show the error on the screen.

image

You can see the validation error popup in the screen as shown here:

image

Now enter proper values for all of the fields and click “Save”. This will save the records properly.


More on Save

Once you entered proper values in the input boxes, click “Save” to store the record.

image

This will save the record and add another field called “Id” in the UI. The value for the Id will be 1 (one) as this was our first record & will increase by 1 as we add more records.

image

To add more records, close the current tab and click “CreateNewStudentTable” menu item from the left panel.

image

Now enter some records and click Save button. You will see it in action that, the Id is automatically increasing by 1 as and when you are saving a new record.

image

If you have any unsaved records and want to close the tab or want to add a new record, it will open a message dialog to the screen warning about unsaved changes. It will ask you to save the changes before proceeding.

image

Click “Save” to save the unsaved record to database. Click “Discard” if you don’t want to save the record. Click “Cancel” to stay on the same page.


Customize the Screen

If you want to change the UI at runtime, click on the “Customize Screen” button available at the top right corner of the application window. Remember, this button will not visible once you deploy the application. Once you click the button, it will popup the Customization screen. Here you can change the layout of the screen, insert come new field or delete something which are already exist. For now, we will not go with changing the layout or controls. I will cover them in another article.

image

Here, we will change the display name of the new student menu item. Select the top level node of the screen items and in the properties panel change the “Display Name” from the default one to “New Student”. Now save the settings and restart the application for the changes to take effect.

Once you run you application now, you will see the display name of the menu item has been changed to the entered value i.e. “New Student”. This is more meaningful than the default text.

image

If you want to do the same thing inside the Visual Studio IDE, go to the properties pane as shown in the below figure. Find the “Display Name” property and change the display name to your own meaningful name. Run the application to see it in action.

image

You can change many other properties from the properties panel too.


End Note

Oh, it is too easy to create a data-driven Silverlight OOB application using Visual Studio LightSwitch. No need to write XAML or C# code to create such professional quality application in Silverlight.

Hope, this helped you to understand Visual Studio LightSwitch to create a simple data entry application without writing any C# code or writing any XAML code. In the next few articles of the series, I will discuss more about the other screens.

I think, you enjoyed it a lot and hence please give your feedback about this article.

 

About the Author

image69 Kunal is a Microsoft MVP in Silverlight, currently working as a Software Engineer in Pune, India. He is a Silverlight enthusiastic and want to work in Silverlight, WPF & Microsoft Surface. Apart from his daily office work, he spends a huge time on online communities. Writing articles, blogging, tweeting and answering to forums are some of his regular activities. He likes to share knowledge and learn newer things.

Follow him in his blog: http://www.kunal-chowdhury.com/
He also Tweets. Follow him in Twitter - @kunal2383

Subscribe

Comments

  • -_-

    RE: Beginners Guide to Visual Studio LightSwitch (Part - 1)


    posted by Don Rule on Nov 18, 2010 18:24

    This looks good but where I have had trouble with the existing forms capabilities is in creating a real data entry screen. It would be nice if the toolkit understood the data model and when there is a State field in your table that is a foreign key into the States table it would automatically build the combo box.

    I know that is asking a lot but is there any hint of this in LightSwitch?

  • kunal2383

    RE: Beginners Guide to Visual Studio LightSwitch (Part - 1)


    posted by kunal2383 on Nov 18, 2010 19:28

    Yes, the tool does that functionality. Stay tune for it in my next article.

  • -_-

    RE: Beginners Guide to Visual Studio LightSwitch (Part - 1)


    posted by Zubin on Nov 23, 2010 08:20

    Kunal, i dont want to use default primary key that is id, want to give my own and that too not autonumber. Is it possible?

    Thanks

  • -_-

    RE: Beginners Guide to Visual Studio LightSwitch (Part - 1)


    posted by Rajesh on Dec 07, 2010 17:32
    Great article, Kunal. Thanks.
  • -_-

    RE: Beginners Guide to Visual Studio LightSwitch (Part - 1)


    posted by DB on Dec 07, 2010 19:37
    Great starter, thanks.
  • -_-

    RE: Beginners Guide to Visual Studio LightSwitch (Part - 1)


    posted by Robert on Dec 09, 2010 16:58
    This is what I needed. I am new to silverlight and .net. Those how to vidios; although I could follow them hands on. I didnt know what I was doing and why. These beginners series 1 to 4 filled in the gap. Kunal keep the articles coming.
  • -_-

    RE: Beginners Guide to Visual Studio LightSwitch (Part - 1)


    posted by Czar on Dec 10, 2010 17:14

    This is dangerous, someone who has no idea on proper development designs and data structures could attempt to wizard themselves into an enterprise size app, after which most likely a professional will be called to "fix it", making it a nightmare for them and a waste of a lot of time and money for the business. 

  • -_-

    RE: Beginners Guide to Visual Studio LightSwitch (Part - 1)


    posted by Tom on Dec 11, 2010 00:21
    I'm glad I discovered this. Thanks. Can you direct me to lessons for using a remote database instead of creating a table?
  • -_-

    RE: Beginners Guide to Visual Studio LightSwitch (Part - 1)


    posted by Tom on Dec 11, 2010 00:26
    Actually, can you direct me to docs that go beyond 'Hello, World' apps?
  • -_-

    RE: Beginners Guide to Visual Studio LightSwitch (Part - 1)


    posted by Ahmed on Dec 15, 2010 06:36
    Article gives an good overview of LigthSwitch for a beginner.
  • -_-

    RE: Beginners Guide to Visual Studio LightSwitch (Part - 1)


    posted by Monjur Ahmed on Dec 19, 2010 10:17

    Lot of thanks for your good articale .I think you will write continiue articale about latest technology .

    Thanks

    Monjur Ahmed.

    Software programmer

    Spectrum Engineering Consortium Ltd. Dhaka.

     

  • -_-

    RE: Beginners Guide to Visual Studio LightSwitch (Part - 1)


    posted by Pham Nguyen on Dec 26, 2010 05:28
    Thanks very Much ! it's great !
  • -_-

    RE: Beginners Guide to Visual Studio LightSwitch (Part - 1)


    posted by Suryakant on Dec 27, 2010 17:11
    It's very helpful and innovative.................Microsoft....Rocks
  • -_-

    RE: Beginners Guide to Visual Studio LightSwitch (Part - 1) – Working with New Data Entry Screen


    posted by Naser on Feb 06, 2011 21:36

    Hello Crew,]

    Can you please tell me how and where can i download share point templates to light switch, and if you have any tutorials about using these templates.

     

    Thanks

  • -_-

    Hey


    posted by Anusha Reddy Malipeddi on Feb 27, 2011 19:28
    Awesome Article...!!!!!!!!!!
  • -_-

    RE: Beginners Guide to Visual Studio LightSwitch (Part - 1) – Working with New Data Entry Screen


    posted by Rajeeivf on Apr 02, 2011 07:59

    huge & good tutorials for us

  • -_-

    Re: Beginners Guide to Visual Studio LightSwitch (Part - 1) – Working with New Data Entry Screen


    posted by on Oct 19, 2011 07:37

    Thanks for the informative article. Your steps were quite easy to understand. You make Silverlight look so simple! I think I have learnt enough to create my own data entry application without any difficult coding.

Add Comment

Login to comment:
  *      *       

From this series