This article is Part 4 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.
In my previous chapter “Beginners Guide to Visual Studio LightSwitch (Part – 3)”, I guided you step-by-step to create a DataGrid of records. Here you understood, how to insert/modify/delete records.
In this chapter, I am going to demonstrate you how to create a List and Details screen using LightSwitch. This will show you how to integrate two or more tables into a single screen.
Background
If you are new to Visual Studio LightSwitch, I will first ask you to read the previous three chapters of this tutorial, where I demonstrated it in detail. In my 3rd chapter, I discussed the following topics:
- Create the Editable DataGrid Screen
- See the Application in Action
- Edit a Record
- Create a New Record
- Delete a Record
- Filter & Export Records
- Customizing Screen
In this Chapter, we will discuss on the List and Details Screen where we can integrate two or more Tables inside a single Screen. Read the complete tutorial to learn it. Enough images are there for you to understand it very easily. Don’t forget to vote and write some feedbacks on this topic.
Creating the List and Details Screen
Like the other screens, it is very easy to create the List and Details screen. Hope you have the basic table available with you. If you don’t have, read my first chapter of this tutorial to create the one for you. Now open the StudentTable inside your Visual Studio 2010 IDE. As shown in the below screenshot, click on the “Screen…” button to open up the Screen Template selector.
In the “Add New Screen” dialog that pops up (which is nothing but the Screen Template Selector), chose the “List and Details Screen” template. Check the below screenshot for details:
On the right side panel, chose the table that you want to use here. Select “StudentTables” from the Screen Data combo box and hit “Ok”. This will create the basic UI for you from the screen template with all the necessary fields.
You will be able to see the UI design inside the Visual Studio IDE itself. This will look just like this:
You will see that the screen has four TextBox named FirstName, LastName, Age and Marks. These are nothing but the table columns added to the screen.
Now run the application to see it in action. Once the application shows up in the display screen, click the “StudentTableListDetail” menu item from the left navigation panel. If you don’t know what is this navigation panel, read any one of the previous three chapters.
UI Screen Features
Here you will see that, there are two sections inside the main tab. One hosts only the FirstName from the records column and the right side panel has all the details for that specific record.
If you chose a different record from the left list, the right panel automatically reflect the record details. This screen calls as List and Details screen based on it’s UI. The left panel is the list of records and right panel is the details of the selected record.
Here, you will see that, like other screens “Add…”, “Edit…”, “Delete”, “Refresh” and “Export to Excel” buttons are available. The “Add” button will popup a new modal dialog with the form to enter new record. “Edit” button will popup a modal dialog with the selected record to modify it. “Delete” will simply delete the record from the table. It will not actually delete from the table unless you press “Save” after that. “Refresh” button will re-query the table to fetch the records. “Export to Excel” opens up the Excel application with the listed records.
You will also notice, there is a new Combo Box in the UI. It’s called as “Arrange By” (as shown in the below figure). If you click on the drop down you will see all the column names in the list.
From there, you can sort the records by any field. Once you select a different field from the drop down, it will again load the records sorted by that field.
Like the below screenshot, you will see an indicator while sorting and loading the records. No code to be written for all these functionalities. They are all out-of-box features.
Here you will see how the records have been sorted by FirstName (in ascending order):
If you want to sort them on descending order, just click the small arrow head just right to the “Arrange By” text. Here is the screenshot of the same (marked with Red circle):
Add, Edit operations are similar to the earlier screens. Either press the respective buttons or double click the DataGrid. Double clicking the DataGrid cell will do the operation inline but pressing the button will pop up a new modal dialog on the screen.
You can see the above figure. Once you click “Edit” button, the modal window will pop up as shown in the figure. Update the records with desired values.
Adding a New Table
Let us create a new Table. Open your Solution Explorer and right click on the “Application Data”. This will bring a context menu in the screen. As shown below, click on the “Add Table” menu item to open the Table designer.
In the table designer screen, enter all the columns with specific column types. For our example, we will create a StudentMarks table with three new columns named as “Math”, “Physics” and “Biology”. “Id” column is default primary key field.
All the columns are Int16 type in our case. The new table design will look like this:
Creating the Validation Rules
In earlier chapters, we saw how the IDE creates the validation rule by default for null value. Here, we will jump a little bit depth and set some additional validation rules. Of-course, they will not be in code but setting some properties inside the property panel.
Chose each one of the subject columns one by one and set the Minimum and Maximum values for them. In our case, the minimum value will be 0 (zero) and maximum value will be 100. Repeat the same step mentioned in the above screenshot for all the other two fields. Now, those fields will take an integer value ranging between 0 and 100. You will not be able to enter any value less than 0 or greater than 100.
If you enter any other value outside the range, it will fail the validation and show appropriate message on the screen. We will see that in action later. But before that, we need to create the screen.
Adding Relationship between two tables
Yes, we can easily create a relationship between two tables. How? Create the “Relationship…” button placed at the top left corner of the table designer screen (as shown below);
This will bring the “Add New Relationship” dialog in the screen. You will notice there that, it has two table field “from” and “to”. This means the relationship between two tables (one with the other). There is a field called “Multiplicity”. This is nothing but the relationship type (one to one, one to many, many to one etc.)
One to one is not supported in this Beta 1 version. Can’t say whether it will be available in the next versions. If you select one to one relationship, the wizard will show the appropriate message saying that “One to one relationships are not supported”. Have a look here:
For our example, chose Many to One relationship between StudentMarks and StudentTable. You can select the delete behavior in the wizard, whether it will support restricted or cascaded delete operation.
Once you setup the relationship between the two tables, click “Ok” to continue creating the relation. Now, Visual Studio 2010 IDE will show you how the relationship is binded between the two tables.
Here you will find the relationship as a diagram. See the box marked as Red:
You will see that, the StudentTable now has the one to many relationship with the StudentMarks table and it actually created a new field called StudenTable of type “StudentTable”.
Creating the new List and Details Screen
Now as a beginner, we will first remove the previous ListDetails screen. To do this, go to Solution Explorer and remove the StudentTableListDetail screen from the Screens folder. Here is the snapshot of the same:
The above step is not require if you are familiar with the screen customization. As the tutorial is targeted for beginners, hence I am removing this screen for you to understand properly.
Let use create a new List & Detail screen for our example. Go to the solution explorer. Right click on the Screens folder (as shown in the below figure), from the context menu chose “Add Screen…”.
This will popup the “Add New Screen” dialog. You are very familiar with this page as we discussed it earlier for several times. In this page, select “List and Details Screen” from left template panel.
In the right panel, select the desire table as the data source. In our example, we are going to use the “StudentTables” as the data source. Select it.
You will see that, it has now one more extra table called “StudentMarks” which you can chose from there. Let us select all the additional tables from the screen and click “Ok”.
This will create the UI for you and open up the UI inside Visual Studio IDE in the design view. You will see that the StudentMarksCollection (marked as Red in the below screenshot) also has been added to the screen and has reference to the StudentTableCollection.
In the right side design view you will see that, the StudentMarksCollection has been added to the screen as a DataGrid, means all the related data related to the actual StudentTable will be populated here.
You will be able to chose the fields from this screen. If you want, you can remove any field and/or select the control type for the respective column type.
Application in Action
This is all about the thing that we wanted to discuss here. Now it’s time to see the demo of the same in action. This will exactly tell about the feature that we wanted to learn. We will now be able to tell whether we were able to achieve the goal of this chapter.
Let us build the solution and run it. Once run, it will open the application UI. from the left menu panel, click the menu item called “StudentTableListDetail”. It will open the ListDetail screen as a new tab into the screen.
You will see that all the records are displayed in the middle panel of the screen. It is only showing the FirstName from the table. You can chose which field to display here by customizing the UI.
In the right panel, you will see two sections. The top section is nothing but a Form where you can view and update the respective records of the selected one. Below to that, there is a DataGrid which actually shows the respective related records from the 2nd table.
You can easily add, edit, delete and export records within this DataGrid. You all learnt about it in the previous chapter. Hence, I am not going to explain it more here.
Now comes the part to showcase the custom validation that we added for the fields. We entered the Maximum and Minimum value for the fields. Let us check whether these works actually. What do you think? Let’s do it.
Enter a negative value or a value higher than 100 (100 was our maximum value and 0 was the minimum value, if you can remember). You will see the proper validation message popup in the screen. If you entered a higher value, it will show “Value is more than the maximum value 100” and if you entered a lower value, it will show “Value is less than the minimum value 0”.
Once you corrrect those validation error, you will be now able to save the record.
Hey, did you notice one thing? We didn’t enter the validation message there. These are coming from the Tool itself. Everything is inbuilt there. No code. Click, click and click, you professional quality application is ready for you.
End Note
You can see that, throughout the whole application (for all the 4 chapters) I never wrote a single line of code. I never did write a single line of XAML code to create the UI. It is presented by the tool template automatically. It has a huge feature to do automatically. From the UI design to add, update, delete and even sort, filter all are done automatically by the framework.
I hope, you enjoyed this chapter of the series a lot. Lots of figures I used here, so that, you can understand each steps very easily. If you liked this article, please don’t forget to share your feedback here. Appreciate your feedback, comments, suggestion and vote.
I will soon post the next chapter on Custom Validation soon. Till then enjoy reading my other articles published in my Blog and Silverlight Show. Cheers…
About the Author
 |
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 |