Customization of SharePoint forms using JavaScript and Content Editor web part

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

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.