How to Communicate Across LightSwitch Screens (Sheel Shah)

How to Communicate Across LightSwitch Screens (Sheel Shah)

Rate This
  • Comments 4

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:

  1. Setup the modal picker on our new order screen to use a screen query instead of the automatic query.
  2. Creating an event on our application object that we raise whenever a new customer is added.
  3. 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’).

image

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’.

image

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.

image

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.

image

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.

    Public Class Application

        Public Event CustomerAdded()

        Public Sub 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 Me.Details.Dispatcher.CheckAccess() Then

                RaiseEvent CustomerAdded()

            Else

                Me.Details.Dispatcher.BeginInvoke(Sub()

                                                      RaiseEvent CustomerAdded()

                                                  End Sub)

            End If

        End Sub

    End Class

 

    public partial class Application

    {

        public delegate void RecordAdded();

        public event RecordAdded CustomerAdded;

       

        public void 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.

image

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

    Public Class CreateNewCustomer

        Private Sub CreateNewCustomer_BeforeDataInitialize()

            ' Write your code here.

            Me.CustomerProperty = New Customer()

        End Sub

 

        Private Sub CreateNewCustomer_Saved()

            ' Write your code here.

            Me.Close(False)

            Application.Current.ShowDefaultScreen(Me.CustomerProperty)

            Application.RaiseCustomerAdded()

        End Sub

 

    End Class

 

    public partial class CreateNewCustomer

    {

        partial void CreateNewCustomer_BeforeDataInitialize()

        {

            // Write your code here.

            this.CustomerProperty = new Customer();

        }

 

        partial void 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.

image

    Public Class CreateNewOrder

        Private Sub CreateNewOrder_BeforeDataInitialize()

            ' Write your code here.

            Me.OrderProperty = New Order()

        End Sub

 

        Private Sub CreateNewOrder_Saved()

            ' Write your code here.

            Me.Close(False)

            Application.Current.ShowDefaultScreen(Me.OrderProperty)

 

            'Need to remove the event handler (prevent memory leaks)

            RemoveHandler Application.CustomerAdded, AddressOf CustomerAdded

        End Sub

 

        Private Sub OrderProperty_Changed()

            'Add an event handler for CustomerAdded event

            AddHandler Application.CustomerAdded, AddressOf CustomerAdded

        End Sub

 

        Private Sub CustomerAdded()

            'CustomerAdded event is raised on the application's thread

            'Run the refresh code in the screen's thread

            Me.Details.Dispatcher.BeginInvoke(Sub()

                                                  Me.CustomerChoices.Refresh()

                                              End Sub)

        End Sub

    End Class

 

    public partial class CreateNewOrder

    {

        partial void CreateNewOrder_BeforeDataInitialize()

        {

            // Write your code here.

            this.OrderProperty = new Order();

        }

 

        partial void CreateNewOrder_Saved()

        {

            // Write your code here.

            this.Close(false);

            Application.Current.ShowDefaultScreen(this.OrderProperty);

 

            //Need to remove the event handler (prevent memory leaks)

            Application.CustomerAdded -= new Application.RecordAdded(CustomerAdded);

        }

 

        partial void OrderProperty_Changed()

        {

            //Add an event handler for the CustomerAdded event

            Application.CustomerAdded += new Application.RecordAdded(CustomerAdded);

        }

 

        private void CustomerAdded()

        {

            //CustomerAdded event is raised on the application's thread

            //Run the refresh code in the screen's thread

            this.Details.Dispatcher.BeginInvoke(delegate()

            {

                this.CustomerChoices.Refresh();

            });

        }

    }

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).

Leave a Comment
  • Please add 7 and 4 and type the answer here:
  • Post
  • Congratulations on such a good job, great and simple. Can not imagine what I've struggled to do the same and in the forum I see too many users have looked for this solution.

    Thank you very much.

  • super et merci pour ton aide depuis plusieurs mois

    Djom

  • Thank you Thank you, this has been a great help.

    Keith

  • Hi,

    How can I do this kind of thing in Light Switch HTML client ?

    Thanks.

Page 1 of 1 (4 items)