7/22/2010

SharePoint: Add Instructions and Color to Surveys

 

Only tested in SharePoint 2007 so far…

 

Survey Instructions

Surveys often need instructions or opening text. Here is a trick that converts a “Single line of text” question into just a page of text. There is one side effect; your “instructions question” will show up in the results as a query that everyone answered as “HIDDEN”. (But you could change the word if you like.)

 

image

Steps:

  1. For each "Instructional Text" needed in the survey add a question to the survey of type “Single line of text”, add your text as the question, and set a default value of "HIDDEN"
     
  2. If you want the instructions on their own page, then add a Page Separator after the instructions item
     
  3. Go to your survey and click “Respond to this Survey” to display the Newform.aspx page
     
  4. Edit the URL to allow access to the web parts:
      append this to the end of the URL for the NewForm.aspx URL:  
                &ToolPaneView=2 
    and press Enter  

    http://yourserver/sites/yoursite/Lists/SurveyTest/NewForm.aspx?Source=.......overview.aspx&ToolPaneView=2
  5. Click “Add a Web Part” and add a Content Editor Web Part
     
  6. Move the Content Editor Web Part below the list web part
     
  7. Edit the web part, click the Source Editor button and add the JavaScript from below
     
  8. Save your changes and go test the survey!
<script>
 // hide the input textbox for the "description" text
 var x = document.getElementsByTagName("INPUT");
 var i=0;
 for (i=0; i<x.length; i++)
 { 
  if (x[i].value=="HIDDEN")
  {
    x[i].style.display="none";
  }
 } 
</script>

Note: If you have a multipage form (you added page separators or branching logic) then you will need to add a web part with the same code as above in the EditForm.aspx page. To get to this page just respond to the survey and click Next. Then to add the web part add &ToolPaneView=2 to the end of the URL.

 

 

Add color to your surveys!

 

Just follow the steps above, but use the following JavaScript instead. Then manually embed your HTML in the text of the question: "This is a survey about <b><i>Important Stuff</i></b>. Please take your time."

<script>
 // Fix tags to allow HTML
 var t = document.getElementsByTagName('table');
 for (var i=0; i<t.length; i++)
 {
   if (t[i].className=='ms-formtable')
   {
     var td = t[i].getElementsByTagName('td');
     for (var j=0;j<td.length;j++)
     {
       if (td[j].innerHTML.indexOf('&lt;') > -1)
       {
         td[j].innerHTML = td[j].innerHTML.replace(/&lt;/g,'<').replace(/&gt;/g,'>'); 
       }
     }
   }
 }
</script>

 

 

Or add instructions and color!

Use both JavaScript routines together:

<script>
 // hide the input textbox for the "description" text
 var x = document.getElementsByTagName("INPUT");
 var i=0;
 for (i=0; i<x.length; i++)
 { 
  if (x[i].value=="HIDDEN")
  {
    x[i].style.display="none";
  }
 } 

 // Fix tags to allow HTML
 var t = document.getElementsByTagName('table');
 for (var i=0; i<t.length; i++)
 {
   if (t[i].className=='ms-formtable')
   {
     var td = t[i].getElementsByTagName('td');
     for (var j=0;j<td.length;j++)
     {
       if (td[j].innerHTML.indexOf('&lt;') > -1)
       {
         td[j].innerHTML = td[j].innerHTML.replace(/&lt;/g,'<').replace(/&gt;/g,'>'); 
       }
     }
   }
 }
</script>

 

.

16 comments:

Jeff said...

