SharePoint: Modifying the “Respond to this Survey” Prompt

 

I had a recent request to change a survey’s “Respond to this Survey” text. Here’s two ways to do it, plus the “detective work” on how to do these kinds of changes.

 

If you just want the JavaScript solution then go ahead and scroll down to the end.

 

Solution 1: Don’t change it!

If your goal is to give the user a better way to start a survey, then just give them a direct link from Quick Launch, an Announcement or even an email. The “Respond to this Survey” button is just a link to the “Newform.aspx” for the survey and all you need to do is copy it. Here’s what the links look like:

SharePoint 2007 link:

  http://yourserver/sites/yoursite/Lists/Survey%201/NewForm.aspx?Source=http%3A%2F%2Fyourserver%2Fsites%2Fyoursite%2FLists%2FSurvey%25201%2Foverview%2Easpx

SharePoint 2010 link:

  http://yourserver/sites/yoursite/Lists/Test%20Survey/NewForm.aspx?IsDlg=1

 

Both of these give some interesting hints as to cool things you can do with these links:

• Redirect to another page on completion: In both 2007 and 2010 you can add “?Source=” and specify a page to go to after the survey has been completed. The destination (Source) could be the survey home page, the site’s home page or a custom “Thank you” page.
   
• Open the survey in a in a popup dialog box:  In SharePoint 2010 you can add “?IsDlg=1” to the URL to open the survey formatted for a dialog box (more info below). Without this, the survey will be displayed as a normal SharePoint page.
   
• Note: You cannot use both “Source=” and “IsDlg” in the same URL as the user will just be redirected to a blank page.

To discover these links, just go to your survey and click “Respond to this Survey”. In SharePoint 2007 just copy the URL at the top of the browser. In SharePoint 2010, right-click inside of the dialog box and click Properties. From there you can copy the URL.

Now go to Quick Launch (Site Actions, Site Settings), a new Announcement, a new email, etc and paste the URL.

 

Adding to Quick Launch:

Here’s an example of using the link in Quick Launch. In the following example the URL will send them back to the home page after the survey has been completed:

http://yourserver/sites/yoursite/Lists/Survey%201/NewForm.aspx?Source=http://yourserver/sites/yoursite

As displayed in Quick Launch:

SharePoint 2010 and “IsDlg=1”

“IsDlg=1” alone is not enough to open a popup dialog box. “IsDlg=1” actually is an instruction to hide the master page content!  So if you want to display just the survey and only the survey, add “IsDlg=1” to the URL.

Without “IsDlg=1”

With “IsDlg=1”   (no Title, ribbon, Quick Launch, etc)

I’ll add an item to my “Blog To-Do” on show to actually display a page in a dialog box. (or you can just google/bing it!)

 

 

Solution 2: Change the “Respond to this Survey” text

Now for some detective work… Go to your survey page (overview.aspx). Right-click the page and select your browser’s “View Source” option. Search the displayed text for “Respond to this Survey”.

SharePoint 2010:  (I replaced parts of the JavaScript with “…”)

<a
id="ctl00_m_g_e2a6c7f0_8d5e_46a4_985f_8d175bfc5b24_ctl01_ctl00_toolBarTbl_RptControls_ctl00_diidIONewItem" 
accesskey="N" title="Respond to this Survey" 
onclick="javascript:NewItem2(event, ' ... ');return false;" 
href="javascript:__doPostBack('  ...  ','');">
  <img align='absmiddle' alt="Respond to this Survey" 
           src="/_layouts/images/NewItem.gif" style='border-width:0px;' />
   &#160;
  <span class="ms-splinkbutton-text">Respond to this Survey</span>
</a>

SharePoint 2007:

<a id="ctl00_m_g_bcf319ff_0b26_4f28_b8d3_70cbf4e8152a_ctl00_ctl00_toolBarTbl_RptControls_ctl00_diidIONewItem" 
accesskey="N" title="Respond to this Survey" 
onclick="javascript:NewItem(' ... ');return false;" 
href="javascript:__doPostBack(' ... ','');">
<img align='absmiddle' alt="Respond to this Survey" 
         src="/_layouts/images/NewItem.gif" style='border-width:0px;'>
  &nbsp;Respond to this Survey
