(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 - 2) – Working with Search Screen

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

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

Introduction

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.

image

In my previous Chapter “Beginners Guide to Visual Studio LightSwitch (Part–1)” I described about LightSwitch and did demonstration from creating a new LightSwitch project to create a simple form to insert new Student record.

In this article, I will show you how to create a search record window & export the records to Excel Sheet using Visual Studio LightSwitch for Silverlight. No need to write a single piece of code, no need to write a single XAML code. Read through the complete article to learn more about it.

 

Background

If you are new to Visual Studio LightSwitch, I will first ask you to read the first chapter of this tutorial, where I demonstrated the following points:

  • Setting up LightSwitch Environment
  • Creating a LightSwitch Project
  • Create a Database Table
  • Create a Data Entry Screen
  • See the Application in Action
  • Validation of Fields
  • More on Save
  • Customize the Screen

If you go through the above points, you will be familiar with it and you will be able to understand this Chapter. You can read the first Chapter here: Beginners Guide to Visual Studio LightSwitch (Part–1). Don’t forget to vote for it.

In this article, we will talk about the Search Screen. We will create the search window, where we will be able to search for a particular record, sort the records and export the record to Excel Sheet. Yes, without writing any code.

 

Create the Search Screen

Open the solution that we created in the previous chapter. By default, the table designer will be visible on the screen. If not, open the “StudentTables” from the Solution Explorer. This will open the below screen in your Visual Studio IDE:

 

image

Click on the “Screen” button as shown in the above figure. This will pop up the “Add New Screen” to the desktop. Here you can select a screen template. Default selection is “New Data Screen”. As we are going to create a Search Screen, hence choose the “Search Data Screen” template from the template panel situated at the left side of the dialog window. It will show you the preview of the screen in the middle panel. Here it is:

image

In the right panel, select the appropriate “Screen Data” i.e. your table. In our case, it is the “StudentTables”. Select it from the dropdown. The “Screen Name” will be automatically updated by the IDE. If you want, you can change it here or can change it later from the Screen Designer window.

image

Click “Ok” to continue. This will generate the appropriate Search screen for your Student Table. Here it is in design view:

image

We will not modify anything there now. We will customize it at later point of time. As of now, our search screen is ready. We can now run the application and see the live demo.

 

See the Application in Action

Once the screen is ready, press F5 to run the application. Once the application has been launched as the OOB Silverlight Window, you will see the below screen:

image

By default the first screen (i.e. the “New Student” Screen in our demo application) will be visible. From the left panel, select the menu item called “SearchStudentTable”. This will open the “SearchStudentTable” screen as a new Tab. You will also see a loader while fetching the table values.

image

Once the fetch has been done, you will see the screen loaded with all the records in a Data Grid. In the same screen you will see a “Refresh” button, a “Search Panel” and a button called “Export to Excel”.

image

Now, click on the Search box and start typing your search query. Once entered, click on the search button.

image

This will filter out the DataGrid with the respective result based on the search term. You can see the same as live here:

image

All the things demonstrated here is without writing a single piece of code. You can see that. It is really very easy to create the professional application using the LightSwitch within a small amount of time. No need to know more about Silverlight XAML.

 

Customizing the Search Screen

If you look into the UI properly, you will notice that the table has a wrong column name. The first column name is “Student Table”. This is nothing but the “FirstName” column of the Student Table. So, we need to modify the UI to show the proper column name. In this point, we will discuss about it. Add some more records into the database table.

image

At the top right corner, you will see a “Customize Screen” button. You can click it to start customizing the Search Screen. Be sure that, the search screen is open in the UI. Click the button to continue.

image

This will open the Search Screen in Customization Mode. We are familiar with this screen, right? We have already seen this screen in our first chapter. To modify the first column of the DataGrid, click the small arrow head near to the “DataGridRow | StudentTable” to expand it.

image

Once expanded, you will see a Tree item named “Summary” (as shown in the below screenshot). Click on it. Now click on the “Delete” button placed at the edge of the left panel.

image

This will delete the summary column from the screen. You can see that in the right panel. Now select any of the label (as shown in the below screen) under the DataGridRow placed in left panel. You will see a dropdown menu added at the below screen.

image

Now click on the “Add” menu. This will pop up the full menu items in the screen. Select “FirstName” from the menu.

image

Once selected, you will see it live in the right panel too. Click on MoveUp icon at the edge of the left panel or press Ctrl + u. Continue pressing the MoveUp button unless it moves up to the top.

image

