Create a Custom Form with SharePoint Designer 2007 to Add and Edit SharePoint List Data

We’re going to use a Custom Data View web part in SharePoint Designer 2007 (SPD) to build a form which creates and edits SharePoint List Data. First, let’s start by creating a form which adds new items to a list. We will assume you are going to use an OOTB page layout with web part zones on a page that has already been created already. For this lesson, I have created a new page on my home site, named it Test.aspx, and chose the "(Welcome Page) Blank Web Part Page" page layout.

Create a Form to Add New Items to a SharePoint List

1. Open SharePoint Designer
2. Open Your Site
3. Browse to test.aspx
4. Right-click on you page and choose "Check-out"
5. Right-click again and choose "Detach from Page Layout" and click yes when the dialog box opens up.
6. Another dialog box opens up which says we're good to go.
7. Now double-click your ASPX page to view the page.
8. Select the web part zone you wish to work in (I chose the header zone).
9. Go to the Data View menu and choose "Insert Data View". This will automatically display the Data Source Library pane on the top right with all of the SharePoint lists available on the site.
10. Click on the Task List drop down menu and select the Show Data option
11. For our new form items we’re going to select Title, Assigned to, and Due date.
    
1. Note: the order you select your data field matters because this is the default order that the elements get placed in your form.
12. Scroll back up to the top of the Data Source Details panel and click Insert Selected Fields As option and select “New Item Form”
    
1. Notice how “Title” is automatically shown as being required.
2. “Assigned To” is automatically shown as a user selection.
3. Due Date is a date/time field automatically set by SharePoint, but this can be overridden.
4. This is because your fields will respect their preconfigured settings.

But what if you made a mistake and need to change the order of your fields? Simple… we can do that any time. To change the layout of the form and move elements, you:

13. Select your element.
14. Click on the arrow in the top-right corner or your DataView web part to open the “Common Data View Tasks” menu and select “Edit Columns”
15. Highlight Due Date
16. Click on the “Move Up” button to change position and click OK.

Now we’re going to edit the data/time format of the Due Date filed.

17. Select the “Due Date” field
18. Open up the “Common FormField Tasks” menu
19. Select the “Format As” and change it to Date Picker.

This allows users to enter in a date and time into your new form.

Create a Form to Edit SharePoint List Items

Now we can use SharePoint Designer to create a form which edits existing items in a SharePoint List. Here are the steps.

1. Add data view web part to a zone
   
1. Select a web part zone you wish your form to live
2. Select the Data View menu > Insert Data View
3. This will automatically display the Data Source Library pane on the top-right with all of the SharePoint lists available on the site.
2. Click on the Task List drop down menu and select the Show Data option.
3. Now select only the Title and Due Date fields.
4. Scroll back up to the top of the Data Source Details panel and click Insert Selected Fields As option and select “Multiple Item Form”

We now see a list of task title and date fields each in edit mode.

Changing the View

What if we need to alter the default view to sort on due date, or group items based on who they are assigned to? Simple.

1. Click on the arrow in the top-right corner or your DataView web part to open the Common DataView Tasks menu and select the Sort and Group link. The Sort and Group dialog box pops up.
2. Now select Assigned To and Due Date and click on the Add button to move them from the left column to the right.
3. In the right, Highlight the Assigned To field and click on the Show Group Header, leave the Expand group by default option selected, and click OK to apply the changes.
4. Click on the arrow in the top-right corner of the Common DataView Tasks menu to collapse it and view your new modified view.
5. Save your changes by either clicking on the save icon or go to File > Save.

Time to Unit Test

As with anything we develop, we’ve reach the point where we will want to test our work.

1. So let’s view our page in the browser by right-clicking on your new page in SPD and select View in Internet Explorer.

Obviously Microsoft designed SPD thinking that IE is the only browser you’d want to view SharePoint with and doesn’t acknowledge a need or want for other browsers. We can now see our page with our new form at the top of the page and our editable custom list view at the bottom. Now lets test and see our form in action.

2. In the title field add a title, pick a due date and time, choose a person to assign your task to, and click Save.

Now when the page refreshes you’d expect to see your new item you added but that isn’t the case. This is a bug if you ask me but easily solved.

3. Click refresh in the browser and we can now see the multiple item form data view updates in the bottom.

For those that are interested, the SharePointGuys created a YouTube video which follows this process. It isn’t the most riveting technical video on YouTube but I tried to follow as much of their process as possible for those that like video tutorials and went into more details. I find it difficult to follow videos sometimes because they tend to move a little fast for beginners, but they get you comfortable with the process. You can view it here:
http://www.youtube.com/watch?v=yHtzKsOwqqQ