Using Different Edit Screens Based on Record Types (Table Inheritance)
I had a reader ask a question this week on how to use Visual Studio LightSwitch to open different Edit Detail screens based on the “type” of record. This is a very common thing to do especially for data models that use table inheritance (or sub-tables). For instance say we are building an application for a pet store to manage their inventory of animals. We need to collect shared properties of all the animals in an Animal table but we also want to set up table inheritance to Fish, Cat and Dog tables which collect specific properties of those types of animals. When a user selects an animal on a search screen, we need to display a screen that lets them work with the correct data from the specific table. LightSwitch provides a “Show as Link” on labels which automatically opens up the default details screen for that entity, but in our case we could have multiple screens. There are also a few techniques you need to know when dealing with these types of relationships in LightSwitch, particularly around the insert pipeline. In this post I will show you how you can achieve this functionality.
Create The Data Model
First let’s start by creating a simple inheritance data model for the pet store. We will build an Animal table that collects general properties of any animal in the store. Then we will build Cat, Dog and Fish tables to collect specific properties of those types of animals. The relationship between the Animal table and the others will be a ‘one to zero or one’ relationship.
For this example, the Animal table has two required properties, Name and Type. Type is a Choice List with the static values “Cat”, “Dog”, “Fish” to correspond to the type of record the animal is. We will use this to drive what records are inserted into which specific table as well as use it to determine which screens to display.
Next, create the Cat, Dog and Fish tables to collect properties specific to these types of animals.
Finally, set up the relationships from Animal to these tables as a “one to zero or one” relationship with a delete behavior of “Cascade Delete”.
Our data model now looks like this.
Create the Screens
Next we’ll need to enter new animals into the system. Create a New Data Screen and select Animal as the screen data. When you do this, LightSwitch will include all the one-to-one related tables as fields on the screen. However, we only want to require the user to enter the general Animal properties on this screen. Once they save, we will direct them to the correct Cat, Dog or Fish detail screen. So first delete all the items in the content tree of the Screen Designer except for Name and Type.
Next, create an Edit Details Screen and select the Animal screen data again. Name the screen CatDetail and uncheck “Use as Default Details Screen”.
Again you will see that LightSwitch reads these special relationships and adds all the fields from all four tables to the screen. We will need to make some changes. First, change the “Type” from an Auto Complete box to a Label. Once the user has entered the type of animal on the New Data screen, it cannot be changed. Next, delete all the fields related to Dog and Fish from the screen.
Repeat the same process to create the DogDetail and FishDetail screens, removing the fields from the screen that do not belong.
Finally, add a Search Data Screen and select the Animal as the screen data again. Select the “Name” content item and in the properties window uncheck “Show as Link”.
Instead of using the built-in “Show as Link” functionality, we need to create our own command. We can put commands anywhere on the screen and we can show them as buttons or links. (For more information see: “I Command You!” - LightSwitch Screen Commands Tips & Tricks) For instance we could put an edit button on the screen command bar, the grid command bar, or even in the row itself. Let’s add a command into the row itself.
Right-click on the Data Grid Row Command Bar in the content tree and select “Add Button…”. Create a new method called “Edit”.
We want to show the command as a link instead of a button so select the button in the content tree and change it to a link.
Write the Code
Now we need to write some code to pull this all together. Right-click on the button we just created and select “Edit Execute Code” to open the code editor. Here we will check what type of animal we have to open the corresponding screen.
Private Sub Edit_Execute()
If Me.Animals.SelectedItem IsNot Nothing Then
Select Case Me.Animals.SelectedItem.Type
Case "Cat"
Me.Application.ShowCatDetail(Me.Animals.SelectedItem.Id)
Case "Dog"
Me.Application.ShowDogDetail(Me.Animals.SelectedItem.Id)
Case "Fish"
Me.Application.ShowFishDetail(Me.Animals.SelectedItem.Id)
End Select
End If
End Sub
Next we need to write similar code on the New Data screen so that it opens the correct detail screen after the user saves a new animal record. Open the CreateNewAnimal screen and in the upper right drop down the “Write Code” button and select the CreateNewAnimal_Saved method. First comment out the call to ShowDefaultScreen and then write code to determine which screen we need to show instead:
Private Sub CreateNewAnimal_Saved()
Me.Close(False)
'Application.Current.ShowDefaultScreen(Me.AnimalProperty)
Select Case Me.AnimalProperty.Type
Case "Cat"
Me.Application.ShowCatDetail(Me.AnimalProperty.Id)
Case "Dog"
Me.Application.ShowDogDetail(Me.AnimalProperty.Id)
Case "Fish"
Me.Application.ShowFishDetail(Me.AnimalProperty.Id)
End Select
End Sub
Finally, we need to implement a business rule on Animal in the save pipeline. This rule is important so that a new record is added to the correct table based on the animal’s type. That way after the user saves the CreateNewAnimal screen, a record will be written to the correct table and the detail screen will open and allow the user to edit the specific fields in the Cat, Dog or Fish table. Double-click on Animals in the Solution Explorer under the Data Sources/ApplicationData node to open the Data Designer. Drop down the Write Code button and select the Animals_Inserting method and write this code:
Private Sub Animals_Inserting(entity As Animal)
Select Case entity.Type
Case "Cat"
If entity.Cat Is Nothing Then
entity.Cat = New Cat()
End If
Case "Dog"
If entity.Dog Is Nothing Then
entity.Dog = New Dog()
End If
Case "Fish"
If entity.Fish Is Nothing Then
entity.Fish = New Fish()
End If
End Select
End Sub
Run it!
Enter new animals on the Create New Animal screen and when you click Save, the correct detail screen will open allowing you to enter more specific details based on the type of animal.
On our search screen, we can click the Edit link on any of the rows and it will open to the correct details screen as well.
Wrap Up
I hope this post answered the reader’s question on how to open different detail screens depending on the record’s type. All it takes is implementing your own command. I also touched on one to one relationships and how to set up basic table inheritance. I encourage you to experiment more with this type of relationship. They come in particularly handy when you need to extend external data sources with additional properties or when you need to set up inheritance hierarchies. The trick is to get a record inserted into the right table when you insert the master / parent record. I’ll expand on a couple other techniques in a future post.
Enjoy!
Comments
Anonymous
January 20, 2012
This is great Beth!! Thank you so much.Anonymous
January 20, 2012
Is it possible to have the Animals details screens also be available independently. For instance, I would like to be able to go directly to the Add New Cat screen rather than having to enter a new animal and then after saving be redirected to the cat details screen. I would rather the Add New Cat screen automatically knows that the animal type will be cat so the user does not need to select animal type.Thanks againAnonymous
January 20, 2012
good information its help mesharepointsolution2010.blogspot.com/.../situation-silverlight-datagrid-to-given.htmlAnonymous
January 26, 2012
Very nice. Thanks again..Anonymous
January 27, 2012
Hi marcz21,Yes you can create the New Data screen on Animal and choose to include all the related tables. Then on that screen you would need to add the Cat, Dog or Fish to the Animal like I have in the Inserting method above. Doing it on the screen directly will enable the right fields to enter the correct values.HTH,-BethAnonymous
April 20, 2012
Hi Beth,i followed your sample and it works like a charm. I'd like to be able to have the command link/button at the start of the row. Is that possible? Or maybe a pcouple of rows in.The layout/alignment doesn't seem to function either, ie the Edit for example is sat flat on the row. I tried to use Centre and Top, Left and Right. It seems really at home where it is...Any help would be really appreciated. Great articles.ThanksSteveAnonymous
May 21, 2012
ProTip: If you ever go back to one of your derived tables and add a field, and want that field on your derived screen, you can drag over the derived table variable, which will make a row, drag the new field out of the row to wherever you wish, and then delete the row.Anonymous
June 25, 2012
Hi Bethi'm trying to create the single create screen as marcz21 requested... but the elements related to the specific animal are greyed out on the form. how do I enable them?thanksAnonymous
December 09, 2013
How could this two-step approach for entity creation be done with the HTML Client?Anonymous
June 29, 2015
Fabulous...!!Anonymous
September 08, 2015
Cold...!!