Now you will see the DataGrid structured properly with FirstName, LastName, Age and Marks.

image

Click on “Save” button to save the changes.

image

Now run your application to see the changes live. Here is the snapshot of the same:

image

Here you will see the records shown as per the order of insertion in the table. They are based on the Record Id. If you want to show the Id in the UI, go to the design view and add the Id column into the Screen.

 

Sorting the Records

If you want to sort the records, you can easily do it. The DataGrid has the mechanism to do it automatically. If you want to sort the data based on a particular column values, click on that column to sort it.

Let us sort the records by the FirstName field. Hence, click on the FirstName column header. Woo, what did you see? The records has been automatically sorted on FirstName.

image

Let us do another sort based on the “Age” field. Click on the “Age” column header to do the Sort by the application.

image

If you want to sort the records for the other fields, click on the respective column header to sort.

 

Customize the Name of the Screen

This point is already covered in the previous chapter. For sake of your understanding, I am again repeating this point. To change the title of the Search screen, click on the “Customize Screen” button to open up the screen in Customization Mode.

Select the first item from the left panel. In this example, it is: “Vertical Stack | SearchStudentTable”.

image

In the bottom right panel, find out the field named “Display Name”. Change the value for it from “SearchStudentTable” to “Search Student”. Save the settings.When you back to the UI screen, you will see that it has been updated in the tab. But in the left menu, the text is not yet updated.

image

Restart the application to reflect all the changes. After restart, your application will look as below:

image

 

Navigation and Export to Excel

If you have a huge records in the table, you will see the navigation panel in action. See the below screenshot:

image

In the above screenshot you will see the “Export to Excel” button. This is nothing but exporting your records to the Excel Work Sheet automatically. Just click on the button. The whole content of the records will be exported to the Excel application and you will see it like this:

image

 

End Note

You can see that, for the whole sample application, I didn’t write a single piece of XAML or C# code. This is the power of Visual Studio LightSwitch for the Silverlight developers. If you haven’t yet started working on LightSwitch, try exploring it from now.

I am feeling it very useful, as I am exploring it now. I will post the next chapter soon for you, so that, you can learn about it in depth. Don’t forget to vote for it. Appreciate your feedbacks and/or suggestions.

 

About the Author

