Passing Parameter to Screen in LightSwitch Beta 2



Prologue:

My previous article described how to get the selected item from ListView and how to programmatically delete the selected item permanently in LightSwitch Beta 2. Today we shall see how to display a screen with records retrieved from a database based on the parameter passed to the screen.

Need of passing parameter to Screen:

When we need to display a particular set of records to the user at the start-up of a screen then we have to use a parameterized query in the screen.
Let us consider, we have two screens in which one is used to display the single value [summary property] on selecting that it will display the other screen with the details of the selected single value.

To demonstrate this, we shall create a demo LightSwitch Desktop application.

Preparing the Solution:

Fire up the VS 2010; create a LightSwitch Desktop application with the name "PassingParameterToScreenInLSBeta2" as shown in the figure.

PPLS1.gif

Follow the No: # to create the Desktop LightSwitch application.

The Entity Designer:

Let us create a Table.

PPLS2.gif

This is a new screen of Beta 2 which is not available in Beta 1. Select the rounded option to create a new table.

After clicking on the "Create new table" option, the Entity Designer will be displayed to create the Entity required. In this demo application we create the table called "Person".

PPLS3.gif

To change the Table name simply click on the Header of the Entity Designer and give the new name.

Screens to application:

For the demo application we need to create three screens.

  1. CreateNewPerson - to create a person record.
  2. StatesListDetails - to display the states.
  3. PeopleListDetailsBasedOnState - Based on selection of a state, the People details will be displayed for the selected state.

Adding New Data Screen:
PPLS4.gif

To add new data screen:
  1. Select "New Data Screen" template from Screen template panel.
  2. Select the "Person" entity as Screen Data.
  3. Click OK to proceed.

Adding StatesListDetails Screen:

This screen is based on the "List and Details Screen" template.

PPLS5.gif

Here:
  1. Select the "List and Details Screen" template.
  2. Name it as "StatesListDetails".
  3. Select the "Person Details" as Screen Data.
  4. Click OK to proceed.

This is the screen which lists all the States. To display only the state value to the user we need to change the screen layout somewhat.
PPLS6.gif

Here:
  1. Delete the "Add", "Edit" and "Delete" buttons. Because we don't need to add or edit or delete the states.
  2. Change the Layout. We have changed from Column layout to Rows layout.
  3. Delete all the fields except "State". Because we don't want to show all the fields except state.
  4. Delete the "Details Column". Of course we don't need to display the details too.

Add a new button to the screen and name it "GetPeopleListFromState".

PPLS7.gif

PPLS8.gif

Change some properties so that the screen will appear in the middle of the application.

PPLS9.gif

Before editing the button method, we have to create a screen which accepts the parameter.

Adding "PeopleListDetailsBasedOnState" Screen:

This is the screen which accepts the parameter passed from other screens. To display the records based on the passed parameter, we need to create a screen based query which has the criteria that looks for a parameter.

PPLS10.gif

Follow the No: # to create the screen.

Creating Screen Based Query:

We have discussed about this in one of my previous articles. Please read that article to know about Screen Based query.

PPLS11.gif

Create a query as shown in the figure. Select Parameter from dropdownlist and Click on "Add New..." to create a parameter.

PPLS12.gif

After clicking on "Add New..." we wil see a parameter created in the parameter section. Just change the name to "StateName".

Creating Screen Parameter:

To add the Screen parameter, Click on the "Add Data Item..." from the top of the query designer.

PPLS13.gif

Then change the Select the "Local Property" option and change the Property name to "StateName".

PPLS14.gif

Make sure the property we created is a screen parameter.

PPLS15.gif

In the StateName property, select the "Is Parameter" check box so that LightSwitch makes the screen as a parameterised screen.

PPLS16.gif

As shown in the figure now we can see two parameters in the People entity details panel.

The StateName property which is highlighted in yellow color is a Query parameter and the brown color is a Screen parameter.

Hooking the Properties:

We have the screen and query parameter here. To pass the value to query parameter which is passed to screen parameter from other screens, we need to hook the Screen parameter with query parameter.

PPLS17.gif

Select the Query parameter, go to the property page; simply click on the "Parameter Binding" text box; we will have a dropdownlist. Select "StateName" from the list.

PPLS18.gif

Make sure the parameters are hooked. See the People entity panel; a line will be drawn from the Query parameter to Screen parameter.

Passing Parameter to Screen:

PPLS19.gif

The highlighted part shows you the state value which is going to the "PeopleListDetailsBasedOnState" screen as parameter.
That's it! We have done.

Press F5 to see the application in action.

Application in Action:

PPLS20.gif

Add some records using the Create New Person screen.

PPLS21.gif

Here:
  1. Select any one item from list view. We have selected TN State.
  2. Click on the "Get People List From State" to get the details of the persons who are based on TN.

    PPLS22.gif

As we have selected the TN value is passed to as a parameter to the screen.

PPLS23.gif

After clicking on the button, we will be directed to the list and details page of the people who are in TN.

Summary:

In this article, we have seen how to pass the parameter to a screen in a LightSwitch application.

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

Thanks.


Similar Articles