Save your data when pressing the previous button on a Power Pages Multistep form

Multistep forms (a.k.a: advanced forms or web forms) are an easy way to capture data from your users when there is a lot of information to grab. Advanced forms allow no-code/low code developers to define steps, which basically convert into single screens, where users can enter information, like basic forms chained one after the other.

To navigate among those steps, Power Pages will add next and previous buttons that allow you to go to the next form or go back to the previous form when needed.

The current behavior of these buttons is to save the current form data when you go to the next form, but it won’t save when you return to the previous form. This has been the standard behavior since I can remember.

From time to time, you will find a case where it is important to save the information when you are going to the previous form.  For example: if you have a really long form and you find out that one of the fields is related to something in a previous form and you need to change it before going ahead.  You will loose all the data you entered into the current form when you navigate to the previous one.

In the past, I have seen some ways to solve this issue, like replicating the JavaScript from the “Next” button into a fake “Previous” button, except the lines where you go to the next form step. However, with the new Portal Web API, you can now take advantage of this feature and save the current form data before going back to the previous form.

Here are the steps we are going to implement to save the current form data before going back to the previous one:

1. Create a copy of the existing “previous” button
2. Hide the original “previous” button
3. Add the necessary code to call the Portal API and save the information and then send the user to the previous form.

But you begin, you will need to do some basic configuration to allow your JavaScript code to use the Web API to save the information from the current form.

First you will need to create a couple of site settings for the table (check image 1 for more details) that you are going to save the information to as explained here: Overview of the Power Pages portals Web API | Microsoft Learn.

Image 1. Site settings required to allow the Web API to use the ce_application table and a list of the fields allowed to use separated by comma.

Then, make sure you have the right table permissions for the same table that you defined the site settings for. Check out this article for more information on how to configure table permissions: Configuring table permissions in Power Pages | Microsoft Learn.

Now that this is done, we can get into the code!

Image 2. Using the Portal management app, find the multistep form you want to edit, go to the form step and in the “Form options” tab, you can insert the JavaScript required.

You are going to inject some JavaScript into the liquid code of the form step now (check image 2 for more details on this part). The first method I would like to add is something to call the Portal Web API and save the data:

function saveValues(){
  
  var ce_currentjobtitle = document.getElementById("ce_currentjobtitle").value;
  var ce_employmentdate = document.getElementById("ce_employmentdate").value;
  var empldate = new Date(ce_employmentdate);
  var ce_jobdescription = document.getElementById("ce_jobdescription").value; 
  var brsinc_noticeperiodrequired = document.getElementById("brsinc_noticeperiodrequired_1").checked // Yes/No column

var payload = { "ce_currentjobtitle": ce_currentjobtitle,"ce_employmentdate": empldate.toString("yyyy-MM-dd"), "ce_jobdescription": ce_jobdescription, 
   "brsinc_noticeperiodrequired":brsinc_noticeperiodrequired }; 

var applicationid = document.getElementById("EntityFormView_EntityID").value;

webapi.safeAjax({
    type: "PATCH",
    url: "/_api/ce_applications("   applicationid   ")",
    contentType: "application/json",
    data: JSON.stringify(payload),
    success: function(result){
      console.log("Success!!");
    },
    error:function(xhr){
      console.log("ERROR");
    }
  });
}

But this is only half of the puzzle, now you need to create a copy of the “previous” button (when the page loads), and inject a call to your saveValues method before going back to the previous form:

$( document ).ready(function() {
    var newButton = $("#PreviousButton").clone(false);
    newButton.attr("id", "NewButton")
    newButton.click(function(){ 
      saveValues();       
      __doPostBack('ctl00$ctl00$ContentContainer$MainContent$EntityControls$WebFormControl$PreviousButton','');   // < -- this is the extracted from the original previous button
    });
    newButton.appendTo($("#PreviousButton").parent());
    $("#PreviousButton").hide();
});

It is important to say that the doPostBack method call might differ, so don’t just copy this code from the article and check what your original “previous” button has. In later articles we can explore more elegant ways to do this part.