JSLink is one of the most widely used CSR (client-side rendering) techniques used by SharePoint developers. In today’s article, we will learn how to use JS Link to show or hide the fields based on the logged in user group.

We had got one of the requirements from our client to hide/show fields in the new form as per the user logged in the group.

Columns description

The below table shows the fields that should be shown/hidden according to the logged in user group

SL NoUser GroupFields to be shownFields to be Hidden
1.Client IndiaTitle,ClientID,ClientNameDeveloperID,DeveloperName, ArchitectID, ArchitectName
2.Developers IndiaTitle,DeveloperID,DeveloperNameClientID,ClientName,ArchitectID, ArchitectName
3.Architects IndiaTitle, ArchitectID, ArchitectNameDeveloperID,DeveloperName, ClientID,ClientName

Below is the JSLink code sample which we used to hide/show fields based on the user group

  1. (function () {
  3. // Create object that have the context information about the field that we want to change it's output render
  5. var hidecontext = {};
  6. var groups=["Architects India","Client India","Developers India"];
  7. var checkarchitect=null;
  8. var checkdeveloper=null;
  9. var checkclient=null;
  10. var rendercount=0;
  11. hidecontext.Templates = {};
  13. hidecontext.OnPreRender=function(ctx){
  15. for(var i=0; i<groups.length;i++)
  16. {
  18. if(groups[i].toString()=="Architects India")
  19. {
  21. $.ajax({
  22. url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/sitegroups/getByName('"+ groups[i] +"')/Users?$filter=Id eq "+ _spPageContextInfo.userId,
  23. method: "GET",
  24. headers: { "Accept": "application/json; odata=verbose" },
  25. success: function(data){
  26. if(data.d.results[0]!= undefined)
  27. {
  28. checkarchitect=true;
  29. console.log("checkarchitect value "+checkarchitect);
  30. console.log(JSON.stringify(data.d.results));
  31. console.log("Current user is part of the architects india group");
  32. //hidefields();
  33. }
  34. }
  35. });
  36. }
  38. else if(groups[i].toString()=="Client India")
  39. {
  41. $.ajax({
  42. url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/sitegroups/getByName('"+ groups[i] +"')/Users?$filter=Id eq "+ _spPageContextInfo.userId,
  43. method: "GET",
  44. headers: { "Accept": "application/json; odata=verbose" },
  45. success: function(data){
  46. if(data.d.results[0] != undefined){
  47. checkclient=true;
  48. console.log("checkclient value "+checkclient);
  49. console.log("Current user is part of the Client India group");
  50. //hidefields();
  51. }
  52. }
  53. });
  54. }
  56. else if(groups[i].toString()=="Developers India")
  57. {
  59. $.ajax({
  60. url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/sitegroups/getByName('"+ groups[i] +"')/Users?$filter=Id eq "+ _spPageContextInfo.userId,
  61. method: "GET",
  62. headers: { "Accept": "application/json; odata=verbose" },
  63. success: function(data){
  64. if(data.d.results[0] != undefined)
  65. {
  66. checkdeveloper=true;
  67. console.log("checkdeveloper value "+checkdeveloper);
  68. console.log("Current user is part of the Developers India group");
  69. //hidefields();
  70. }
  71. }
  72. });
  73. }
  74. }
  75. };
  76. hidecontext.OnPostRender=function(Ctx){
  78. hidefields();
  79. console.log("post rendering fired"+checkarchitect+"value of architect"+checkclient+"value of thecheckclient"+checkdeveloper+"value of checkdeveloper");
  80. if(rendercount==0)
  81. {
  83. $("<div id='UserTitle' style='text-align:center;'>Appropriate Users Click to show the respective Fields</div>").insertBefore(($("input[title='Title Required Field']")).parents("table:first"));
  84. rendercount++;
  86. }
  87. $("#UserTitle").click(function(){
  88. console.log("UserTitle div click event fired");
  90. if(checkarchitect!=null && checkarchitect==true)
  91. {
  92. console.log("architect section should be shown now");
  93. $("input[title='ClientID']").closest("tr").hide();
  94. $("input[title='ClientName']").closest("tr").hide();
  95. $("input[title='DeveloperName']").closest("tr").hide();
  96. $("input[title='DeveloperID']").closest("tr").hide();
  97. $("input[title='Title Required Field']").closest("tr").show();
  98. $("input[title='ArchitectName']").closest("tr").show();
  99. $("input[title='ArchitectID']").closest("tr").show();
  100. }
  101. else if(checkclient!=null && checkclient==true)
  102. {
  103. console.log("client section should be shown now");
  104. $("input[title='ArchitectName']").closest("tr").hide();
  105. $("input[title='ArchitectID']").closest("tr").hide();
  106. $("input[title='DeveloperName']").closest("tr").hide();
  107. $("input[title='DeveloperID']").closest("tr").hide();
  108. $("input[title='ClientID']").closest("tr").show();
  109. $("input[title='ClientName']").closest("tr").show();
  110. $("input[title='Title Required Field']").closest("tr").show();
  111. }
  112. else if(checkdeveloper!=null && checkdeveloper==true)
  113. {
  114. console.log("developer section should be shown now");
  115. $("input[title='ArchitectName']").closest("tr").hide();
  116. $("input[title='ArchitectID']").closest("tr").hide();
  117. $("input[title='ClientID']").closest("tr").hide();
  118. $("input[title='ClientName']").closest("tr").hide();
  119. $("input[title='DeveloperName']").closest("tr").show();
  120. $("input[title='DeveloperID']").closest("tr").show();
  121. $("input[title='Title Required Field']").closest("tr").show();
  123. }
  124. else
  125. {
  126. console.log("status not showing up");
  127. }
  128. });
  129. };
  130. SPClientTemplates.TemplateManager.RegisterTemplateOverrides(hidecontext);
  131. function hidefields()
  132. {
  133. $("input[title='ArchitectName']").closest("tr").hide();
  134. $("input[title='ArchitectID']").closest("tr").hide();
  135. $("input[title='ClientID']").closest("tr").hide();
  136. $("input[title='ClientName']").closest("tr").hide();
  137. $("input[title='DeveloperName']").closest("tr").hide();
  138. $("input[title='DeveloperID']").closest("tr").hide();
  139. $("input[title='Title Required Field']").closest("tr").hide();
  141. }
  143. })();

Explanation of the code sample: