SharePoint 2010 Display Form Sections Based on URL Querystring Parameters

So how can you display sections of your form based on where the item is in the approval process? Easy, some basic XHTML, a querystring parameter and javascript.

The idea was have an Edit Item List Form that would show or hide sections based on when the item was in the approval process. I started with a very basic New Item List Form which would collect a minimal amount of data then kickoff an approval workflow. The workflow would direct the first approver to an Edit Item List Form through a formatted link which contained a querystring parameter [EditItem.aspx?ItemID=13&Section=1]. The next approver would get an email which would expose the next form section [EditItem.aspx?ItemID=13&Section=2].

To get started create three new publishing pages;  newItem.aspx, editItem.aspx, thankYou.aspx.

1. Add a New Item Dataform Web Part to the newItem.aspx page bound to your list and remove the fields you don’t want. I just wanted a Category, Description and Date to initiate the workflow but the list had about 20 columns used in the process.
2. Add a Edit Item Dataform Web Part to the editItem.aspx page bound to your list.
3. Add parameter binding to the Dataform Web Part to filter the list item (ItemID) for edititem forms so you can get list item you are interested in.
   <ParameterBinding Name="dvt_apos" Location="Postback;Connection"/>
   <ParameterBinding Name="UserID" Location="CAMLVariable" DefaultValue="CurrentUserName"/>
   <ParameterBinding Name="Today" Location="CAMLVariable" DefaultValue="CurrentDate"/>
   <ParameterBinding Name="dvt_startposition" Location="Postback" DefaultValue=""/>
   <ParameterBinding Name="dvt_firstrow" Location="Postback;Connection"/>
   <ParameterBinding Name="dvt_nextpagedata" Location="Postback;Connection"/>
   <ParameterBinding Name="ListID" Location="None" DefaultValue="11439F77-26F8-4E0A-8DF7-2B3BB608D7E9"/>
   <ParameterBinding Name="ItemID" Location="QueryString(ItemID)" DefaultValue="0"/>
4. Format the XSL Template. I used tables with ID’s [id=”s2″] and using inline CSS set initial display to none [style=”display:none; border:0; margin:0; padding:0;”] where the ID controls visibility.

    

    

   <tr>
     <td colspan="2">
       <table id="s1" style="display:none; border:0; margin:0; padding:0;">
         <tr>
           <td width="190px" valign="top" class="ms-formlabel">
             <h3 class="ms-standardheader">First Approval</h3>
           </td>
           <td width="400px" valign="top" class="ms-formbody">
            <SharePoint:FormField runat="server" id="ff13{$Pos}" ControlMode="Edit" FieldName="First_x0020_Approval" ItemId="{@ID}" __designer:bind="{ddwrt:DataBind('u',concat('ff13',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@First_x0020_Approval')}"/>
            <SharePoint:FieldDescription runat="server" id="ff13description{$Pos}" FieldName="First_x0020_Approval" ControlMode="Edit"/>
          </td>
         </tr>
       </table>
       <table id="s2" style="display:none; border:0; margin:0; padding:0;">
         <tr>
           <td width="190px" valign="top" class="ms-formlabel">
             <h3 class="ms-standardheader">Final Approval</h3>
           </td>
           <td width="400px" valign="top" class="ms-formbody">
             <SharePoint:FormField runat="server" id="ff14{$Pos}" ControlMode="Edit" FieldName="Final_x0020_Approval" ItemId="{@ID}" __designer:bind="{ddwrt:DataBind('u',concat('ff14',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Final_x0020_Approval')}"/>
           </td>
         </tr>
         <tr>
           <td width="190px" valign="top" class="ms-formlabel">
             <h3 class="ms-standardheader">Status</h3>
           </td>
           <td width="400px" valign="top" class="ms-formbody">
             <SharePoint:FormField runat="server" id="ff15{$Pos}" ControlMode="Edit" FieldName="Status" ItemId="{@ID}" __designer:bind="{ddwrt:DataBind('u',concat('ff15',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Status')}"/>
           </td>
         </tr>
       </table>
     </td>
   </tr>

5. Add a Content Editor Web Part above the Dataform Web Part on the page that contains the following javascript.

    

    

   <script type="text/javascript" language="javascript">
           function myCheckQueryStr() {
               var qs = '&' + (document.location + '?').split('?')[1];
   
               if (qs.match(/&Section=1/)) {
                   document.getElementById("s1").style.display = '';
               }            
               if (qs.match(/&Section=2/)) {
                   document.getElementById("s1").style.display = '';
                   document.getElementById("s2").style.display = '';
               } 
           }
   
           function addLoadEvent(func) {
               var oldonload = window.onload;
               if (typeof window.onload != 'function') {
                   window.onload = func;
               } else {
                   window.onload = function () {
                       oldonload();
                       func();
                   }
               }
           }
           addLoadEvent(myCheckQueryStr);
   </script>

In your workflow the links would look something like this:

• http://intra/web/Pages/EditItem.aspx?ItemID=13&Section=1
• http://intra/web/Pages/EditItem.aspx?ItemID=13&Section=2