Customization of SharePoint forms using JavaScript and Content Editor web part

Problem Statement - Customization of SharePoint forms using JavaScript and Content Editor web part

Output

Solution

To solve this we need to add content editor web part in new form window and we will add JavaScript files to customize new form

Create SharePoint list with name “Employee Information”

1. Go to setting and rename title column as Emp ID and create columns as shown in below table

sr no	Column Name	Column Type	Description
1	Emp Id	Single Line of text	Rename Title column
2	Employee Name	Single Line of text
3	Email Id	Single Line of Text
4	Status	Choice	Offered, Onboard, On notice
5	Grade	Choice	Grade1,Grade2,Grade3
6	DOJ	Date and Time	Date of Joining

2. The SharePoint “Employee Information” List will look like this

3. Click on “New Item”

4. Click on gear icon on the top left side of new item page and click Edit Page

5. List will open in edited mode, Click on Insert – Media and Content editor as shown below and click on Add button

6. Click on Edit web part and paste path of JavaScript file which will create in site asset folder of same root site

7. Click on Apply then OK and then stop the page from editing

Note - Before clicking Apply Check the URL is working by clicking on Test Link provided in Content editor.

8. Create a file called “Designtemplate.js” in site asset folder and Paste the following code.

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link type="text/css" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/start/jquery-ui.css" >
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<style type="text/css">
.ms-formtable
{display:none;}
</style>
<script type="text/javascript">
jQuery(document).ready(function($) {
$().customform({
genericAlert: true,
alertErrorText: "Correct the error and try again"
});
$( "#accordion" ).accordion();
});
(function ($) {
//interval used on PreSaveItem to check and notify for any error spans
var internval;
$.fn.customform = function (options)
{ var opt = $.extend({}, {
genericAlert: false,
moveSaveCancel: false,
alertErrorText: "Correct the error and try again"
}, options);
//loop through all the spans in the custom layout
$("span.customizeform").each(function()
{
//get the display name from the custom layout
displayName = $(this).attr("data-displayName");
elem = $(this);
//find the corresponding field from the default form and move it
//into the custom layout
$("table.ms-formtable td").each(function(){
if (this.innerHTML.indexOf('FieldName="'+displayName+'"') != -1){
$(this).contents().appendTo(elem);
} }); });
if($("span.customizeformCancel").length)
{
$("input[type='button'][value='Cancel']").hide();
var cancel = $("input[type='button'][value='Cancel']")[0];
$("span.customizeformCancel").append($(cancel ));
$(cancel).show();
}
if($("span.customizeformSave").length)
{
$("input[type='button'][value='Save']").hide();;
var save = $("input[type='button'][value='Save']")[0];
$("span.customizeformSave").append($(save));
$(save).show();
}
if(opt.genericAlert)
{
$("input[type='button'][value='Save']").click(function(){
interval = setInterval(function(){CheckForErrors(opt.alertErrorText)},500);
}); } }
function CheckForErrors(alertErrorText)
{
if($("span[role='alert']").length)
{
alert(alertErrorText);
clearInterval(interval);
} }
})(jQuery);
</script>
<h1> Employee Details </h1>
<span class="customizeformSave"></span>
<span class="customizeformCancel"></span>
<div id="accordion">
<h3>General Details</h3>
<div> <p>
<table><tr><td>
Emp Id </td><td> <span class="customizeform" data-displayName="Emp Id"></span>
</td></tr>
<tr><td>
Employee Name</td><td> <span class="customizeform" data-displayName="Employee Name"></span>
</td></tr>
<tr><td>
<tr><td>
Email Id</td><td> <span class="customizeform" data-displayName="Email Id"></span>
</td></tr></table>
</p>
</div>
<h3>Designation Details</h3>
<div> <p>
<table><tr><td>
Status</td><td> <span class="customizeform" data-displayName="Status"></span>
</td></tr>
<tr><td>
Grade</td><td> <span class="customizeform" data-displayName="Grade"></span>
</td></tr>
<tr><td>
<tr><td>
DOJ</td><td> <span class="customizeform" data-displayName="DOJ"></span>
</td></tr></table>
</p> </div>

You are done with SharePoint new form Customization. Happy Coding.

4 Comments

Join the conversation! Your thoughts help the community grow.

cookie5y ago
Great job. Very easy to implement. What if there is a choice field set to radio buttons, how would you align them horizontally?
Kavitha Viswanathan6y ago
The employee family details accordions needs to come just below this accordion of employee details. Please help. Thanks.
Kavitha Viswanathan6y ago
Hi Pramod- thanks for the code, got to create an accordion. However I am facing 2 issues- custom form is not opening in Edit mode and I need to add more such forms with different headings- say ' family details' accordion.
Netaji Junghari6y ago
Hi Pramod, nice post. im looking for the same. need your help