by Burhan Ramay

A few days back I got a requirement from a client asking me to show highlighted headings and sub-headings of groups of questions in a SharePoint survey. There is no out of box solution available to achieve this functionality. Thus I did a little trick by using JavaScript to achieve the required survey user interface.

Requirement

You’ll need SharePoint 2010 Survey having the interface as showing in below image:

Solution

1. Follow the below steps to accomplish this task.
2. Go to All Site Content, click on link Create
3. Select Survey from List category from left side menu, enter Name of survey and click button Create
4. Add questions in survey and add Single line of text fields for headings and sub-headings e.g. if heading name is Initiation then enter Initiation under Question and select type Single line of text. Do the same for sub-heading
5. Open SharePoint Designer and Open Site where survey was created in Step 3 above
6. In SharePoint Designer select List and Libraries from left menu
7. On right side click on survey name created in Step 3 under Lists column

8. In SharePoint Designer, click NewForm.aspx from under Forms

9. Select Split mode and click inside div underneath Ok, Cancel buttons as showing in below image

10. Type the below JavaScript in code pane above inside div.

<script type=”text/javascript”>

_spBodyOnLoadFunctionNames.push(“hideFieldsOnStart”);

function hideFieldsOnStart() {

//hide the control at start

var control = getTagFromIdentifierAndTitle(“input”,”TextField”,” Initiation “);

control.parentNode.parentNode.parentNode.style.display=”none”;

control = getTagFromIdentifierAndTitle(“input”,”TextField”,”Decision Making”);

control.parentNode.parentNode.parentNode.style.display=”none”;

changeBackGroundColor(control, “Initiation”, true);

changeBackGroundColor(control, “Decision Making”, false);

}

function changeBackGroundColor(control, labelText, isMainHeading)

{

var rows = control.parentNode.parentNode.parentNode.parentNode.getElementsByTagName(“tr”);

for (i = 0; i < rows.length; i++)

{

if(trim(rows[i].cells[0].innerText) == labelText)

{

if(isMainHeading)

{

rows[i].style.backgroundColor= ‘yellow’;

}

else

{

rows[i].style.backgroundColor=’lightblue’;

}

}

}

}

//this gets the field based on title identifier and tagname

function getTagFromIdentifierAndTitle(tagName, identifier, title) {

var len = identifier.length;

var tags = document.getElementsByTagName(tagName);

for (var i=0; i < tags.length; i++) {

var tempString = tags[i].id;

if (tags[i].title == title && (identifier == “” || tempString.indexOf(identifier) == tempString.length – len)) {

return tags[i];

}

}

return null;

}

function trim(stringToTrim) {

return stringToTrim.replace(/^\s+|\s+$/g,””);

}

</script>

11. In the above code, ChangeBackGroundColor() function with false parameter is used for sub-heading and
true for heading

In this code, questions are used as headings and passing as parameters to functions getTagFromIdentifierAndTitle, changeBackGroundColor. Thses headings should be defined as Questions during Survey definition.

Important factor to share this post is to confirm my approach and will be more than happy to know if some other solution is available.