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:  

 

PersonEntity.jpg


SchoolPersonEty.jpg


StudentEty.jpg


TeacherEty.jpg


Creating the Screen 
 

Next, create a New Data Screen.
 

AddEdit_StudentScreen.jpg


OrigLayout.PNG
 

And this is will provide the following layout:


ChangeLayout1.png


 

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


ChangeLayout2.png


ChangeLayout3.png

 

 

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


AddParam.PNG

 

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. 
 

AddExtraStudent.PNG
 

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

MakeParam.jpg


  

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

 

LinkParam.jpg


 

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:

 

ChangeDefaultScreen.jpg

That's it!

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

FinishedWindow1.jpg


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


FinishedWindowWithErr.jpg

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


FinishedWindow2.PNG

 

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. 

 


Similar Articles