Sharepoint Survey List Customizations

Using jquery to align the radio buttons in survey horizontally in SharePoint 2010 survey list.

Pre-requisites:
We need the following jquery libraries: 
1) jquery-1.7.2.min.js
2) jquery.SPServices-0.7.1a.min.js

Download the above jquery libraries & save them in your site.
Open the Survey NewForm.aspx page in browser & add the following script in the CEWP.

<script type="text/javascript" src="LocationPath/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="LocationPath/jquery.SPServices-0.7.1a.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$().SPServices.SPArrangeChoices({

    columnName:"Radio Button",
    perRow:3
});

$().SPServices.SPArrangeChoices({
    columnName:"Radio Button 2",
    perRow:5
});

});
</script>

Script for Hiding Show Graphical summary and Show all responses Links in overview.aspx
<script type="text/javascript">
_spBodyOnLoadFunctionNames.push("hideanchor");
_spBodyOnLoadFunctionNames.push("changeiMageblank");
_spBodyOnLoadFunctionNames.push("changeiMageblank1");

function hideanchor()
{     
  var anchort= document.getElementById("diidSurveyResults");
  var anchort1= document.getElementById("diidResultsByUser");
  anchort.style.display = 'none';
  anchort1.style.display = 'none';   
}
function changeiMageblank()
{
 var inputs = document.getElementsByTagName("img");
 for(i = 0; i<inputs.length; i++)
 {
  if(inputs[i].getAttribute("src").indexOf("/_layouts/images/rect.gif") != -1)
    {
      inputs[i].parentNode.removeChild(inputs[i]);
    }
 }
}
function changeiMageblank1()
{
 var inputs = document.getElementsByTagName("img");
 for(i = 0; i<inputs.length; i++)
 {
  if(inputs[i].getAttribute("src").indexOf("/_layouts/images/rect.gif")!= -1)
    {
    inputs[i].parentNode.removeChild(inputs[i]);
    }
 }
} 
</script>
Script to hide the Actions & Settings Menu in Survey toolbar
<script>
function HideDiv(name) {     

 var div = document.getElementsByTagName('div'); 
           for (var i = 0; i < div.length; i++) { 
              var str = div[i].id; 
              if (str.indexOf(name) >= 0) { 
                  var viewInExplorer = div[i]; 
                  if (viewInExplorer != null) { 
                      if (viewInExplorer.parentNode != null) 
                          viewInExplorer.parentNode.removeChild(viewInExplorer); 
                  } 
              } 
          } 

      } 
      HideDiv("ListActionsMenu"); 
      HideDiv("ListSettingsMenu"); 
  </script>


Hide the Questions in Graphical summary of survey list
Pre-requisites:
We need the following jquery libraries: 
1) jquery-1.7.2.min.js
2) jquery.SPServices-0.7.1a.min.js

Download the above jquery libraries & save them in your site.
Open the Survey Summary.aspx page in browser & add the following script in the CEWP.

<script src="/sites/......./Jquery/jquery.SPServices-0.7.1a.min.js" type="text/javascript"></script><script src="/sites/...../Jquery/js_jquery-1.7.2.min.js" type="text/javascript"></script><script type="text/javascript">

$(document).ready( function() {
       $('h3:contains("1. Question1")').hide().next("table").hide();
       $('h3:contains("2. Question2")').hide().next("table").hide();
         })</script>

Tips:
Scenario 1:
If the Administrator does not want to allow end users to see all columns in default EditForm or DisplayForm of a list then he can hide the specific columns from end users by using the following script
<script type="text/javascript">
$(document).ready(function(){
     $('nobr:contains("Column-Name1")').closest('tr').hide();
     $('nobr:contains("Column-Name2")').closest('tr').hide();
});</script>

where Column-Name1is the name of the column within the list which the administrator wants to hide.

Scenario 2:
If the Administrator wants to hide certain columns based on the value of other column within the list from end users in default EditForm or DisplayForm of a list then he can hide the specific columns by using the following script
<script type="text/javascript">
$(document).ready(function(){
     var DropDownStatus = $("[title='Status']").val();
     if(DropDownStatus == "Pending")
     {
         $('nobr:contains("ColumnToHide")').closest('tr').hide();
     }
});</script>


where,
ColumnToHide is the name of the column within the list which the administrator wants to hide.

 
var DropDownStatus = $("[title='Status']").val(); - fetches the value of the column name "Status" & assigns it to variable DropDownStatus
 


No comments:

Post a Comment