image69_thumb 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 - 2)


    posted by Victor Andrade on Oct 25, 2010 23:11

    I Have a  0X800A03 error when i want to export to Excel (only 143 records)

  • -_-

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


    posted by Dot Net Coder on Oct 28, 2010 09:37
    Please tell us something abut hosting. I am facing some issues at the time of hosting
  • -_-

    Magento Themes


    posted by Zeeshan Khalid on Nov 01, 2010 15:00

    Hi

    This is a brilliant tutorial on visual studio Light switch.Specially the beginners will get a lot of benefit from it.I recommend it to all my friends who are interested in learning VS LightSwitch. This is really a very informative article.

    I admire it a lot.

    Thanks for sharing such a great tutorial.

  • -_-

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


    posted by John Devis on Nov 02, 2010 23:12

    Hi,

     Can you suggest any alternative to LightSwitch that exists in Open Source world? I am going through a search customization and random database module development that is CMS for each specific department (in a case of University's department implementation) in a magento theme.

    Thanks

  • kunal2383

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


    posted by kunal2383 on Nov 03, 2010 04:27
    @DotNetCoder - Will do in the coming series. Keep a look.

    @MagnetoThemes - Thanks for the nice feedback. Spread the word & the link.

    @JohnDevis - I don't know about any open source version of it. LightSwitch is a MS product and currently in it's Beta stage (yes, it is FREE till now). So, doubt there could be a open source tool for it.
  • -_-

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


    posted by karl on Nov 19, 2010 08:33
    have you try to create an accounting system on lightswitch?
  • -_-

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


    posted by Boris on Dec 17, 2010 14:05

    How can I total a column or make columns calculation like Avg, Sum,Min,Max

  • kunal2383

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


    posted by kunal2383 on Dec 17, 2010 16:19

    Hi Boris, you can very easily do that by inserting a new Calculated column field. I will write about it in my coming chapters.

  • -_-

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


    posted by akaw80 on Dec 24, 2010 18:46

    I have a question about the Sort section of this guide. I understand that its reasonably automatic for the Datagrid to sort when you click the column name. What would cause this to NOT happen? example using above table - lets say I click "last_name" that will sort it properly, but If I click "Student_table" it doesn't do anything. I do have a relationship for that "Student_table" column that goes to another table, would that have something to do with why it won't sort? if so, can that be changed?

    Thank you in advance for any pointers anyone can give. Its greatly appreciated.

  • -_-

    RE: Beginners Guide to Visual Studio LightSwitch (Part - 2) – Working with Search Screen


    posted by Magento Themes on Feb 24, 2011 03:59

    Surely with out doubt great piece of information shared with in this post, while going and learning Visual Basic Light Switch. A great effort keep up the good work...... 

    <a href="http://www.fmeextensions.com/magento-themes.html">Magento Themes</a>

  • -_-

    RE: Beginners Guide to Visual Studio LightSwitch (Part - 2) – Working with Search Screen


    posted by Akiii on Mar 19, 2011 16:55

    Excellent tutorial......

    I am a beginner to LightSwitch and i am enjoying it by learning from your tutorial...

    Thank you for the great article...

    Akiii

  • -_-

    RE: Beginners Guide to Visual Studio LightSwitch (Part - 2) – Working with Search Screen


    posted by Rajeeivf on Apr 02, 2011 08:10

    dear sir!

    i have developed database in visual studio lightswitch,so i desire to bring to vb.net form.pls help me


  • -_-

    RE: Beginners Guide to Visual Studio LightSwitch (Part - 2) – Working with Search Screen


    posted by giaonk on Apr 12, 2011 05:45

    An error: line 0 position 0 when run the tutorial part 2 with F5.

    I am new with LightSwitch, so any suggestion to solve this problem.

    Thanks for your tutorial.  

  • kunal2383

    RE: Beginners Guide to Visual Studio LightSwitch (Part - 2) – Working with Search Screen


    posted by kunal2383 on Apr 12, 2011 07:26

    Can you tell me about the error in details?

  • -_-

    RE: Beginners Guide to Visual Studio LightSwitch (Part - 2) – Working with Search Screen


    posted by giaonk on Apr 13, 2011 12:47
     

     When i press F5 to run the tutorial part 2. An dialog box appears inform an error: 

    Element is already the child of another element. (Line: 0 Position: 0]

    Click OK button, the table values doesn't load into the screen and the "Search Student Table" screen dimmed.

    thanks for your support

  • kunal2383

    RE: Beginners Guide to Visual Studio LightSwitch (Part - 2) – Working with Search Screen


    posted by kunal2383 on Apr 13, 2011 13:45

    Make sure that, you did not add more than one element with the same name in the UI.

  • -_-

    RE: Beginners Guide to Visual Studio LightSwitch (Part - 2) – Working with Search Screen


    posted by giaonk on Apr 14, 2011 07:39

    I did not add any elements other than the step by step tutorial.

  • chat2004

    Re: Beginners Guide to Visual Studio LightSwitch (Part - 2) – Working with Search Screen


    posted by chat2004 on Sep 05, 2011 07:59

    Hi Kunal,

     Can you show me how to change the grid column at runtime? Seem to LightSwitch does not support Localization, so I want to do it manually.

     Thanks

  • -_-

    Re: Beginners Guide to Visual Studio LightSwitch (Part - 2) – Working with Search Screen


    posted by on Oct 20, 2011 07:41

    This is a good continuation from part 1. Thanks to your article, I have learnt further in depth knowledge of Silverlight. This should be recommended to people who want to learn more about Silverlight in a quick and easy way.

    Greg - wall lights

  • Izzat

    Re: Beginners Guide to Visual Studio LightSwitch (Part - 2) – Working with Search Screen


    posted by Izzat on Jan 18, 2012 11:37

    Hello Kunal,

    Now i'm creating one databases for one company by using Visual Studio Lightswitch,after i created all the screens which were needed,I run the apps with button F5,everything was working well.But when i tried to delete some of the data in the list of student that i created, i can't deleted it because of the error of the id_student.Can you help me about this?

  • mash240

    Re: Beginners Guide to Visual Studio LightSwitch (Part - 2) – Working with Search Screen


    posted by mash240 on Aug 24, 2012 16:00

    Is this software you can download for free somewhere on the web?

    triple chrome spotlights

  • -_-

    Re: Beginners Guide to Visual Studio LightSwitch (Part - 2) – Working with Search Screen


    posted by on Sep 10, 2012 11:37
    Dental Bellevue
    Victimized with unmingled situations is unrest unsmooth and I cerebrate we tie to be spanking assured in hiding with nonelective situations. Fascinating things mentioned here in this objurgate. Ngo you

Add Comment

Login to comment:
  *      *       

From this series