Archive

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:

Survey11

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:

Survey14

Here is the content of the Quiz.html:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!-- 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" />
    <title></title>
</head>
<body>
    <!-- A table containing the Next and Previous buttons -->
<table class="ms-rteTable-default" cellspacing="0" style="width: 100px;">
<tbody>
<tr>
<td  style="width: 100px; height: 20px;">
<div id="Previous"><<<</div></td>
<td  style="width: 100px; height: 20px;">
<div id="Next">>>></div></td>
</tr>
</tbody>
</table>
<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...', 
                                             false);
                return true;
            };
            $(document).ready(function () {
                //Hiding the form toolbar
            $('.ms-formtoolbar').hide();
            var fields = SPUtility.GetSPFields();
            for (fieldName in fields) {   
                //Get the questions list
                fieldsArray.push(SPUtility.GetSPField(fieldName));
                //Hide all question
                SPUtility.HideSPField(SPUtility.GetSPField(fieldName));
            }
                //Show the first question
            SPUtility.ShowSPField(fieldsArray[0]);
            });
        //Next handler
            $("#Next").click(function () {
                //Hide the current question
            SPUtility.HideSPField(fieldsArray[i]);
            
            if (i < fieldsArray.length-1) 
            {                 
                i++;             
            }             
            else             
           {                 
           //Show the form toolbar when we reach the last question                 
            $('.ms-formtoolbar').show();             
            }             
            //Show the next question             
            SPUtility.ShowSPField(fieldsArray[i]);                      
            });         
            //Previous handler         
           $("#Previous").click(function () 
           {             
             //Hide the current question             
             SPUtility.HideSPField(fieldsArray[i]);                          
           if (i > 0) {
                i--;
            }
            //Show the previous question
            SPUtility.ShowSPField(fieldsArray[i]);

        });
    </script>
</body>
</html>

Let us see the results!

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

First Question:

Survey15

Second Question:

Survey16

Thrid Question:

Survey17

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

Survey18

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

Survey19

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

Survey20

Ok that’s all! Hope it helps!