12 April 2007

Loading Values in a Custom List Form

One of the biggest challenges I've have faced is the development of custom list forms that are able to import values from parameters. In this demonstration, I am going to demonstrate how I was able to accomplish the goal of creating a custom list form that takes in parameters from another list's display form. So, without further delay, let's get started. The scenario that I'm working with may be useful to some of you out there who need to maintain a software library. Our organization stores all software in a central vault and items are signed-in and signed-out by our help desk personnel. Before we begin, we need to create the site and the lists that will be involved in this application. I plan to export this site into a site definition in the future, so a blank slate is a good way to being. We will need to first create a new blank site in SharePoint. Click on View All Site Content > Create > Sites and Workspaces. Give the site a title, and specify the url. Pick the Blank Site template and then click on create. On this new blank site, we need to create two lists. Do this be clicking on View All Content > Create > Custom List. The first list we will call Software Library. Provide a description for the list if you like. Next, we need to create the fields for this list. For simplicity, I will include the primary fields for this item. To create columns for this list, open the list and then click on Actions > List Settings. Under Column, click on Create Column. Here are the columns needed for this list.

  • Title, Required
  • Vendor, Required, Single line of text
  • Operating Systems, Required, Single line of text
  • Serial Number, Single line of text
  • Licenses, Required, Number, Default 1, Min 1
  • Copies, Required, Number, Default 1, Min 1

Now, create a new list called Check Out Log and add the following columns:

  • Title, Uncheck Required
  • Check Out Date, Required, Date and Time, Date Only, Default Today
  • Check Out By, Required, Person or Group, People Only, Multiple Selections: No, All Users, Show Field: Name.
  • Check In Date, Date and Time, Date Only
  • Software, Required, Lookup, Get Information From: Software Library, In This Column: ID

Now we have our basic lists to begin this exercise in SharePoint Designer. So now, open up SharePoint designer and open your site. Next, in the folder list, open DispForm.aspx under the list Software Library.

You will see the default web part used for displaying list item properties. Begin by right-clicking on the web part and choosing web-part properties. Under Layout, check the box for Close the web part. This will cause the web part to be hidden on our custom page.

Now, click below the closed web part and on the menu in SharePoint designer, click Insert > SharePoint Controls > Custom List Form. This will insert our custom list form that we are going to use to link the user to our updated form in the Check Out Log.

Now, in the header of the table type the text Check Out ItemCheck In Item as indicated above. Highlight Check Out Item and then click Insert > Hyperlink.

We need to create a formula to create our URI for the new form. For the address type {concat('../Check Out Log/CheckOut.aspx?SoftwareID=',/dsQueryResponse/Rows/Row/@ID)} and then click OK. This is an XSLT instruction that tells the processor to combine the values enclosed in single quotes. The result of this will be similar to ../Check Out Log/CheckOut.aspx?SoftwareID=1. Notice we are using a relative URL. By using a relative URL, if you have multiple access mappings all of your users will have access to the item no matter where it is located.

Lets do the same thing for Check In Item but enter {concat('../Check Out Log/CheckIn.aspx?SoftwareID=',/dsQueryResponse/Rows/Row/@ID)} for the address.

Most of this was pretty familiar in exploration. The part that I struggled with the most is what follows. Begin by right-clicking on the list Check Out Log and choose New > ASPX. Name the page CheckOut.aspx. You will notice there is nothing listed in this new page and no template has been applied to the page. We will correct this in a moment. Now, open the Data Source Library and right click on Check Out Log. Choose Show Data. You will see a screen with all of the SharePoint fields in this list. Notice there are many more fields than we initially specified on the creation of this list. In the list, click on Check Out Date and then hold down CTRL while clicking on Check Out By and Software. Click the drop down for Insert Selected Fields as and then choose New Item Form. This will create the New Item form we will be using to create new list items. Now we need to create take care of the parameters passed in our URI. If you remember, we created a URI that is similar to the following ../Check Out Log/CheckOut.aspx?SoftwareID=2. We need to instruct our new data view to capture the query string item SoftwareID. Click on the data view and on the menu click Data View > Parameters. Click on New Parameter and provide the name SoftwareID. For parameter source, choose QueryString and then type SoftwareID in the Query String Variable field. If you want, you can specify a default value. Click OK to close the dialog. Now we need to make a modification or two to the host form. Let's begin by associating the form with a master page. Click on Format > Master Page > Attach Master Page. Keep the default values and click OK until the master page is applied. Your page should now look more like your sharepoint site! The next thing we need to do is convert the default List Item Property for Software into a TextBox. To accomplish this, right click on the field and choose Format Item As > TextBox. Now we can handle our parameter we setup earlier. In the Tag Properties Task Pane, locate the Text property and then type {$SoftwareID}. This will set the value in the textbox to the value contained in the SoftwareID query string variable. The only thing left to do is hide the row containing the Software. In the markup bar find the tag for the row containing this control. In the Tag Properties Task Pane, location the style property and type display:none. This will hide our row from the user. Congratulations! We have now loaded a passed value into a custom list form. If you open your sharepoint site and then display the Software Library List. Add a new item and then click on the item in the list to show our customized display form. Click the Check Out Item link and you should see the custom new item form we just created. I know there are still some issues, for example, redirecting the user back to the original list, but this does work and you haven't had to write code. As I improve this technique, I will post my findings.