LightSwitch – Add non existent records using AutoCompleteBox

Overview of Article

The LightSwitch AutoCompleteBox allows you select records using a dropdown list or to enter some text into the control. Typing into the AutoCompleteBox filters down the selectable records.

If a non existent record entered, it’s likely that a new record is required based upon the entered text. 

The following example uses a set of Customer and Category tables. A Customer belongs to a Category and the following sample demonstrates a ‘New Data Screen’ for creating a new Customer. The screen contains an AutoCompleteBox which allows a category to be selected. If a non existent category is typed in, the user will be prompted to save the new category prior to saving the customer record.

Data

The following screenshots illustrate the schema of our tables. A ‘zero or one’ to many relationship has been set up between the Category and Customer tables.

 

Fig 1 – Category table schema

Fig 2 – Customer table schema

Fig 3 – Relationship between the 2 tables

Screens

Here are the steps to create our ‘Customer’ screen.

1. Create a new ‘Editable Grid Screen’ for entering in some Category details
2. Create a ‘New Data Screen’ based upon the Customer table
3. In order to programmatically access the AutoCompleteBox, we need to add a reference to System.Windows.Controls.Input in the client project. To do this, switch to ‘File Mode’ in solution explorer.
   
   Fig 4 Switch to File View in Solution Explorer

4. Right click the  ‘Client’ folder and click ‘Add Reference’. Select System.Windows.Controls.Input
   
   Fig 4 Add a reference to System.Windows.Controls.Input

5. We need to write some code to handle the LostFocus event of the AutoCompleteBox. However, this can only be done when the AutoCompleteBox becomes available. We therefore need to write an event handler for the ‘ControlAvailable’ event and to add the handler for the LostFocus event there. Click on the ‘Write Code’ button and click and select the ‘CreateNewCustomer_Created’ event. Add the following code:

   Private Sub CreateNewCustomer_Created()
       AddHandler Me.FindControl("Category").ControlAvailable, AddressOf CategoryFieldAvailable
   End Sub
   
   Private Sub CategoryFieldAvailable(sender As Object, e As ControlAvailableEventArgs)
       AddHandler CType(e.Control, System.Windows.Controls.Control).LostFocus, AddressOf CategoryFieldChanged
   End Sub
   
   Private Sub CategoryFieldChanged(sender As Object, e As System.Windows.RoutedEventArgs)
   
       'Add a reference to System.Windows.Controls.Input.dll in the Client project
       Dim txtComboText As String = CType(sender, System.Windows.Controls.AutoCompleteBox).Text
       Me.Details.Dispatcher.BeginInvoke(
           Sub()
               If txtComboText <> "" Then
                   Dim selectedCategory As Category = Me.DataWorkspace.ApplicationData.Categories.Where(Function(Category) Category.CategoryName = txtComboText).FirstOrDefault
                   If selectedCategory Is Nothing Then
                       'Category doesn't exists
                       If Me.ShowMessageBox("Do you want to add the category " & txtComboText & "?", "Add Category", MessageBoxOption.YesNo) = Windows.MessageBoxResult.Yes Then
                           selectedCategory = Me.DataWorkspace.ApplicationData.Categories.AddNew()
                           selectedCategory.CategoryName = txtComboText
                           Me.CustomerProperty.Category = selectedCategory
                       End If
                   End If
               End If
           End Sub)
   
   End Sub
   

   Here’s how the C# equivalent looks like:

   private void CreateNewCustomer_Created()
   {
       this.FindControl("Category").ControlAvailable += CategoryFieldAvailable;
   }
   
   private void CategoryFieldAvailable(object sender, ControlAvailableEventArgs e)
   {
       ((System.Windows.Controls.Control)e.Control).LostFocus += CategoryFieldChanged;
   }
   
   
   private void CategoryFieldChanged(object sender, System.Windows.RoutedEventArgs e)
   {
       //Add a reference to System.Windows.Controls.Input.dll in the Client project
       string txtComboText = ((System.Windows.Controls.AutoCompleteBox)sender).Text;
       this.Details.Dispatcher.BeginInvoke(() =>
       {
           if (!string.IsNullOrEmpty(txtComboText)) {
               Category selectedCategory = this.DataWorkspace.ApplicationData.Categories.Where(Category => Category.CategoryName == txtComboText).FirstOrDefault;
               if (selectedCategory == null) {
                   //Category doesn't exists
                   if (this.ShowMessageBox("Do you want to add the category " + txtComboText + "?", "Add Category", MessageBoxOption.YesNo) == System.Windows.MessageBoxResult.Yes) {
                       selectedCategory = this.DataWorkspace.ApplicationData.Categories.AddNew();
                       selectedCategory.CategoryName = txtComboText;
                       this.CustomerProperty.Category = selectedCategory;
                   }
               }
           }
       });
   
   }
   
   

   In the above code, we obtain the text that has been entered using the ‘Text’ property of the AutoCompleteBox. If the text is not empty, we attempt to look up the Category in the Category table. If the Category isn’t found, we use ‘ShowMessageBox’ to prompt the user to save the new Category. After the new Category is saved, we set the Category property on the Customer entity equal to the Category which has just been created.

6. Now run the application. Here are some illustrations showing the application in action. We begin by having just a ‘High Risk’ Category in the database.

   

   In the ‘Create New Customer’ form, we enter a Firstname, Surname and type ‘Low Risk’ into the Category AutoCompleteBox. When we leave the Category AutoCompleteBox, the following dialog appears.

   

   If we click ‘Yes’, the Customer record is saved into the database. If we now return to the Category screen, we see that the ‘Low Risk’ category has also been added into the database.

   

 

Conclusion

This article illustrates how records can be added using an AutoCompleteBox. The sample solution could benefit from some refinement but highlights various principles required in order to put together a working screen.

The example solution can be downloaded from the following link.

http://cid-7a042700ee409d7b.office.live.com/self.aspx/LightswitchFiles/CustomerCategory3.zip

 

Technorati Tags: LightSwitch,AutoCompleteBox add new records