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!