Jun 14

Written by: Richard Waddell
6/14/2011 10:17 AM 

The default Add and Edit screens generated by LightSwitch often don’t allow the control you need to meet the business requirements.  Consider the scenario where an entity must have a password column.  Ideally we’d want the ‘Add’ screen to look something like this:

The default Add and Edit screens are inadequate for two reasons.

• No masked password text box
• A second password text box is required for matching, requiring a property that doesn’t map to the entity.

Fortunately, it’s easy to supply your own custom Add and Edit screens, and often a single screen can serve as both. Unfortunately there’s no way to display the screen modally, so when the user clicks the 'Add’ button they are taken to a new tabbed screen. On completion control returns to the original screen, but it’s not the ideal user experience.

Fortunately it’s possible to supply a modal window, unfortunately it takes a little more work than just creating a screen, but not as much as you might think. Thanks to Michael Washington for the Modal Window stuff.

I’m going to take you through the steps required to create the modal window you see above for adding an entity and one for editing. I wouldn’t be surprised if you could use one window for both, but let’s keep it simple for now.

Create The Subscriber Entity and Screen

First, create a Subscriber entity with UserName and Password properties:

Create an Editable Grid Screen:

Add A Modal Window Group

A Rows Layout Group is created by default; change it to a Modal Window:

Drag the UserName and Password properties under the Modal Window:

Change the name to AddSubscriber and uncheck the ‘Is Visible’ checkbox.

Add a ReEntered Password Property and Bind to the ReEntered Password TextBox

Click on ‘Add Data Item…’ and add a ReEnteredNewPassword string property that is not required:

Drag the ReEnteredNewPassword property to the Modal Window:

We need a Subscriber for the add screen to use, so add a NewSubscriber property:

Override the Add Button Execute Code

Before we get into binding or custom controls, let’s hook up the Add Button:

 

partial void gridAddAndEditNew_Execute()
{
    this.OpenModalWindow("AddSubscriber");
}

Resulting in:

We’re on the right track. As you probably already suspect, the User Name and Password boxes are grayed-out because the NewSubscriber property is null; we have a property, but no one is home. So we’ll new up the property and initialize the ReEnteredNewPassword property at the same time:

partial void gridAddAndEditNew_Execute()
{
    NewSubscriber = new Subscriber();
    ReEnteredNewPassword = String.Empty;
    this.OpenModalWindow(ADD_SUBSCRIBER_WINDOW);
    this.FindControl(ADD_SUBSCRIBER_WINDOW).ControlAvailable += 
        new EventHandler<ControlAvailableEventArgs>(NewSubscriber_WindowAvailable);
}

Actually, we’re a little ahead of ourselves, but this allows me to point out the value of constants when dealing with Modal Window group names. You’ll be using each one more than twice, as a matter of fact, so it makes sense to create a constant, especially with all this new-fangled binding. Why in my day if it compiled you knew it was good to go.

With just that much code we have a workable Add Subscriber window. As you can dimly see below, the values entered in the New Subscriber window show up in the Subscriber list – our NewSubscriber becomes part of the DataWorkspace Subscriber collection and so is bound to the list just like all the other Subscribers; now it can be saved or deleted just as though we had added it directly to the list.

Formatting

Before moving on, let’s clean up the UI a little bit. This is one of the things that’s so cool about LightSwitch. All you have to do to align the columns is add a Rows Layout group. The trickiest part is clicking the right place with the right button.

Right-click on the little down arrow between ‘Modal Window’ and ‘Add Subscriber’ then click on Add Group:

Resulting in:

Now drag the three controls to the Rows Layout Group and change ReEnteredNewPassword Display Name to ReEnter:

Who’s got a mouse and doesn’t need StackPanels or Grids? This nerd!!!!

Converting to Custom Controls

Ok, on to the PasswordBox Custom Controls. Left-click on the down-arrow between the label icon and ‘Password’ and select Custom Control:

Change the Password Custom Control Custom Control (?) property:

Select System.Windows.Controls.PasswordBox:

Do the same for ReEnteredNewPassword.

If you run this now, you’ll find that the Password boxes are masked, but the binding no longer works; text entered in the Password boxes does not show up in the new row in the list of Subscribers.

Binding the PasswordBox Controls

In the code below I’ve set the binding for all four password boxes, two for Add and two for Edit. Thanks to Tim Leung for the whole masked password and binding thing.

