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

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.

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:

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:

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.

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

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:

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.

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”.

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

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

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.

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.

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.

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.

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.

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

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.

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

Click on “Save” button to save the changes.

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

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.

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

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”.

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.

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

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:

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:

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