Last night Bryan Phillips (Microsoft MVP – SharePoint Services) and I co-presented a discussion on a methodology that we have refined for developing custom forms with SharePoint Designer. We had a great time, and want to thank everyone for coming out and participating.
The presentation included a step by step walkthrough of the most efficient and effective ways that we have come up with to quickly develop highly customizable forms for SharePoint using SharePoint Designer 2007. The slide deck is being uploaded to the KYSPUG (Kentucky SharePoint User Group) website—KYSPUG.org. Click Here to download the slide deck OR, Click Here if the first link is not working.
Hope you enjoy! Thanks.
Also, you can check out our company website at www.ComposableSystems.net.
Posted by Jason Graham on June 19, 2009
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!
Posted by Jason Graham on April 10, 2009