private const string EDIT_SUBSCRIBER_WINDOW = "EditSubscriber";
private const string ADD_SUBSCRIBER_WINDOW = "AddSubscriber";
private const string EDIT_PASSWORD_CONTROL = "EditScreenPassword";
private const string EDIT_PASSWORD_REENTER_CONTROL = "EditScreenReEnterPassword";
private const string NEW_PASSWORD_CONTROL = "AddScreenPassword";
private const string NEW_PASSWORD_REENTER_CONTROL = "AddScreenReEnterPassword";
private const string PASSWORD_MATCH_ERROR_TEMPLATE = "Reentered Password does not match Password in {0}";
partial void EditableSubscribersGrid_Created()
{
    // Bind the four Password properties to the PassWordBox Screen CustomControls
    // Edit Password Box
    IContentItemProxy proxyEditPassword = 
        this.FindControl(EDIT_PASSWORD_CONTROL);
    // WE are binding to the PasswordProperty dependency property of the PassWordBox, 
    proxyEditPassword.SetBinding
        (System.Windows.Controls.PasswordBox.PasswordProperty, 
        "Value", System.Windows.Data.BindingMode.TwoWay);
    // Edit ReEnter Password Box
    IContentItemProxy proxyReEnteredEditPassword = 
        this.FindControl( EDIT_PASSWORD_REENTER_CONTROL);
    proxyReEnteredEditPassword.SetBinding
        (System.Windows.Controls.PasswordBox.PasswordProperty, 
        "Value", System.Windows.Data.BindingMode.TwoWay);
    // New Passowrd Box
    IContentItemProxy proxyNewPassword = 
        this.FindControl(NEW_PASSWORD_CONTROL);
    proxyNewPassword.SetBinding
        (System.Windows.Controls.PasswordBox.PasswordProperty, 
        "Value", System.Windows.Data.BindingMode.TwoWay);
    // New ReEnter Password Box
    IContentItemProxy proxyReEnteredNewPassword = 
        this.FindControl(NEW_PASSWORD_REENTER_CONTROL);
    proxyReEnteredNewPassword.SetBinding
        (System.Windows.Controls.PasswordBox.PasswordProperty, 
        "Value", System.Windows.Data.BindingMode.TwoWay);
}

Formatting At Run Time

If you run the application now you’ll find that you can successfully  add new Subscribers. But the UI needs a little work. Let’s do that at run time so we can experiment without having to re-build the application. To enable this capability, run the application in debug mode by hitting F5. After you click the Add button you’ll see:

The issue is that the Password boxes are unsightly. We can get into design mode by clicking on the ‘Design Screen’ icon on the upper-right corner of the page:

You’ll see something like this.

With some re-sizing and scrolling we can focus on the Sizing properties. Let’s set Horizontal Alignment to Stretch for both Password and ReEnter:

Click on Save and then the Add Button:

Maybe you’d like to size the textboxes to more closely match the likely input. Click on Design Screen, change the Horizontal Alignment back to Left, and set MinWidth to whatever you prefer, I chose 150:

Why, you ask, are the User Name and Password captions bold and ReEnter is not? I have not a clue. The captions are set through the Custom Control Display Name, but I don’t see any setting to affect the font weight. Doesn’t mean it can’t be changed, but I don’t know how to do it.

Validate the Password

Ok, now let’s add some validation, which consists of requiring that the values entered into the Password and ReEnter textboxes match. We already have our ReEnteredNewPassword property and it’s bound to the ReEnter Custom Control so we can go directly to validation

And here’s the code:

partial void ReEnteredNewPassword_Validate(ScreenValidationResultsBuilder results)
{
    if (this.NewSubscriber != null && 
        this.NewSubscriber.Password != null && 
        ReEnteredNewPassword != this.NewSubscriber.Password)
        results.AddPropertyError
            (String.Format(PASSWORD_MATCH_ERROR_TEMPLATE, "New Subscriber"));
}

Pretty straightforward. Now if the entered password values don’t match:

The validation issue will appear as soon as you tab away from Password and remain until you enter a matching value in Re-Enter, which is a bit naggy, but kind of unavoidable given the nature of binding.

Add and Cancel Buttons

This is serviceable, but a bit clumsy in that you can only cancel an add by deleting it from the Subscriber list after you exit the Add Subscriber window. We need Add and Cancel buttons. Right-click where indicated below and select Add Button:

Name it SubmitAdd:

Change the Display Name to ‘Add’. Right-click where indicated below and select ‘Edit Execute Code’:

It turns out all we have to do is close the window. As you saw above, the new Subscriber becomes part of the collection on creation, and remains so unless deleted.

