In my recent post I’ve illustrated how can you implement a permission-based custom rendering template using the JavaScript client object model (JSCOM) and jQuery. That rendering template was implemented using the standard asynchronous JavaScript patterns via a callback method to not block the UI thread of the browser. In a fast network (in a LAN, for example) however, a synchronous implementation can function as well. Although there are some unsupported methods to make a JSCOM request synchronously, the JavaScript client object model was designed for asynchronous usage (see its executeQueryAsync method). To send our requests synchronously, we utilize the REST / OData interface in this post, and send the requests via the ajax function of jQuery.
To understand the original requirements and the configuration (field and list names, etc.), I suggest to read the first part first.
To enable using of jQuery selectors containing the dollar sign ($), we use the same escapeForJQuery helper function that we’ve created for the first part.
- var restrictedValues1 = ['Approved', 'Rejected'];
- var restrictedValues2 = ['Resubmit'];
- var custom = custom || {};
- custom.controlId = null;
- var adminGroup = "MyGroup";
- custom.escapeForJQuery = function (value) {
- var newValue = value.replace(/\$/g, "\\$");
- return newValue;
- }
Instead of simply wrapping the standard display template of choice fields (SPFieldChoice_Edit), the editFieldMethod function is responsible to get the HTML content of the field control, as it would be rendered without the customization by invoking the SPFieldChoice_Edit function, then we determine the group membership of the user by calling the synchronous isCurrentUserMemberOfGroup function (more about that a bit later), finally we alter the HTML content by hiding the adequate options by calling the hideOptions function (see it later as well).
- custom.editFieldMethod = function (ctx) {
- var fieldSchema = ctx.CurrentFieldSchema;
- custom.controlId = fieldSchema.Name + '_' + fieldSchema.Id + '_$DropDownChoice';
- var html = SPFieldChoice_Edit(ctx);
- var isCurrentUserInGroup = custom.isCurrentUserMemberOfGroup(adminGroup);
- if (isCurrentUserInGroup) {
- html = custom.hideOptions(html, custom.controlId, restrictedValues1);
- }
- else {
- html = custom.hideOptions(html, custom.controlId, restrictedValues2);
- }
- return html;
- }
The hideOptions function loads the HTML source of the control into the DOM and removes the options that should be hidden for the given group. Finally it returns the HTML source of the altered control:
- custom.hideOptions = function (html, ctrlId, restrictedValues) {
- var parsedHtml = $(html);
- restrictedValues.forEach(function (rv) {
- var selector = "#" + custom.escapeForJQuery(ctrlId) + " option[value='" + custom.escapeForJQuery(rv) + "']";
- $(parsedHtml).find(selector).remove();
- });
- var result = $(parsedHtml).html();
- return result;
- }
The isCurrentUserMemberOfGroup function sends a synchronous REST request via the the ajax function of jQuery to determine the group membership of the current user:
- var serverUrl = String.format("{0}//{1}", window.location.protocol, window.location.host);
- custom.isCurrentUserMemberOfGroup = function (groupName) {
- var isMember = false;
- $.ajax({
- url: serverUrl + "/_api/Web/CurrentUser/Groups?$select=LoginName",
- type: "GET",
- async: false,
- contentType: "application/json;odata=verbose",
- headers: {
- "Accept": "application/json;odata=verbose",
- "X-RequestDigest": $("#__REQUESTDIGEST").val()
- },
- complete: function (result) {
- var response = JSON.parse(result.responseText);
- if (response.error) {
- console.log(String.format("Error: {0}\n{1}", response.error.code, response.error.message.value));
- }
- else {
- var groups = response.d.results;
- groups.forEach(function (group) {
- var loginName = group.LoginName;
- console.log(String.format("Group name: {0}", loginName));
- if (groupName == loginName) {
- isMember = true;
- }
- });
- }
- }
- });
- return isMember;
- }
In this case we simply register the editFieldMethod for both the ‘EditForm’ and for the ‘NewForm’ mode of the Status field, there is no need for the OnPostRender method:
- var customOverrides = {};
- customOverrides.Templates = {};
- customOverrides.Templates.Fields = {
- 'Status': {
- 'EditForm': custom.editFieldMethod,
- 'NewForm': custom.editFieldMethod
- }
- };
- SPClientTemplates.TemplateManager.RegisterTemplateOverrides(customOverrides);
The full source code of the rendering template introduced in this post:
- 'use strict';
- (function () {
- var restrictedValues1 = ['Approved', 'Rejected'];
- var restrictedValues2 = ['Resubmit'];
- var custom = custom || {};
- custom.controlId = null;
- var adminGroup = "MyGroup";
- custom.escapeForJQuery = function (value) {
- var newValue = value.replace(/\$/g, "\\$");
- return newValue;
- }
- custom.hideOptions = function (html, ctrlId, restrictedValues) {
- var parsedHtml = $(html);
- restrictedValues.forEach(function (rv) {
- var selector = "#" + custom.escapeForJQuery(ctrlId) + " option[value='" + custom.escapeForJQuery(rv) + "']";
- $(parsedHtml).find(selector).remove();
- });
- var result = $(parsedHtml).html();
- return result;
- }
- custom.editFieldMethod = function (ctx) {
- var fieldSchema = ctx.CurrentFieldSchema;
- custom.controlId = fieldSchema.Name + '_' + fieldSchema.Id + '_$DropDownChoice';
- var html = SPFieldChoice_Edit(ctx);
- var isCurrentUserInGroup = custom.isCurrentUserMemberOfGroup(adminGroup);
- if (isCurrentUserInGroup) {
- html = custom.hideOptions(html, custom.controlId, restrictedValues1);
- }
- else {
- html = custom.hideOptions(html, custom.controlId, restrictedValues2);
- }
- return html;
- }
- var serverUrl = String.format("{0}//{1}", window.location.protocol, window.location.host);
- custom.isCurrentUserMemberOfGroup = function (groupName) {
- var isMember = false;
- $.ajax({
- url: serverUrl + "/_api/Web/CurrentUser/Groups?$select=LoginName",
- type: "GET",
- async: false,
- contentType: "application/json;odata=verbose",
- headers: {
- "Accept": "application/json;odata=verbose",
- "X-RequestDigest": $("#__REQUESTDIGEST").val()
- },
- complete: function (result) {
- var response = JSON.parse(result.responseText);
- if (response.error) {
- console.log(String.format("Error: {0}\n{1}", response.error.code, response.error.message.value));
- }
- else {
- var groups = response.d.results;
- groups.forEach(function (group) {
- var loginName = group.LoginName;
- console.log(String.format("Group name: {0}", loginName));
- if (groupName == loginName) {
- isMember = true;
- }
- });
- }
- }
- });
- return isMember;
- }
- var customOverrides = {};
- customOverrides.Templates = {};
- customOverrides.Templates.Fields = {
- 'Status': {
- 'EditForm': custom.editFieldMethod,
- 'NewForm': custom.editFieldMethod
- }
- };
- SPClientTemplates.TemplateManager.RegisterTemplateOverrides(customOverrides);
- })();
Assuming your custom list is called PermBasedField, and both jQuery (in my case it is jquery-1.9.1.min.js) and our custom JavaScript rendering template (in my case it’s called permissionBasedFieldTemplate2.js) are stored in the root of the Site Assets library of the root web, you can register the template using the following PowerShell script:
$web = Get-SPWeb http://YourSharePointSite
$list = $web.Lists["PermBasedField"]
$field = $list.Fields.GetFieldByInternalName("Status")
$field.JSLink = "~sitecollection/SiteAssets/jquery-1.9.1.min.js|~sitecollection/SiteAssets/permissionBasedFieldTemplate2.js"
$field.Update()
Note, that (in contrast to the script introduced in the first part of this post) there is no need for the JSCOM JavaScript files (sp.runtime.js and sp.js) in this case.
