(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 - 4) - Working with List and Details Screen

(12 votes)
Kunal Chowdhury
>
Kunal Chowdhury
Joined Mar 28, 2010
Articles:   7
Comments:   14
More Articles
5 comments   /   posted on Dec 02, 2010
Categories:   LightSwitch

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.

image

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:

image

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:

image

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.

image

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.

image

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.

image

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.

image

Here you will see how the records have been sorted by FirstName (in ascending order):

image

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):

image

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.

image

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.

image

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:

image

 

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.

image

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);

image

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

image

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:

image

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.

image

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:

image

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:

image

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

image

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.

image

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.

image

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

image

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.

image

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.

image

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.

image

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.

image

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.

image

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

image

Once you corrrect those validation error, you will be now able to save the record.

image

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

image69_thumb_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 - 4)


    posted by Santosh on Dec 04, 2010 14:41

    Well described about the topic. Your all the chapters are awesome. Pretty simple and easy to understand for a beginner. I have never seen such simple way to communicate any written topic. Waiting for your next chapter. Thanks for your time to write such topics for beginners. 

  • -_-

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


    posted by Alan on Dec 06, 2010 16:57

    Well described

  • -_-

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


    posted by Ranjit on Dec 15, 2010 07:05

    All the parts were well described. Thanks Kunal for sharing the tutorial. Well done.

  • -_-

    Code Needed


    posted by Paul on Apr 05, 2011 15:10

    It's ok, but we all know in the end, if you want to create proper applications, you are going to need to use code...and lots of it. Remember when MS Access appeared......all those books creating apps with little code. However, they were all pretty useless apps.  If you want to write a proper system in Lightswitch you are going to need to write code.

  • kunal2383

    RE: Beginners Guide to Visual Studio LightSwitch (Part - 4) - Working with List and Details Screen


    posted by kunal2383 on Apr 05, 2011 17:10

    Hi Paul, who said you can't write code in LightSwitch? Yes, you can write code to extend the basic behavior. LightSwitch delivers everything to you without writing code. Next is yours. Write and extend the deefault logic as and when you need.

Add Comment

Login to comment:
  *      *       

From this series