Custom Save Button On Custom SharePoint List Forms

This blog describes how we can use Sharepoint OOTB save functionality to save data in a custom list form using custom Save button.

We have already discussed in our previous blog, how to make a custom list form using Sharepoint Designer.

Now, we will create custom buttons that will save data to a Sharepoint list without writing any code in REST or JSOM.

 

Please follow this link to go to the blog How to make Custom Sharepoint list forms using Sharepoint Designer.

 

Now, go to Sharepoint Designer and open the custom new form that we have created from the forms gallery of the list in Sharepoint Designer as shown below.

 

 

Click on CustomNewForm.aspx and this would open the aspx code of the CustomNewForm in Sharepoint designer.

 

The custom new form looks like below in the browser.

 

As you can see, there are two Save Buttons on the form.

To remove the Save buttons on the top find the below piece of code,

<table>
    <tr>
        <td width="99%" class="ms-toolbar" nowrap="nowrap">
            <IMG SRC="/_layouts/15/images/blank.gif" width="1" height="18" />
        </td>
        <td class="ms-toolbar" nowrap="nowrap">
            <SharePoint:SaveButton runat="server" ControlMode="New" id="savebutton1" /> </td>
        <td class="ms-separator"> </td>
        <td class="ms-toolbar" nowrap="nowrap" align="right">
            <SharePoint:GoBackButton runat="server" ControlMode="New" id="gobackbutton1" /> </td>
    </tr>
</table>

And add the highlighted code as below.

<table>
    <tr style="display:none">
        <td width="99%" class="ms-toolbar" nowrap="nowrap">
            <IMG SRC="/_layouts/15/images/blank.gif" width="1" height="18" />
        </td>
        <td class="ms-toolbar" nowrap="nowrap">
            <SharePoint:SaveButton runat="server" ControlMode="New" id="savebutton1" /> </td>
        <td class="ms-separator"> </td>
        <td class="ms-toolbar" nowrap="nowrap" align="right">
            <SharePoint:GoBackButton runat="server" ControlMode="New" id="gobackbutton1" /> </td>
    </tr>
</table>

This will hide the above save button on the form so the new custom form looks like this.

 

 

Now add the following code to add the custom button and use OOTB Sharepoint functionality to save the data in the Sharepoint list.

<tr>
    <td> <button type="button" value="Save And Exit" name="btnSave" onclick="javascript:{ddwrt:GenFireServerEvent('__commit;__redirect={/teams/******/Pages/Home.aspx}')};">Save And Exit</button> </td>
</tr>

Now, the form will have a custom button Save and Exit which will save the data in a sharepoint list just like OOTB sharepoint button.

 

 

 

Advantages of custom Button

1. We can redirect the page anywhere we like after saving data in the list.
2. We can run custom code by calling a javascript function (Discuss in next blog) to run validations and set values based on button click which is not possible in PreSaveAction functionality (to be discussed in the next blog)
3. No need to write custom Rest or JSOM code to save data. 

Hope this is helpful. Feel free to post comments if you have any query.