SharePoint 2013 Create Custom Save and Redirect Button On A SharePoint Form

custom save button sharepoint 2013
InfoPath alternatives for form designing SharePoint

In this SharePoint 2013 article we will explore on how to Create Custom Save and Redirect Button on a SharePoint Form using SharePoint Designer, since the best way to work on an ASPX page would be through SharePoint Designer.

Scenario:
Recently, I came across a scenario, where I had to create a custom save button on a SharePoint Form and on the click of the button, I had to do some operation before triggering validation and ultimately save the item and redirect, so I would like to share my knowledge on it and the way of implementation.

Implementation:
Here, we will be learning the following.
– How to create a custom save button on .ASPX page?
– How to redirect on button click in .ASPX page?
– How to call a custom function on button click in .ASPX page?
– How can we pass a parameter in a redirection URL?



custom save button sharepoint 2013
custom save button sharepoint 2013

Also read some jQuery tutorials:
Get and Set Variable Values from One JavaScript File to another JavaScript File Using Local Storage

Different operations Using JQuery like hide show disable and set specific value to html control

– Steps to hide quick launch bar in SharePoint online SharePoint 2016/2013

Below is the step by step implementation of the same.

First, create an HTML input tag with type button on .ASPX page. Let’s say I have done it on EditForm.aspx.



<input style=”margin: 0″ id=”customSave” type=”button” value=”custom Save” name=”btnSave” onclick=”if (!ExecuteThisFunctionBeforeSavingAndRedirecting()) return false; { ddwrt: GenFireServerEvent(‘__commit;__redirect={webAbsoluteUrl/Lists/ListName/NewForm.aspx?isCustomSaved=Yes}’) }” />

It is onclick, where we have to do some operations before saving. So write and check if the function returns true to proceed and save, as shown below.

onclick=”if (!ExecuteThisFunctionBeforeSavingAndRedirecting()) return false;”

If the function executes correctly and returns true, the form is saved, using the command given below.

{ddwrt:GenFireServerEvent(‘__commit’)}

Now, for committing and redirecting to another location, let’s say here that we are redirecting to the NewForm.

We write:

{ddwrt:GenFireServerEvent(‘__commit;__redirect={webAbsoluteUrl/Lists/ListName/NewForm.aspx}’)}

After redirecting, when NewForm opens; it will be same as created on new item and not the redirected form, so for this, set a parameter in the redirection URL.

__redirect={webAbsoluteUrl/Lists/ListName/NewForm.aspx?isCustomSaved=Yes}

Second, the operation which you need to perform has to be coded somewhere. I have included that particular function in JavaScript file and gave the reference of the NewForm.js in the ScriptEditor Webpart inserted on EditForm.aspx.

NewForm.js:

function ExecuteThisFunctionBeforeSavingAndRedirecting() {

//Do Something

if (!PreSaveItem()) return false;

else return true;

}

function PreSaveItem() {

//Do Validation Code

}

Here, once the operation is done, call for the PreSaveItem(); function where the code for validation is present. If the PreSaveItem returns true, the forms saves successfully and redirects, else the form doesn’t save. Hope this article was helpful.

Similar SharePoint 2013 Tutorials


About Akash Kumhar

I am Akash Kumhar a SharePoint Consultant.

View all posts by Akash Kumhar →

Leave a Reply