Summary Property and Computed Field in LightSwitch Beta 2

Prologue:

My last article discussed how to use the Address Editor and Address View in a LightSwitch Application. Today we shall discuss how to use the Computed fields for a Summary property in a LightSwitch application.

What is Summary Property in LightSwitch?

Summary Property is a Property of an Entity [Table]. Summary Property is a field in a row which represents the entire row. By default, the first string field of the row will be treated as a Summary property of that row.

If you want to use the Summary property in your LightSwitch Application, then you should have a Computed field in your Entity.

Let us see how to create a Computed field and how to use that for a Summary property by using a demo LightSwitch application.

Preparing the Solution:

Fire up VS 2010; create a LightSwitch Desktop application with the name "SummaryPropertyInLSBeta2" as shown in the following figure:


Follow the [No: #] to create a Solution.

Creating Entity for Application:

Create a table as shown in the screen by selecting the "create a table" option in the start up screen.


Designing the Screen:

First of all we need to add a Search Data Screen to our demo application. We should know how to add a Search Data Screen to a LightSwitch application, prior to proceeding with designing the screen. To know more about how to add a Search Data Screen to a LightSwitch Application please read this Article.

Now we know how to do the screen stuff. See the following figure which is the default screen layouts for the screen we have created.


Our application is ready; if you run this application now, you will get a screen like the following.


By default, the Search Data Screen will not have the buttons for Details Screen. We have to add it.


As shown in the figure:

1. Select the People Data Grid.
2. Select the Command Bar.
3. Press Add DropDownList to get the Property list.
4. Select the AddAndEditNew button to add.

The AddNew button will open a screen for adding the data to the database whereas the AddAndEditNew button will allow you to also edit.

Now press F5.


You will see the Add [+] DropDownList.

Now press Add DropDownList and add some data.


If you press the Add DropDownList, you will get the Details Screen which is a LightSwitch created screen.


After adding the data to the database, you will see the saved data in the Search Data Screen. By default the first string field will be displayed as a link. Instead of the First name we will add the Full name as the Summary property here. Let us see how to do that.

Adding Computed Field to the Entity:

To add the Computed field to the entity, open the Entity that you need to add the Computed field.


After opening the Entity, select the entity name. Here the entity name is Person.


In the Entity Designer, at the Top you can see the Computed property button. Click on the Computed Property button to add a Computed field into our demo application.


Once you clicked the Computed Property button you will have a field created in the entity with a Calculator symbol as shown in the figure. Let name the field be FullName as we are going to display the FirstName and LastName as the summary property of the Entity.

Adding Summary Property:

To add summary property to our application entity, follow the figure no: #.


Here,

1. Select the Person property.
2. At the bottom of the Property page, you will see the Summary Property which has a list of Properties of Person Entity.
3. Select FullName from the list of properties available.
   
   
   

Select the FullName from Entity Designer and come to the Properties page. In General section you can see the Is Computed option has been selected.

Just below to that you will have "Edit Method". Click on that link; you will be directed to the code-behind.

Power of LightSwitch:

We are going to the code-behind file for the FIRST TIME in this series of LightSwitch articles. You may now see how powerful LightSwitch is.


Just type the single line of code to get the computed field value. Here we are adding the FirstName and LastName as FullName.

We have added the Computed field for Summary property as FullName in the Entity just before. But we have not added the Summary property to the Search Data Screen so that it will be displayed in the Screen.


To add the Summary Property into the Search Data Screen follow the numbering order.

1. Select the Person Property Data Grid Row.
2. Select Add DropDownList available at the end of the property tree.
3. Select the Full Name from the Add DropDownList.

Quick Note:

The LightSwitch will automatically assign the display name for the properties if the property name follows the CamelCase naming convention.


The above figure shows the complete screen tree structure. We have added the Summary property at the end of the screen tree. To move the Summary Property to the top, just drag the property and drop at the top as shown in the figure.

By default the FirstName is displayed as a Link. So we need to make the Summary property FullName a link.


Select the FirstName field and go to the property page. In the general section, deselect the check box as shown in the figure.


The above figure shows how to make the FullName a Link.

Now we have done everything. Just press F5 to see the application in action.

Application in Action:


You can see the Summary property displayed in the application Search Data Screen. If you click the Link, it will pop up the Details Screen as show in the following figure.


In the Details Screen Tab, the LightSwitch displays the Summary property.

Summary:

In this article, we have seen how to create and use the Summary Property and Computed field in the LightSwitch Screen.

Thanks for spending your precious time here. Please provide your valuable feedbacks and comments, which enable me to give a better article the next time.

Thanks.