Post
Ask Question

JS-Link Client Side Rendering To Show/Hide Specific Fields Based On User Group

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 () {   
  2.   
  3. // Create object that have the context information about the field that we want to change it's output render  
  4.   
  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 = {};   
  12.   
  13. hidecontext.OnPreRender=function(ctx){  
  14.   
  15.     for(var i=0; i<groups.length;i++)  
  16.     {  
  17.   
  18.         if(groups[i].toString()=="Architects India")  
  19.         {  
  20.   
  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.         }  
  37.   
  38.         else if(groups[i].toString()=="Client India")  
  39.         {  
  40.   
  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.         }  
  55.   
  56.         else if(groups[i].toString()=="Developers India")  
  57.         {  
  58.   
  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){  
  77.   
  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.     {  
  82.   
  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++;  
  85.   
  86.     }  
  87.     $("#UserTitle").click(function(){  
  88.         console.log("UserTitle div click event fired");  
  89.   
  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();  
  122.   
  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();  
  140.   
  141. }  
  142.   
  143. })();  

Explanation of the code sample:

  • During initialization function, we are creating an array which contains user groups to be checked during the rendering process and if the logged in user is found in any of the group the particular status variable is set to true.
  • During OnPreRender() function we are just making the AJAX REST API call to check if the logged in user belongs to any of the groups mentioned in the array. If the logged in user is part of the group, we will set the particular status variable to true (for ex: if the user is part of the “Clients India” group we will set the variable “checkclient” to true).
  • During OnPostRender() function we are hiding all the fields in the list, then by checking the status of the variables (checkclient, checkdeveloper, checkarchitect) we will show the fields related only those users.


Similar Articles