SharePoint Survey Back Button

On Internet I could not find a correct solution for implementing a back button in a survey. After some search I found some near implementations but not an implementation that fully worked. One that inspired me was http://sharepointbender.blogspot.nl/2012/04/creating-back-button-on-sharepoint-2010.html but I found the history.back(-2) not satisfying.

I wrote my one version in Javascript that uses the FirstField parameter of the survey to implement a correct behaviour. I hope it makes you happy.

In the edit form I added a script link to the code below and i added the following statement

spbackButton.init("Name of list"); 

In an javascript file I included the following code.

var spbackButton = (function () {
    var _prevFieldsArray = new Array();
    var _currentStep;
    var _prevPageStep;

    function setCookie(c_name,value,exdays)
    {
        var exdate=new Date();
        exdate.setDate(exdate.getDate() + exdays);
        var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
        document.cookie=c_name + "=" + c_value;
    }

    function getCookie(c_name)
    {
        var c_value = document.cookie;
        var c_start = c_value.indexOf(" " + c_name + "=");
        if (c_start == -1)
        {
            c_start = c_value.indexOf(c_name + "=");
        }
        if (c_start == -1)
        {
            c_value = null;
        }
        else
        {
            c_start = c_value.indexOf("=", c_start) + 1;
            var c_end = c_value.indexOf(";", c_start);
            if (c_end == -1)
            {
                c_end = c_value.length;
            }
            c_value = unescape(c_value.substring(c_start,c_end));
        }
        return c_value;
    }

    function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
            results = regex.exec(location.search);
        return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }

    var isBack = getCookie('backClicked');
    if (isBack && isBack.length > 0) {
        setCookie('backClicked', '', 0);
        if (isBack == "empty") {
            location.href = "EditForm.aspx?ID=" + getParameterByName("ID") + "&IsDlg=1";
        }
        else {
            location.href = "EditForm.aspx?ID=" + getParameterByName("ID") + "&FirstField=" + isBack + "&IsDlg=1";
        }
    }

    function loadButton() {
        var nextButton = $('input[value=\'Volgende\']');
        nextButton.parent('td').before('

');
        var backButtons = $('input#btnBack');
        backButtons.attr('class', 'ms-ButtonHeightWidth');
        backButtons.click(function () {
               setCookie('backClicked', _prevPageStep, 1);

            nextButton.trigger('click');
        });
    }

    function init(listName) {
        function loadContext() {
            var clientContext = new SP.ClientContext.get_current();
            var web = clientContext.get_web();
            var list = web.get_lists().getByTitle(listName);
            this.listFields = list.get_fields();
            clientContext.load(this.listFields);
            clientContext.executeQueryAsync(Function.createDelegate(this,
                onListFieldsQuerySucceeded));

            function onListFieldsQuerySucceeded() {
                var fieldEnumerator = listFields.getEnumerator();
                var prevIsPage = false;

                _prevPageStep = "empty";

                while (fieldEnumerator.moveNext()) {
                    var oField = fieldEnumerator.get_current();

                    if (prevIsPage) {
                        var currentStepName = oField.get_internalName();
                        if (currentStepName == _currentStep) // no need to go any further
                        {
                            loadButton();
                            return;
                        }

                        _prevPageStep = currentStepName;
                        _prevFieldsArray.push(currentStepName);
                        prevIsPage = false;
                    }

                    var fType = oField.get_fieldTypeKind();
                    if (fType === SP.FieldType.pageSeparator) {
                        prevIsPage = true;
                    }
                }

                loadButton();
            }
        }

        _currentStep = getParameterByName("FirstField");
        if (!_currentStep || _currentStep.length == 0)
            return; // no back button needed

        // Loadprev fields
        ExecuteOrDelayUntilScriptLoaded(loadContext, 'sp.js');

        
    }

    var obj = {};
    obj.init = init;
    return obj;
})();

Comments

Anonymous said…
Hi,
For the first field value. Is it the sharepoint field value or the text of the first question?

Is the list name the GUID?

Thank
GJ said…
The list name is the title of the list, not het guid.

I do not know what you mean with first field value? What line are you referencing?
Unknown said…
in what section of the edit page do I write your code?
Unknown said…
This comment has been removed by the author.
GJ said…
The section does not matter, as long as the script link element is before the call to the spbackButton.init function
Unknown said…
Thanks for posting this information.

When I place the code in notepad and link the code from the content web editor webpart it puts the code on the page, however do I need to do the same for the first step "spbackButton.init("Name of List"; in order for the Back Button to appear on the Survey. Just using the code in notepad on the Content Web edititor is not working.
GJ said…
The init function must be called after the main script. Make sure if you use multiple content web editors that the init function is after the main script.
Anonymous said…
Hi and thanks for the above code

Im working on implementing and a little confused still here to place ...

spbackButton.init("Name of list");

If I am editing the form in advanced mode in SP designer, can I simply add the line in the code above the edit form web part?

Also, for name of the list - this is the text name of the survey list correct? For example, if my survey is called "Test Survey" then the init would look like this?:

spbackButton.init("Test Survey");

(note - I entered the js code as a file on my site then used a hidden content editor web part to reference the code above the edit form webpart).

Thanks!
GJ said…
Just leave the init call in a hidden media content web part. You can add the JavaScript by selecting the html option in the ribbon.

The init argument is the title of the list.
Russ Leo said…
Is it possible to put a couple of screen shots in? I really like the idea of having a back button but can't seem to figure out what to do after creating the javascript in designer.
Thank you
GJ said…
What kind of screenshots would you like to see? For instance a Survey back button in action or maybe the code in a designer window?
Russ Leo said…
The code in a designer window would be great! Thank you.
Ed T. said…
Hello, I trying to do same. Would you please share screenshots mentioned above? In a designer window also.
Thank you
Gerd Hübner said…
I have added a webpart including the function code and below the function the init argument including the list name. Nothing is happening though...

Should this work also doing it that way?

Thanks a lot!
GJ said…
Yes it should, do you have any javascript errors? This is however an SharePoint 2010 script, I do not know how it works on SharePoint 2013.
Anonymous said…
Using SharePoint 2010 I added 2 hidden content web parts with the init js following the main js. My survey is Test CMS Survey so I have the init js as: spbackButton.init("Test CMS Survey");

Nothing is happening? Are you able to share screenshots of the process?

Thanks.

Popular posts from this blog

System.Net.Http dll version problems

How to set up AD FS for a development machine