Post
Ask Question

Customization of SharePoint forms using JavaScript and Content Editor web part

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.
  1. <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>  
  2. <link type="text/css" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/start/jquery-ui.css" >  
  3. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>  
  4. <style type="text/css">  
  5. .ms-formtable  
  6. {display:none;}  
  7. </style>  
  8. <script type="text/javascript">  
  9. jQuery(document).ready(function($) {  
  10. $().customform({  
  11. genericAlert: true,  
  12. alertErrorText: "Correct the error and try again"  
  13. });  
  14. $( "#accordion" ).accordion();  
  15. });  
  16. (function ($) {  
  17. //interval used on PreSaveItem to check and notify for any error spans  
  18. var internval;  
  19. $.fn.customform = function (options)  
  20. { var opt = $.extend({}, {  
  21. genericAlert: false,  
  22. moveSaveCancel: false,  
  23. alertErrorText: "Correct the error and try again"  
  24. }, options);  
  25. //loop through all the spans in the custom layout  
  26. $("span.customizeform").each(function()  
  27. {  
  28. //get the display name from the custom layout  
  29. displayName = $(this).attr("data-displayName");  
  30. elem = $(this);  
  31. //find the corresponding field from the default form and move it  
  32. //into the custom layout  
  33. $("table.ms-formtable td").each(function(){  
  34. if (this.innerHTML.indexOf('FieldName="'+displayName+'"') != -1){  
  35. $(this).contents().appendTo(elem);  
  36. } }); });  
  37. if($("span.customizeformCancel").length)  
  38. {  
  39. $("input[type='button'][value='Cancel']").hide();  
  40. var cancel = $("input[type='button'][value='Cancel']")[0];  
  41. $("span.customizeformCancel").append($(cancel ));  
  42. $(cancel).show();  
  43. }  
  44. if($("span.customizeformSave").length)  
  45. {  
  46. $("input[type='button'][value='Save']").hide();;  
  47. var save = $("input[type='button'][value='Save']")[0];  
  48. $("span.customizeformSave").append($(save));  
  49. $(save).show();  
  50. }  
  51. if(opt.genericAlert)  
  52. {  
  53. $("input[type='button'][value='Save']").click(function(){  
  54. interval = setInterval(function(){CheckForErrors(opt.alertErrorText)},500);  
  55. }); } }  
  56. function CheckForErrors(alertErrorText)  
  57. {  
  58. if($("span[role='alert']").length)  
  59. {  
  60. alert(alertErrorText);  
  61. clearInterval(interval);  
  62. } }  
  63. })(jQuery);  
  64. </script>  
  65. <h1> Employee Details </h1>  
  66. <span class="customizeformSave"></span>  
  67. <span class="customizeformCancel"></span>  
  68. <div id="accordion">  
  69. <h3>General Details</h3>  
  70. <div> <p>  
  71. <table><tr><td>  
  72. Emp Id </td><td> <span class="customizeform" data-displayName="Emp Id"></span>  
  73. </td></tr>  
  74. <tr><td>  
  75. Employee Name</td><td> <span class="customizeform" data-displayName="Employee Name"></span>  
  76. </td></tr>  
  77. <tr><td>  
  78. <tr><td>  
  79. Email Id</td><td> <span class="customizeform" data-displayName="Email Id"></span>  
  80. </td></tr></table>  
  81. </p>  
  82. </div>  
  83. <h3>Designation Details</h3>  
  84. <div> <p>  
  85. <table><tr><td>  
  86. Status</td><td> <span class="customizeform" data-displayName="Status"></span>  
  87. </td></tr>  
  88. <tr><td>  
  89. Grade</td><td> <span class="customizeform" data-displayName="Grade"></span>  
  90. </td></tr>  
  91. <tr><td>  
  92. <tr><td>  
  93. DOJ</td><td> <span class="customizeform" data-displayName="DOJ"></span>  
  94. </td></tr></table>  
  95. </p> </div>   
You are done with SharePoint new form Customization. Happy Coding.