partial void SubmitAdd_Execute()
{
    CloseAddSubscriberWindow();
}
private void CloseAddSubscriberWindow()
{
    this.CloseModalWindow(ADD_SUBSCRIBER_WINDOW);
    this.FindControl(ADD_SUBSCRIBER_WINDOW).IsVisible = false;
}

Notice that although OpenModalWindow sets the control IsVisible property to true, CloseModalWindow does not set it to false. If you don’t set it yourself you see this at the bottom of the page:

Add the Cancel button and the following CanExecute code:

partial void CancelAdd_Execute()
{
    CancelAddSubscriberChanges();
    CloseAddSubscriberWindow();
}
private void CancelAddSubscriberChanges()
{
    foreach (Subscriber subscriber in this.DataWorkspace.ApplicationData.Details.
                                GetChanges().AddedEntities.OfType<Subscriber>())
        subscriber.Details.DiscardChanges();
}

Subscribing to the Modal Window Close Event

That covers the buttons, but what if the user clicks on the little ‘x’ in the upper-right corner. That should be the same as cancel, but as we’ve seen it’s not. We intercept that event by subscribing to the Modal Window close event. That requires a little setup. You saw a preview back when I showed you the Add button event handler:

partial void gridAddAndEditNew_Execute()
{
    NewSubscriber = new Subscriber();
    ReEnteredNewPassword = String.Empty;
    this.OpenModalWindow(ADD_SUBSCRIBER_WINDOW);
    this.FindControl(ADD_SUBSCRIBER_WINDOW).ControlAvailable += 
        new EventHandler<ControlAvailableEventArgs>(NewSubscriber_WindowAvailable);
}

So I’ll transition now to the event handler for the Edit button so we can cover the Edit Modal Window and the close event handling at the same time. The only difference in initialization is that we now have an existing Subscriber to work with.

As to the close event, we don’t have access to the underlying control until the ControlAvailable event, so that’s where we subscribe to the closed event. The nullable ChildWindow.DialogResult property will be null if the window was closed with the ‘x’, so the changes are canceled.

partial void gridEditSelected_Execute()
{
    // The Edit Button has been selected
    ReEnteredEditPassword = this.Subscribers.SelectedItem.Password;
    this.OpenModalWindow(EDIT_SUBSCRIBER_WINDOW);
    // We need to add a Closed event handler to the underlying control which we have access to when we catch the ControlAvailable event
    this.FindControl(EDIT_SUBSCRIBER_WINDOW).ControlAvailable += new EventHandler<ControlAvailableEventArgs>(EditSubscriber_WindowAvailable);
}
void EditSubscriber_WindowAvailable(object sender, ControlAvailableEventArgs e)
{
    this.FindControl(EDIT_SUBSCRIBER_WINDOW).ControlAvailable -= new EventHandler<ControlAvailableEventArgs>(EditSubscriber_WindowAvailable);
    ((ChildWindow)e.Control).Closed += new EventHandler(EditSubscriber_Closed);
}
void EditSubscriber_Closed(object sender, EventArgs e)
{
    ((ChildWindow)sender).Closed -= new EventHandler(EditSubscriber_Closed);
    if (!((ChildWindow)sender).DialogResult.HasValue)
        CancelEditSubscriberChanges();
    CloseEditSubscriberWindow();
}

The validation could use some fine-tuning in that in the ‘Add Subscriber’ window you can ignore the mismatched password warning and click the Add button, which should be disabled. Then you’re stuck with a validation error you can only clear by clicking ‘Refresh’. Same problem if you click the ‘x’ or Cancel button with a mismatched password error showing. 

The Add button is pretty easy to handle.

partial void SubmitAdd_CanExecute(ref bool result)
{
    result = this.NewSubscriber != null &&
        this.NewSubscriber.Password != null &&
        ReEnteredNewPassword == this.NewSubscriber.Password;
}

The ‘x’ and Cancel Button situations where the passwords are mismatched can be handled by setting NewSubscriber to null. This causes the validation code to ignore the mismatch:

private void CancelAddSubscriberChanges()
{
    foreach (Subscriber subscriber in this.DataWorkspace.ApplicationData.Details.
                                GetChanges().AddedEntities.OfType<Subscriber>())
        subscriber.Details.DiscardChanges();
    NewSubscriber = null;
}

And Robert is your Father’s brother!!!

The LightSwitch project is available at http://lightswitchhelpwebsite.com/Downloads.aspx