For a recent project, I needed to migrate around 70 HTML forms in their current format and serve them up from within SharePoint. These were fairly basic forms that just submitted all their data to email. Obviously, it would have been good to convert these to InfoPath or something else, but we simply didn’t have the time for that. So, I copied the HTML forms to a SharePoint document library and applied some metadata to them. One of the columns contained a multi-line text field where I was capturing the email addresses where the forms were to be submitted to. This would make it so that if the form owner needed to change who it was submitted to, they wouldn’t have to know how to edit the HTML form and look for the value to change, they would just edit the properties of the item in the library. There is a hidden text field in the HTML form that contains the email address so the code that processes the form knows where to send it. Now that the forms were in SharePoint and the email address was stored in the list with the file, I just needed to get the email address from the SharePoint list into the HTML form. jQuery to the rescue! 

So, when the form loads, there is jQuery and JavaScript that uses the built-in SharePoint list web services to get the email address from the column and inject it into the hidden form field. 

I’ll paste in the full code, and then explain what is going on below.

   1:  var $e = jQuery.noConflict();
   2:  $e(document).ready(function () {
   3:      //Get the file name for the list lookup
   4:      var fileName = window.location.pathname.split('/').pop(); 
   6:      //Build the SOAP call and call the web service
   7:      var soapEnv =
   8:          "<soapenv:Envelope xmlns:soapenv=''> \
   9:              <soapenv:Body> \
  10:                   <GetListItems xmlns=''> \
  11:                      <listName>EZForm Templates</listName> \
  12:                      <query><Query xmlns=''><Where><Eq><FieldRef Name='FileLeafRef' /><Value Type='Text'>" + fileName + "</Value></Eq></Where></Query></query> \
  13:                      <viewFields> \
  14:                          <ViewFields> \
  15:                             <FieldRef Name='SendFormTo' /> \
  16:                         </ViewFields> \
  17:                      </viewFields> \
  18:                  </GetListItems> \
  19:              </soapenv:Body> \
  20:          </soapenv:Envelope>";
  21:      $e.ajax({
  22:          url: "http://SITEURL/PATH/TO/WEB/_vti_bin/lists.asmx",
  23:          type: "POST",
  24:          dataType: "xml",
  25:          data: soapEnv,
  26:          contentType: "text/xml; charset=\"utf-8\"",
  27:          success: processSuccess,
  28:          error: function (xhr, ajaxOptions, thrownError) {
  29:              //The lookup failed, so alert the user
  30:              alert("There was a problem loading the form.  Please contact IT or try again later. \n\nDetails: " + thrownError);
  31:          }
  32:      });
  34:      //The lookup succeeded, so write to the textarea if there is a value in the list
  35:      function processSuccess(xData, status) {
  36:          $e(xData).find("z\\:row").each(function() {
  37:              if($e(this).attr("ows_SendFormTo")){
  38:                  $e('#mailto').val($e(this).attr("ows_SendFormTo"));
  39:              }
  40:          });
  41:      }    
  42:  });    

Here is a brief explanation of the Code provided:

Line 4 extracts the filename from the form URL so that we have something to use to look up the email address from the SharePoint list.

Line 7 is building the SOAP envelope and in line 12 I’m building the query using the filename gathered from line 4. FileLeafRef is the internal column name for the filename, so you could substitute your internal column name there if you are referencing a different column in your query.

Line 15 has the name of the column that I am looking up. You could return multiple columns here if needed.

Line 22 would need to be updated to reflect the URL to the site where your list is located.

Lines 28-30 pop an alert to the user if the form was unable to get the list data from SharePoint for some reason. Since this is putting a required value in a hidden form field, the user won’t know it didn’t work until they try to submit the form and it is rejected because there is no send-to address.

Lines 36-37 process the XML file returned by the SharePoint web service. It is going to look through each row that was returned by the query (in my case it can only be one row since I’m querying the filename column) and locate the ows_SendFormTo attribute which is my column value. 

Line 38 takes that value and sets it to be the value of my hidden HTML input field named mailto.

So there is a fairly basic example of looking up SharePoint list data using the SharePoint web services and jQuery. Please ask questions in the comments area of this blog.

For more information regarding this post or C5 Insight's services and solutions, please
contact us.