How To: Add and Edit Data For Hierarchical Data From a Single Screen in LightSwitch

Introduction 

This article provides a user-friendly data-entry option for an Entity with "is-a" relationships.

Background     

I would like to acknowledge the wonderful resources by Beth Massi and the LightSwitch team, especially this related video tutorial: How Do I: Create a Screen that can Both Edit and Add Records in a LightSwitch Application?  

So, let's say we have a hierarchy of "is-a" Entities, and we want to provide the user with a simple, singular screen for creating and editing. We also do not want to confuse the user, so we hide any visual indication of the underlying normalization of data, so that the user does not have to jump hoops such as selection of Entity type, Tabs, etc.  

Entity Structure  

So, this is the Entity Structure we'll be dealing with: A Student is a SchoolPerson, a Teacher is also a SchoolPerson, and a SchoolPerson is a Person. 

Here are the tables with their fields:  

 

Creating the Screen 
 

Next, create a New Data Screen.
 

 

And this is will provide the following layout:

 

Change the control type of the School Person and Person to Rows Layout. 

 

 

Drag the controls from the School Person and Person up into the StudentProperty, and delete the School Person.    

 

Click "Add Data Item", select "Local Property" of type Integer, uncheck "Is Required", and name it StudentId. 
 

 

Click "Add Data Item", select "Query", select "Students_SingleOrDefault", and keep the default name of Student. 
 

 

Make StudentId a screen parameter. Select StudentId in ViewModel, and in the Properties window, check the "Is Parameter" option. 
 

  

Now, bind the Query Parameter named Id for the Student in the ViewModel to the StudentId parameter. 

 

 

Change the code for the screen as follows:
 

publicpartial classAddEdit_Student

{

    partialvoid AddEdit_Student_InitializeDataWorkspace(List<IDataService> saveChangesTo)

    {

        if (this.StudentId.HasValue)

        {

            this.StudentProperty = this.Student;

        }

        else

        {

            //Insert as per hierarchy from bottom to top.

            this.StudentProperty = new Student();

            this.StudentProperty.SchoolPerson = new SchoolPerson();

            this.StudentProperty.SchoolPerson.Person = new Person();

        }

    }

    partialvoid AddEdit_Student_Saved()

    {

        this.Close(false);

        Application.Current.ShowDefaultScreen(this.StudentProperty);

    }

}

Now, if you want this screen as a default Add/Edit screen that pops up when the Summary Link for a Student is clicked from anywhere, then go to the Students DataSource in Solution Explorer, and change its "Default Screen" property to the screen we just created which is AddEdit_Student; see:

 

That's it!

Depending on your shell/theme, this is how it looks when you run:

All the validations get applied when you hit Save. See the Points Of Interest section below. 

Add valid values into fields and hit Save. All the plumbing for insertiion into multiple tables is taken care of by LightSwitch. 

 

So now you can follow the same steps to create a Add/Edit screen for a Teacher. In this way all the complexities of data normalization are hidden from the user.  

Points of Interest 

1. Validation Errors: If you click on a Validation Error for a control that belongs to a parent Entity, it opens a Quick Edit window which might not be desirable for various reasons.

2. The Tab DisplayName can be changed by using the screen's SetDisplayNameFromEntity() method in appropriate places in code-behind if you want to see the Summary property.