SharePoint Form Field

If you are building custom forms for SharePoint and are having trouble figuring out how to put a specific type of SharePoint control on the page, like controls that are more complex than a simple textbox (e.g. a People Picker control), then you can always default to using the SharePoint Form Field.  The SharePoint Form Field will automatically generate the type of control needed for the type of SharePoint column that you are binding the control to. 

For example, if you are binding to a People Picker column and you use a “<SharePoint:FormField/>” to bind to that column, then all of the needed controls will be added to the form (i.e. the user input field, the Check Names icon, the Browse icon, the hidden field that will display an error message if the person entered is not found in SharePoint, etc).

So, to use it you will add something like this to your aspx page:

<SharePoint:FormField runat="server" id="MyFormField" FieldName="Manager" ControlMode="New" ListId="6959d5d7-fc32-4b0c-a826-8a0931178a6c" Value='<%# Bind("Manager") %>’ />

To quickly break this control down:

  • FieldName—this is what tells the Form Field which field to generate a control for
  • ControlMode—this tells the Form Field if it is going to be inserting, updating, or displaying for the field in "FieldName".  The options are New, Edit, and Display.
  • ListId—this is the GUID for the list that the field is located in
  • Value—in our scenario, this is where we tell the control what to do with its value.  In this case, we are sending it to the “Manager” column in our list.

One thing to consider when using these controls is that they may not automatically look exactly as expected because the css styles normally seen for these controls are not automatically used on a customized form.  What I have done to overcome this is to use a tool such as the IE Developer Toolbar or Firebug to discover what css classes are used for these particular controls on a page where they are already in use and then adding those css styles to my form.  You can customize these styles however you would like of course, or search for the actual core.css styles and copy/paste them into your form.  Hope this saves you some time!

Leave a comment

3 Comments

  1. Ivan

     /  January 17, 2012

    Thanks, very good explained.

    Reply
  2. cody

     /  September 23, 2013

    This information helped me out a ton. I spent a lot of time looking around the web for a proper explanation of how to use the Value attribute of the formfield tag, and this was the first place I found information about it that didn’t include the words “javascript” or “jquery.” You are a gentleman and a scholar.

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: