Posts Tagged ‘Javascript’

A more advanced Survey List in SharePoint 2013

July 5, 2016 Leave a comment
Hi everyone!

My customer has asked for a solution to evaluate developped applications by the end users. A solution based on Survey template was proposed but the default template is just a form with the questions as fields. The interface is not convivial if we have a long survey!

Let us assume that we have a survey with three questions. The following pictures shows the default NewForm:


Enter a caption

What is the difference between a custom list and a survey then? Some interesting features can be cited:

  • The stats part to evaluate the survey.Surevey12
  • The branching feature in the survey that allows to jump to a given step based on what is chosen by the user at the current step.Surevey13

Now, let us develop a more advanced survey using just javascript! We want to achieve these objectives:

  • View just one question at a given step
  • Two buttons to access to the next or the previous question
  • View the Finish button once the user has finished the survey
  • Confirm the answers before saving

3 libraries will be used for different purposes:

  • SP.js for notifications.
  • SPUtilies.js for hiding and showing the questions.
  • JQuery for SPUtilities.

Simply we will write a custom html file that will be referenced into a Content Editor WebPart added on the page NewForm.apsx of your survey:


Here is the content of the Quiz.html:

<!DOCTYPE html>

<html lang="en" xmlns="">
    <!-- Javascript files references -->
    <script type="text/javascript" src="/JS/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="/JS/sputility.min.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.js"></script>
<meta charset="utf-8" />
    <!-- A table containing the Next and Previous buttons -->
<table class="ms-rteTable-default" cellspacing="0" style="width: 100px;">
<td  style="width: 100px; height: 20px;">
<div id="Previous"><<<</div></td>
<td  style="width: 100px; height: 20px;">
<div id="Next">>>></div></td>
<script language="javascript" type="text/javascript">
        //A variable to keep the current position in the survey
        var i = 0;
        //An Arry to store the list of the questions fields
        var fieldsArray = [];
        //This functions is invoked when we click on Finish Button
        function PreSaveItem() {
            var fields = SPUtility.GetSPFields();
            var message = 'Are you sure to save these answers ?\n';
            for (fieldName in fields) {
                message = message + fieldName + ' : ' + 
                SPUtility.GetSPField(fieldName).GetValue() + '\n';


            if (confirm(message)) {

                return PreSaveAction(); // allow save form...
            //Notify the user
            function PreSaveAction() {
                SP.UI.Notify.addNotification('Your Answers are being saved...', 
                return true;
            $(document).ready(function () {
                //Hiding the form toolbar
            var fields = SPUtility.GetSPFields();
            for (fieldName in fields) {   
                //Get the questions list
                //Hide all question
                //Show the first question
        //Next handler
            $("#Next").click(function () {
                //Hide the current question
            if (i < fieldsArray.length-1) 
           //Show the form toolbar when we reach the last question                 
            //Show the next question             
            //Previous handler         
           $("#Previous").click(function () 
             //Hide the current question             
           if (i > 0) {
            //Show the previous question


Let us see the results!

Oh yes, the buttons Next and Previous allow you to navigate between the questions:

First Question:


Second Question:


Thrid Question:


Now if we clic on the Next button the Finsih button is shown:


Before saving the answers a confirm window is launched to confirm the answers:


Finally, a notification label dispalys the message of saving the answers:


Ok that’s all! Hope it helps!