Customizing Forms – Part 2 – Adding the Affected User Picker to the Change Request Form

This is a continuation of a series that I started here:

Customizing Forms – Part 1 – Adding a New User Picker Control to the Incident Form

In this example we’ll look at a different scenario a customer brought up.  In this case the goal is to add the Affected User relationship to the Change Request form using a User Picker control bound to the inherited Affected User relationship.

In this case the customer tried to do something similar to the approach used in the first post in this series by adding the control to the stack panel but ended up with this:

clip_image002

The new user picker control was ending up being displayed behind the Description field!

Here is how to make the Title StackPanel bigger so that it will have the additional room required to show the new controls:

First you need to move the Description StackPanel down.  Select the StackPanel around Description.  This is a little hard to grab.  I can get it easiest by clicking just below the textbox. It  should look like this when you have it selected:

clip_image002[5]

Change the Top margin from 5 to something like 45.  This will move it down relative to the Title stack panel:

clip_image004

The next thing you need to do is resize the Title StackPanel so it will show the additional new content you are going to show in there.  So – select the Title StackPanel.

clip_image006

And drag the lower right corner down a bit until it lines up with the top of the Description label:

clip_image008

Now drag and drop the label control into the Title StackPanel as I previously explained making sure you drop it when the gray dotted lines are showing around the stack panel.

clip_image010

Change the label so it says ‘Affected user:’

clip_image012

Now drag and drop the User Picker into the Title StackPanel.  Bind it to the AffectedUser relationship using the BindingPath attribute in the Details pane.  I also set the Top margin to -5 to make it move closer to the label and changed the width to 220 since there is plenty of room there.

In the end you get this in the designer:

clip_image014

And this in the console after importing the MP:

clip_image016

If you have other scenarios you would like me to use as examples in this series please leave them or send me an email.  My email address is twright@YouKnowWhere.com  :)