How to Communicate Across LightSwitch Screens (Sheel Shah)

One of the more common scenarios that we’ve encountered in business applications are data creation screens that involve related data. For example, an end user may be creating a new order record that requires the selection of a customer. In LightSwitch, this involves using a modal picker control. If this customer does not yet exist, the end user may navigate to a different screen to create a customer.

Unfortunately, once the new customer has been added, the modal picker on the new order screen does not automatically refresh. However, we can write some code in our application to get the behavior we want. This involves the following:

Setup the modal picker on our new order screen to use a screen query instead of the automatic query.

Creating an event on our application object that we raise whenever a new customer is added.

Handling the event in our new order screen and refreshing the list of customers.

Setting up the Application

Create a table called ‘Customer’ with the string property called ‘Name’. Create another table called ‘Order’ with a string property called ‘Name’. Create a 1-to-Many relationship between ‘Customer’ and ‘Order’ (each ‘Customer’ has many ‘Orders’).

Define a ‘New Data Screen’ for ‘Order’. The name of this screen should be ‘CreateNewOrder’. On the screen, select ‘Add Data Item…’ and add a query property for ‘Customers’. Name this query ‘CustomerChoices’.

Select the modal picker for ‘Customer’ and in the property sheet, change the ‘Choices’ property to ‘CustomerChoices’. This will set the modal picker to use the ‘CustomerChoices’ query to determine the list of possible customer choices. We can then refresh this query from code when a customer is added.

Define CustomerAdded Event on the Application Object

First, define a ‘New Data Screen’ for ‘Customer’ called ‘CreateNewCustomer’. We now need to navigate to the code file for our application object to add the CustomerAdded event. On your ‘CreateNewCustomer’ select the Write Code dropdown and choose ‘CanRunCreateNewCustomer’. This will navigate to the application code file.

In the application code file define an event called ‘CustomerAdded’ and a method used to raise the event. LightSwitch runs in each screen’s logic in a different thread. The overall application also runs in its own thread. We will need to ensure that the event we define is raised on the correct thread. Since it is an application-wide event, we should ensure that it is raised on the application’s thread. This is covered in the code below.

PublicClassApplication

PublicEvent CustomerAdded()

PublicSub RaiseCustomerAdded()

‘Dispatcher refers to the application’s thread dispatcher

‘Check if we are already in the application’s thread.

‘If not, raise the event on the application’s thread.

IfMe.Details.Dispatcher.CheckAccess() Then

RaiseEvent CustomerAdded()

Else

Me.Details.Dispatcher.BeginInvoke(Sub()

RaiseEvent CustomerAdded()

EndSub)

EndIf

EndSub

EndClass

publicpartialclassApplication

{

publicdelegatevoidRecordAdded();

publiceventRecordAdded CustomerAdded;

publicvoid RaiseCustomerAdded()

{

//Dispatcher refers to the application’s thread dispatcher

//Check if we are already in the application’s thread.

//If not, raise the event on the application’s thread.

if (this.Details.Dispatcher.CheckAccess())

CustomerAdded();

else

this.Details.Dispatcher.BeginInvoke(delegate() {

CustomerAdded();

});

}

}

Raise the CustomerAdded Event from CreateNewCustomer

Navigate to the ‘CreateNewCustomer’ screen. We will need to add code to the Saved method on our screen that triggers the ‘CustomerAdded’ event. Select the write code dropdown and select CreateNewCustomer_Saved.

Modify the existing code to raise the event. This is shown below.

PublicClassCreateNewCustomer

PrivateSub CreateNewCustomer_BeforeDataInitialize()

‘ Write your code here.

Me.CustomerProperty = NewCustomer()

EndSub

PrivateSub CreateNewCustomer_Saved()

‘ Write your code here.

Me.Close(False)

Application.Current.ShowDefaultScreen(Me.CustomerProperty)

Application.RaiseCustomerAdded()

EndSub

EndClass

publicpartialclassCreateNewCustomer

{

partialvoid CreateNewCustomer_BeforeDataInitialize()

{

// Write your code here.

this.CustomerProperty = newCustomer();

}

partialvoid CreateNewCustomer_Saved()

{

// Write your code here.

this.Close(false);

Application.Current.ShowDefaultScreen(this.CustomerProperty);

Application.RaiseCustomerAdded();

}

}

Handle CustomerAdded Event in CreateNewOrder

Navigate to the ‘CreateNewOrder’ screen. We will need to add code that will listen for the ‘CustomerAdded’ event and refresh the ‘CustomerChoices’ query when it is raised. Click on the Write Code button and modify the code as follows.

Test the Application

We can now test our application. Run the application and open the ‘CreateNewOrder’ screen. Enter a name for the order and open the Customer picker. There are no customers added to the system. Now open the ‘CreateNewCustomer’ screen. Enter a new customer and save the screen. Navigate back to the ‘CreateNewOrder’ screen. Open the Customer picker again. The added customer should now be displayed.

The functionality we’ve described can be extended to other scenarios (such as workflow style applications).