How to handle Property Changed Event in LightSwitch 2011

Posted by Jaganathan Bantheswaran Articles | LightSwitch 2012 September 04, 2011
In this article, we shall discuss about how to handle the Property Changed Event in LightSwitch 2011.
Reader Level:

Foreword:

In this article, we shall discuss about how to handle the Property Changed Event in LightSwitch 2011.

To demonstrate the Property Changed Event, let us create a LightSwitch 2011 application which has a screen to save a student's details. In this application we will have a choice list for student Entry Mode.

The Entry Mode will have two options, one is Regular Entry and the other one is Lateral Entry. When the user selects the Entry Mode, depending on the value selected, we need to display some values or controls.

Preparing the Solution:

Startup VS LightSwitch 2011, create a project with the name "HowToHandlePropertyChangedEventInLS2011" as shown in the below figure.

PrptyChdLS1.gif

Follow the steps as shown in the figure.

Designing Entity:

PrptyChdLS2.gif

As shown in the figure, create an entity "Student" with the shown properties and make sure the two properties DiplomaPercentage and HSSPercentage have the required option unchecked, because these mentioned properties may or may not be filled.

Adding Choice List Options:

Since the EntryMode property is a choice list, we need to add to the choice list.

PrptyChdLS3.gif

To add the choice list,

  • Open the Entity Designer.
  • Select the EntityMode property.
  • Open the Property window for the selected property.
  • As shown in the figure select the Choice List from the property window.

PrptyChdLS4.gif

In the Choice List windows, add the two options shown in the figure above.

Designing Screen:

Create a New Data Screen as shown in the figure.

PrptyChdLS5.gif

Here,

  1. Select the "New Data Screen" template from Screen template panel.
  2. Name the Screen "CreateNewStudent".
  3. Select the Entity for the Screen as Student and Click OK to create the screen.

As we are going to display some options depending on the selection of our Choice List, we need make some changes in the screen design.

PrptyChdLS6.gif

When the screen is displayed, the Diploma percentage text box will be invisible by default. So we need to make that invisible.

Here,

  1. Open the Screen Designer. Select the Diploma Percentage control and go to the Property window.
  2. In Property window, uncheck the Is Visible property to make the control invisible by default.

Make a group with two properties "DiplomaPercentage" and "HSSPercentage".

PrptyChdLS7.gif

Here, to add the Group,

  1. Select the Root Screen Element called "Student Property"
  2. Press the "Add" dropdown like button.
  3. Select the "New Group" option from the dropdown list.

The Complete Screen Tree:

PrptyChdLS8.gif

The above figure shows the complete screen design.

The Code-Behind:

To handle the property changed event, we need to go for the code behind.

To add the code for handle the property changed event, we need to open the "CreateNewStudent" class as shown the figure given below.

PrptyChdLS9.gif

Here,

  1. In the Screen Designer, Click on the "Write Code" dropdown list which is on the top.
  2. Select the CreateNewStudent_Created option. This method will be executed just after the screen is displayed.

Handling the Event:

The below screen shot shows the way in which we have handled the property changed event.

PrptyChdLS10.gif

Here,

  1. In the CreateNewStudent class, we have the CreateNewStudent_Created method. In that method, we cast the entity which is bounded with screen as an INotifyPropertyChanged interface which will give the property changed event. In our application, we have casted the StudentProeprty as INotifyPropertyChanged and defined an event handler.
  2. In the PropertyChanged event handler, the PropertyChangedEventArgs's object has the PropertyName property. Using that property, we can handle the functionality we need.

In our demo application, based on the selection of the choice list, we are going to display the HSSPercentage or DiplomaPercentage controls.

Application in Action:

So we are done. Hit F5 to see the Application in action.

PrptyChdLS11.gif

The above figure shows the Diploma Percentage control on selection of the Lateral Entry option.

The below figure shows the HSS Percentage control on selection of the Regular Entry option.

PrptyChdLS12.gif

Summary:

In this article, we have seen about how to handle the PropertyChanged event in a Visual Studio LightSwitch 2011 application.

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

Article Extensions
Contents added by Fabian Gorozabel on Apr 26, 2013
Muy Buena
Contents added by shreedhar Deshwal on Sep 30, 2011
Nice Example thanks a lot.
COMMENT USING

Trending up