</a>

 

Just enough difference to be a nuisance! But note that in both we have three copies of “Respond to this Survey” to change. One in the A tag, one in the IMG tag and one at the end of the A tag (and for 2010, inside a SPAN tag).

Now for some detective work:

So how do we find the one A tag out of all of the HTML on this page? I never depend on IDs with lots of strange characters (they tend to change from page to page) so that leaves out the normal best solution:  document.getElementById(“ctl00 ….. “). We could just loop through the A tags looking for one with a title of “Respond to this Survey”. And that will work fine, but as a best practice we may want this to work regardless of the language settings used to create the site.

So I see two other useful possibilities, find A tags with an ID that ends with “IONewItem” or find IMG tags that have ‘src="/_layouts/images/NewItem.gif"’. I’m going to use the first of these two.

 

So first let’s find the A tag: 

var atags = document.getElementsByTagName("A");
for (var i=0;i<atags.length;i++)
{
  if (atags[i].id.indexOf("IONewItem")>0)
  {
    // make text changes here...
  }
}

Now let’s change the text:

The first change is easy. As we already have found the “A” tag (atags[i]) all we need to is change the title property:

var newsurveytext = "Click here for the survey!";
atags[i].title = newsurveytext;

The second change is not too hard… The A tag contains two or three child nodes and the first one is the image. All we need to do to it is change the ALT attribute:

atags[i].childNodes[0].alt = newsurveytext;

We need to be careful with the next part as we want it to work in both 2007 and 2010. As 2007 has two nodes (IMG and the text) and 2010 has three nodes (the IMG, the “ ” text and the SPAN) we just need to check the count of nodes to make the correct edit for each version:

if (atags[i].childNodes.length == 2)
{
  // must be 2007  ("\u00A0" is to replace the  )
  atags[i].childNodes[1].nodeValue = "\u00A0" + newsurveytext;
}
else
{
  // must be 2010 (and we hope the next version!)
  atags[i].childNodes[2].innerText = newsurveytext;
}

 

So here’s the final solution:

<script>

var atags = document.getElementsByTagName("A");
for (var i=0;i<atags.length;i++)
{
  if (atags[i].id.indexOf("IONewItem")>0)
  {
    var newsurveytext = "Click here for the survey!";
    atags[i].title = newsurveytext;
    atags[i].childNodes[0].alt = newsurveytext;
    if (atags[i].childNodes.length == 2)
    {
      // must be 2007  ("\u00A0" is to replace the &nbsp;)
      atags[i].childNodes[1].nodeValue = "\u00A0" + newsurveytext;
    }
    else
    {
      // must be 2010 (and we hope the next version!)
      atags[i].childNodes[2].innerText = newsurveytext;
    }
    break;  // no need to check the other A tags
  }
}

</script>

 

To add the JavaScript to SharePoint 2007

1. Go to the survey page (overview.aspx)
2. Click Site Actions and Edit Page
3. Click Add a Web Part and select the Content Editor Web Part
4. Move the Content Editor Web Part below the existing survey web part (important!)
5. Edit the Content Editor Web Part and click the Source Editor button
6. Copy and Paste the JavaScript above, changing the “newsurveytext” to your text
7. Save and test

Or… edit the page (overview.aspx) in SharePoint Designer and add the JavaScript just be for the closing tag for the placeholder named “PlaceHolderMain”.

To add the JavaScript to SharePoint 2010

1. Open Notepad, Copy and paste the JavaScript above, changing the “newsurveytext” to your text
2. Save the file to a local drive
3. Upload the file to a SharePoint library (while Shared Document will do, you may want a add a library just for these kinds of files)
4. Go to the library where you just uploaded the file and copy the URL to the file (right-click the file and click Properties to find the URL)
5. Go to the survey page (overview.aspx)
6. Click Site Actions and Edit Page
7. Click Add a Web Part and select the Content Editor Web Part
8. Move the Content Editor Web Part below the existing survey web part (important!)
9. Edit the Content Editor Web Part and paste the URL to the JavaScript file into the Content Link box
10. Save and test

Or… edit the page (overview.aspx) in SharePoint Designer and add the JavaScript just be for the closing tag for the placeholder named “PlaceHolderMain”.

 

.