Creating a Custom Add or Edit Dialog (Sheel Shah)

Public Sub New (ByVal visualCollection As Microsoft.LightSwitch.Client.IVisualCollection, 

                    ByVal dialogName As String)

        _screen = visualCollection.Screen

        _collection = visualCollection

        _dialogName = dialogName

    End Sub

    Public Sub InitializeUI()

            'This code may not work in Beta 2.  Fixed in final release.  

    
        AddHandler _screen.FindControl(_dialogName).ControlAvailable, 

            Sub(sender As Object, e As ControlAvailableEventArgs)

                Dim childWindow As System.Windows.Controls.ChildWindow = e.Control

         AddHandler childWindow.Closed, 
                    Sub(s1 As Object, e1 As EventArgs)

                        If _entity IsNot Nothing Then

          DirectCast(_entity.Details, IEditableObject).CancelEdit()

                        End If

                    End Sub

            End Sub

    End Sub

    Public Function CanEditSelected() As Boolean

        Return _collection.CanEdit() AndAlso (Not _collection.SelectedItem Is Nothing)

    End Function

        Public Function CanAdd() As Boolean

            Return _collection.CanAddNew()

        End Function

        Public Sub AddEntity()

            _isEditing = False

            _collection.AddNew()

            _screen.FindControl(_dialogName).DisplayName = "Add " + 
                 _collection.Details.GetModel.ElementType.Name

            BaseOpenDialog()

        End Sub

        Public Sub EditSelectedEntity()

            _isEditing = True

            _screen.FindControl(_dialogName).DisplayName = "Edit " + 
                 _collection.Details.GetModel.ElementType.Name

            BaseOpenDialog()

        End Sub

        Private Sub BaseOpenDialog()

            _entity = _collection.SelectedItem()

            If _entity IsNot Nothing Then
               Dispatchers.Main.Invoke(Sub()

                   DirectCast(_entity.Details, IEditableObject).EndEdit()

   DirectCast(_entity.Details, IEditableObject).BeginEdit()

                End Sub)

                _screen.OpenModalWindow(_dialogName)

            End If

        End Sub

        Public Sub DialogOk()

            If _entity IsNot Nothing Then
              Dispatchers.Main.Invoke(Sub()

                   DirectCast(_entity.Details, IEditableObject).EndEdit()

              End Sub)

         _screen.CloseModalWindow(_dialogName)

            End If

        End Sub

        Public Sub DialogCancel()

            If _entity IsNot Nothing Then

                Dispatchers.Main.Invoke(Sub()

                     DirectCast(_entity.Details, IEditableObject).CancelEdit()

                End Sub)

                If _isEditing = False Then

                    _entity.Delete()

                End If

                _screen.CloseModalWindow(_dialogName)

            End If

        End Sub
End Class

Using the Helper Class

First, we'll need to add the class to our project.  Right click on the application in the solution explorer and select "View Application Code (Client)".   Paste the code from above beneath the Application class.    This will also require importing the Microsoft.LightSwitch.Threading namespace.

Imports Microsoft.LightSwitch.Threading

Namespace LightSwitchApplication

    Public Class Application

    End Class

    Public Class DialogHelper

        'Code from above

    End Class

End Namespace

This helper library requires a reference to an additional library.  Select the application in Solution Explorer and switch to File View.   Right click on the Client application and select "Add Reference".   Select the "System.Windows.Controls" component and press Ok.

On our existing grid screen for Customer, we'll need to initialize and use this helper class.  The code for many of our existing methods is replaced by calls to the helper class.  The final code for our screen is shown below.

Public Class EditableCustomersGrid

    Private customersDialogHelper As DialogHelper

    Private Sub EditableCustomersGridOld_InitializeDataWorkspace(
               saveChangesTo As System.Collections.Generic.List(Of Microsoft.LightSwitch.IDataService))

            customersDialogHelper = New DialogHelper(Me.Customers, "CustomerEditDialog")

    End Sub

        Private Sub EditableCustomersGridOld_Created()

            customersDialogHelper.InitializeUI()

        End Sub

        Private Sub gridAddAndEditNew_CanExecute(ByRef result As Boolean)

            result = customersDialogHelper.CanAdd()

        End Sub

        Private Sub gridAddAndEditNew_Execute()

            customersDialogHelper.AddEntity()

        End Sub

        Private Sub gridEditSelected_CanExecute(ByRef result As Boolean)

            result = customersDialogHelper.CanEditSelected()

        End Sub

        Private Sub gridEditSelected_Execute()

            customersDialogHelper.EditSelectedEntity()

        End Sub

        Private Sub EditDialogOk_Execute()

            customersDialogHelper.DialogOk()

        End Sub

        Private Sub EditDialogCancel_Execute()

            customersDialogHelper.DialogCancel()

        End Sub

 End Class

Run the Application

Run the application again.  Click on the "Add" button for the grid.  This will open our modal dialog with the title appropriately updated.  If we click on the "Cancel" button, the newly added record will be removed.  Similarly,  if a record is being edited and "Cancel" is clicked, the changes will be reverted.

While a little involved, this technique can be applied to any of your other screens.  If you have more than one list on a screen, multiple custom dialogs can be added.   The DialogHelper class utilizes some of the more advanced API options available within LightSwitch.  We’re also planning on wrapping this sample into a screen template that will automatically generate the modal window and code that is needed.

- Sheel