Using the technique illustrated here (http://kjellsj.blogspot.com/2009/06/sharepoint-jquery-setting-td-column.html) I achieved the same result using JQuery with this script (change 'scrip' to 'script' for it to work. The comment system won't allow script tags.)




$(function(){
$("input.ms-long[value='HIDDEN']").hide();
});


Just as an exercise I thought would be interesting. Thanks for the help!

Unknown said...

It does work in SP2010 as well.
Although with some more hassling with the URL's, but I managed to figure it out.
So this works in 2010 as well.

Grtz
DengKao

Unknown said...

It does work on SP2010 as well.
Although with some more hassling with the url's. But I managed to change the Survey screens.
Thanx
Greetz
Dennis

Dean said...

Has anyone been able to get the text formatting script to work in SP2010. I know it works in SP2007.

Thanks.

Mike Smith said...

Dean,

I just checked my book and code is identical in both the 2007 and 2010examples. The only thing different in the steps was how get the 2010 page into edit mode and how to add the code to the Content Editor Web Part. (add the JavaScript to a text file using Notepad or your favorite JavaScript editor, upload the file to a site library and then edit the Content Editor Web Part and enter the URL into the text file to the Content Link box.)

One other note, if you are working with a multipage survey then you need to edit both NewForm.aspx and EditForm.aspx and make the same changes in both.

Mike

Dean said...

Found a solution to the html substition problem in my SP2010 environment. I wondered if it was a 'timing issue' i.e. The script not running prior to the page rendering.

I inserted the text formatting code inside this.

script language="javascript"
_spBodyOnLoadFunctionNames.push("FunctionName");
function FunctionName()
{
// Code
}
/script

Works as expected.

I found it at http://blogs.msdn.com/b/saurabhkv/archive/2009/06/22/javascript-pageload-add-function.aspx

I hope this can help someone else out. Thanks again for the orginal script.

Anonymous said...

Works in 2013 as well.

Thanks for the script...solved my problem of adding a page "title" to a multi-page survey.

Maria said...

It's not working for me. I've done everything as you've suggested except when I create the new question as a single line of text, there is nowhere to set a default value. Only the choice between text and calculated value. I really want this to work! Please help if you can, thanks.

Maria said...

Hi Mike. It isn;t working for me, though I really want it to! I have followed all the steps you described and I have made a new question as a single line of text but there is nowhere to set a default value as 'hidden', only somewhere to select between text and calculated value. Can you tell what I've done wrong?

Mike Smith said...

Maria,

Click Text and right below the Text / Calculated buttons enter the word "HIDDEN".

Mike

Unknown said...

After using this approach to add instructions, it occurred to me that for instructions at the top of the survey, I could simply add another CEWP with whatever logo, headings, and instructions I need. Much more flexible and avoids the extraneous HIDDEN question responses in the survey.

Thanks for getting me thinking!

BejeweledOne said...

I really like this. I have survey's that need some different text on the top of each page which you can't do with a cewp since the edit.aspx is used for all pages after the first one.

This is working wonderfully.

I found a neat new thing using the HTML part, rather than having a 'description' for a question and then a second question that is the actual question. You can format your question with HTML to include both the description and the question. This gives the necessary separation between the two parts and eliminates the need for a description question with a HIDDEN text value.

I am using variations of this and other scripts that hide the Save and Close button or hide the entire top row of buttons in a number of surveys and am very happy with the results.

Now if we could only conditionally require a question based on a different question that would be perfect.

BejeweledOne said...

Mike I hope you can answer this question.

I have 2 script pieces that I am using for the disp.aspx page. But while the script part to format the width of the questions is working, the script piece to 'fix' the html is not working and on that page all my html is showing. NOTE# This is in the actual code of the page via SPD because CEWP's are not saved when saving the survey as a template. We use this survey multiple times a year and need to have the template in place.

src="http://code.jquery.com/jquery-1.10.2.min.js">


// Fix tags to allow HTML
var t = document.getElementsByTagName('table');
for (var i=0;i -1)
{
td[j].innerHTML = td[j].innerHTML.replace(/</g,'<').replace(/>/g,'>');
}
}
}
}

//Set question width for word wrap

$(function(){
$("td.ms-formlabel").css("width", "600px");
$("td.ms-formlabel").css("white-space", "normal");
});

BejeweledOne said...

Do you know of any reason why adding the script to 'fix' the html would not work on the display page?

The survey questions look great but when you go to the all responses view and edit your response, it displays all the questions on a single page (disp.aspx)

I added the script to disp.aspx but does correctly render the html there. It shows in all the questions where it's used.

BejeweledOne said...
This comment has been removed by the author.
Nicki said...

Thanks for the useful post!
I used h1 to display titles for 4 parts of my survey.
Why only headers are displaying for me?
Font size or color doesn't change.
Thanks ahead!

Note to spammers!

Spammers, don't waste your time... all posts are moderated. If your comment includes unrelated links, is advertising, or just pure spam, it will never be seen.