Creating a custom form is a main dish in your SharePoint project menu. After filling the required data and submit the form, users should wait for the browser progress until it finishes loading then shows success message.
This is a very traditional way, let’s see how to make it more modern and fancy using jQuery with SharePoint.
I always say that “jQuery rocks .. when it works”.
In this SharePoint bite i will show you how to make SharePoint custom form modern during posting data to server side.
This feature is using jQuery plugin called BlockUI, it requires jQuery v1.7 or later.
Let’s get started!
- Create SharePoint List Custom New Form
I am using the following HTML for the form [Title* – Order Number – Price]
<div>
<div class="formLabel">
<asp:Label ID="lblTitle" runat="server" Text="Title"></asp:Label>
<span style="color:red">*</span>
</div>
<div class="formControl">
<asp:TextBox ID="txtTitle" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="req_Title" runat="server" ControlToValidate="txtTitle" ForeColor="Red"
ErrorMessage="Required"></asp:RequiredFieldValidator>
</div>
<br />
<div class="formLabel">
<asp:Label ID="lblCode" runat="server" Text="Order Code"></asp:Label>
</div>
<div class="formControl">
<asp:TextBox ID="txtCode" runat="server"></asp:TextBox>
</div>
<br />
<div class="formLabel">
<asp:Label ID="lblPrice" runat="server" Text="Price"></asp:Label>
</div>
<div class="formControl">
<asp:TextBox ID="txtPrice" runat="server"></asp:TextBox>
</div>
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="btn" OnClick="btnSubmit_Click" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" CssClass="btn" />
<br />
<br />
<asp:Label ID="lblResult" runat="server" Text="" ForeColor="Green"></asp:Label>
</div>
On submit button click event, insert these values into a SharePoint list.
- Add BlockUI & jQuery Scripts’ References to the Form
You can download both libraries then add them to SharePoint site collection style library. It is very important to notice the reference sequence to be as below
<script type="text/javascript" src="/Style Library/JS/jquery.min.js"></script>
<script type="text/javascript" src="/Style Library/JS/jquery.blockUI.js"></script>
If you faced any issue in using these references, please check this great article to troubleshoot the issue you may face.
- Add Script to Button Click Event
To be able to run this scrip during your save or submit button click you have to add the script below
Note: if you have any validation controls on your form, you have to validate the page before running the script. This point is covered in the script below [please notice comments available].
Script timeout will be based on the request closure using last line in this script.
<script type="text/javascript">
//fire the script with the button click
//replace button id with the proper id that you use
$(function (e) {
$('#<%= btnSubmit.ClientID %>').click(function (e) {
//this if statement is validating the form required fields
if (Page_ClientValidate()) {
$.blockUI({
message: '<h3>Submitting your request..<h3/>',
css: {
padding: '15px',
margin: 0,
width: '30%',
top: '40%',
left: '35%',
textAlign: 'center',
color: '#fff',
border: '2px solid #aaa',
backgroundColor: '#fff',
cursor: 'wait'
}
});
}
});
});
//this line will terminate the blockUI when post event is closed.
Sys.WebForms.PageRequestManager.getInstance().add_endRequest($.unblockUI);
</script>
<script type="text/javascript" src="/Style Library/JS/jquery.min.js"></script>
<script type="text/javascript" src="/Style Library/JS/jquery.blockUI.js"></script>
<script type="text/javascript">
//fire the script with the button click
//replace button id with the proper id that you use
$(function (e) {
$('#<%= btnSubmit.ClientID %>').click(function (e) {
//this if statement is validating the form required fields
if (Page_ClientValidate()) {
$.blockUI({
message: '<h3>Submitting your request..<h3/>',
css: {
padding: '15px',
margin: 0,
width: '30%',
top: '40%',
left: '35%',
textAlign: 'center',
color: '#fff',
border: '2px solid #aaa',
backgroundColor: '#fff',
cursor: 'wait'
}
});
}
});
});
//this line will terminate the blockUI when post event is closed.
Sys.WebForms.PageRequestManager.getInstance().add_endRequest($.unblockUI);
</script>
<div>
<div class="formLabel">
<asp:Label ID="lblTitle" runat="server" Text="Title"></asp:Label>
<span style="color:red">*</span>
</div>
<div class="formControl">
<asp:TextBox ID="txtTitle" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="req_Title" runat="server" ControlToValidate="txtTitle" ForeColor="Red"
ErrorMessage="Required"></asp:RequiredFieldValidator>
</div>
<br />
<div class="formLabel">
<asp:Label ID="lblCode" runat="server" Text="Order Code"></asp:Label>
</div>
<div class="formControl">
<asp:TextBox ID="txtCode" runat="server"></asp:TextBox>
</div>
<br />
<div class="formLabel">
<asp:Label ID="lblPrice" runat="server" Text="Price"></asp:Label>
</div>
<div class="formControl">
<asp:TextBox ID="txtPrice" runat="server"></asp:TextBox>
</div>
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="btn" OnClick="btnSubmit_Click" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" CssClass="btn" />
<br />
<br />
<asp:Label ID="lblResult" runat="server" Text="" ForeColor="Green"></asp:Label>
</div>
- When Clicking Submit … awesome!
Enjoy this bite!