Javascript Approaches To Redirecting After Saving Sharepoint Forms

When users submit or save SharePoint forms, it is often necessary to redirect them to a new page after the operation completes. Redirecting to a confirmation page or back to a list view can help avoid disorienting the user and losing the context and data they have entered if the form simply closes.

The Problem of Losing User Context

If no redirect occurs after a SharePoint form is saved, the modal dialog or edit form simply closes, dropping the user back on the original page they came from. This poor user experience can cause confusion, frustration, and work loss.

For example, a user filling out a long survey form or request approval will invest significant time entering information. But if the form closes with no feedback, they may not realize the form saved properly. Users can also lose context from data entered if they get dropped back to a random previous list or document library page.

Table of Contents

Redirecting to a confirmation page that reassures the user their submission was successful helps avoid these pitfalls. Even redirecting back to the originating list or library view can reorient them while preserving entered data context.

JavaScript Approaches for Redirecting

Here are some common JavaScript techniques for redirecting after saving SharePoint forms:

Using the SP.UI.ModalDialog.commonModalDialogClose Method

Forms opened in modal dialog popups in SharePoint use the SP.UI.ModalDialog API. We can use the commonModalDialogClose method to programmatically close these dialogs after saving, while passing a redirect URL:

SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, '/redirecturl.aspx');

This gracefully closes the modal, and redirects the browser to the specified URL. The dialog result also allows passing a status back to the originating page if needed.

Redirecting from Edit Forms with the PreSaveAction Function

SharePoint edit forms support a PreSaveAction function that executes JavaScript before saving an item. This provides a good opportunity to redirect using window.location:

function PreSaveAction() {

  // Save form  
  this.get_dataProvider().saveChanges(onSave); 

  function onSave() {
    window.location = '/confirmationpage.aspx'; 
  }

}

The key thing here is that the actual form save needs to fully complete before redirecting. Using the callback event ensures redirection doesn’t happen prematurely.

Redirecting from New Forms with the Submit Function

New form pages in SharePoint use a custom Submit function instead of PreSaveAction. But redirect logic works similarly:

function Submit() {

  if(validateForm()) {
    this.get_dataProvider().saveChanges(onSave);
  }

  function onSave() {
    window.location = '/confirmation.aspx?ID='+GetItemId();
  }

}

Here the Submit function allows doing any validation or other business logic before saving. And we pass the newly created item ID to the next page for easy access after redirect.

Code Examples

Here are some concrete code samples for implementing redirects with SharePoint’s APIs.

SP.UI.ModalDialog.commonModalDialogClose Example

function saveForm() {

  // Save form changes  

  SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, 
    '/sites/team/lists/survey/confirmation.aspx?ID='+GetItemId());

}

This closes the modal dialog after saving and passes the ID to the redirect URL for reference.

PreSaveAction Redirect Example

function PreSaveAction() {

  // Form save logic  

  function redirect() {

    window.location = '/sites/team/surveyconfirm.aspx'; 

  }

  this.get_dataProvider().saveChanges(redirect);  

}

Here the form calls back to the redirect function after completing its save operation.

Submit Redirect Example

function Submit() {

  // Validation logic  

  this.get_dataProvider().saveChanges(onSubmit);   

  function onSubmit(data) {

    window.location = '/sites/team/lists/issues/?ID=' + data.ID;

  }

}

In this case the submit callback receives the saved list item data, allowing redirect back to the Issues list with the new item ID.

Considerations and Best Practices

Here are some key considerations and best practices when implementing post-save redirects for SharePoint forms:

Handling Errors and Validation Before Redirecting

Be sure to wrap save and redirect logic in try/catch blocks to handle any errors. Also confirm forms fully pass validation earlier within Submit and PreSaveAction functions, to avoid redirecting on invalid data.

Passing Data and Context to the Redirect Page

As shown in some previous examples, you can pass identifiers, status flags, messages, or other context to the next page via redirect URL parameters. The next view can then utilize this context, for example showing a custom confirmation message or loading the item ID that was just saved.

Testing Redirect Behavior Across Browsers and Devices

Validate that redirects and page loads operate smoothly across browsers like Chrome, Firefox, Safari, Edge, and Internet Explorer 11. Also confirm intended user experience on mobile devices viewing SharePoint forms. Catch any browser inconsistencies early in development.

Additional Tips and Tricks

Here are some additional ideas that may help in specialized redirect scenarios:

Using URL Parameters for More Complex Redirect Logic

URL parameters can contain status codes, view names, list IDs, item IDs, and other flags to build dynamic redirect logic after form submission. For example routing users to unique confirmation pages based on a survey result or validation status.

Opening Redirection URLs in New Tabs/Windows

Use JavaScript functions like window.open() to open post-save URLs in a new browser tab or window altogether instead of navigating the current page. This preserves context and allows tabbing between the originating form and confirmation views.

Animations and Loading Indicators During Redirects

UX enhancements like a spinner during redirects or animated page transitions can smooth the user experience. Libraries like Spin.js provide spinner effects. For animations, hide the original form, show a loading indicator, redirect, then hide and show pages with jQuery fade transitions.

Summary

Properly handling redirects after saving SharePoint forms helps create positive, seamless user workflows. Users remain oriented, preserving any data they have invested time entering across the process. Some key points include:

Redirect to confirmation pages or views to confirm successful form submission and avoid disorientation.
JavaScript options like SP.UI.ModalDialog, PreSaveAction, and Submit functions redirect after necessary save logic.
Pass data and context via redirect URL parameters to following views.
Ensure cross-browser capable redirection behavior.
Consider creative techniques like opening tabs and adding animations or loading spinners to ease redirects.

With robust redirect handling, SharePoint forms can facilitate data entry while keeping users informed and maintaining context across workflows.