Sharepoint Save Button Redirect Options For Custom Forms

The Problem of Losing Form Data

A common frustration for users filling out custom forms in SharePoint is the potential to lose entered data if they navigate away from the form before explicitly saving their work. Unlike native SharePoint forms that auto-save entries to list items, custom forms built with tools like PowerApps often require manual saving for the user’s inputs to persist.

If a user enters data into a custom form but then closes the browser tab, clicks an external link, or loses connectivity before saving, that entered form data will be lost. Depending on the complexity and time required to fill out the custom form, this can be an annoying or even painful experience for end users.

Custom form developers utilize both client-side and server-side saving techniques to minimize the chances of losing user data. Auto-save functionality saves form data intermittently in the background, while explicit save options empower users to decide when changes are persisted.

Table of Contents

Client-Side Saving Approaches

Saving custom form data on the client-side before submitting it to the server leverages the browsers built in storage mechanisms to prevent loss. Some common approaches include:

Session Storage: JavaScript can be used to save all user-entered form values to the browser’s session storage. That persisted session data is then available on page reload or browser crash to populate the form fields again.
Live Value Updates: As the user edits form fields, JavaScript event handlers can update variables or external data sources to dynamically save changes in close to real-time. This avoids large save operations.
Timed Auto-Save Triggers: SetInterval JavaScript functions can automatically trigger save procedures every few seconds or minutes to proactively persist form changes without relying on the user to remember.

The main benefit of these techniques is they work fully client-side without needing server round trips. That allows for very fast and seamless save operations. The downside is client-side storage like session storage may not persist long enough for robust data protection in all cases.

Server-Side Saving Methods

For more permanent and secured form data saving, server-side techniques are preferred for custom SharePoint forms including:

Save on Submit: A common approach is to configure the form submission process to first save or update the necessary data sources before closing the form. This leverages server storage and ensures changes are persisted.
External Web Service Calls: Custom services can be integrated that accept the form data and securely update remote databases and other data sources as needed on demand.

The benefits of server-side saving includes leveraging robust storage mechanisms and enterprise data sources. Challenges can include slower save times due to network round trips compared to client-side techniques.

Save Button Options

Providing an explicit save button in custom forms is an important reassurance and data protection mechanism for users. Some common save button strategies include:

Default SharePoint Save: Redirect to the default SharePoint form save that submits to the connected list. Simple but less customization options.
Custom Save Logic: Call custom JavaScript or server-side code to carry out specialized data persistence handling when save is clicked tailored to complex scenarios.
Save Confirmation: Display a confirmation notice on save click to notify the user the operation was successful and changes were persisted as expected.

Factors that influence the save button approach include where the form data must ultimately be stored, if additional business logic must run during the save process, and providing a responsive user-experience with visual save confirmations.

Example Code for Custom Save Buttons

Some examples of how custom SharePoint form developers can implement save button functionality includes:

Client-Side JavaScript Save Function

  function saveFormValues() {

    // Get entered values from form fields  
    var name = document.getElementById("nameTextbox").value;
    var email = document.getElementById("emailTextbox").value;
    
    // Save data to sessionStorage
    sessionStorage.setItem("formNameValue", name); 
    sessionStorage.setItem("formEmailValue", email);
    
    // Show confirmation alert
    alert("Data saved locally.");

  }

Server-Side C# Code to Update SharePoint List

  public bool UpdateListWithFormData(string name, string email) {

    using (var clientContext = new ClientContext(siteUrl)) 
    {
      var list = clientContext.Web.Lists.GetByTitle("CustomForm");
      var item = list.AddItem(new ListItemCreationInformation());
      item["Name"] = name;
      item["Email"] = email;
      item.Update();
      clientContext.ExecuteQuery();
    }

    return true;
  
  }

Sample Save Button Markup

  <button id="saveButton" onclick="saveFormValues()">
    Save Form
  </button>

In summary, custom SharePoint forms have several options to implement save capabilities ranging from client-side JavaScript to updating external data sources on the server. It is important to ensure a seamless user experience persisting entered data without loss or duplication of effort re-entering lost data.