SharePoint 2013: Hide JSLink from Team Members

This article applies to SharePoint Online, SharePoint 2013 and 2016.

 

Let's start with a couple "did you knows"…

Did you know:

• All users with Edit and Contribute permission levels can edit the home page of your site?
• The same users can edit or delete any page in the Site Pages library.?
• They can also edit the web parts on that page? And use advanced options like JS Link?

As part of your SharePoint governance or best practices you may want to limit who can use some of the more advanced customization features of SharePoint 2013 and 2016. JS Link, is after all, JavaScript programming and it can cause issues for daily support and the upgrade to future versions of SharePoint.

Before we get into locking down just JS Link, let's address the "did you knows". You may want to think about changing the permissions of Site Pages, Site Assets and a few other libraries to read only for all users except for Site Owners. Those libraries really should not be open for all to edit.

 

About JS Link

JS Link is a really cool technology introduced with SharePoint 2013 to let us customize web parts, views and list forms without "un-ghosting" pages using SharePoint Designer. It lets us create a JavaScript text file, store it in a library, and then link it to a web part or a form. If you are a developer, you can also use JS Link with Site Columns and Site Content Types. One of the benefits of JS Link is that the customization file can be created once, stored in a library and then be linked into many web parts and forms. When you need a change in the future, you only need to edit a single JavaScript file and not dozens or hundreds of web parts.

For web parts, JS Link is added in the Miscellaneous section of the web part properties panel.

 

Hiding JS Link

As SharePoint does not have a "switch" where we can just turn off the use of JS Link, we will need to come up with a CSS or JavaScript solution. If you add the following CSS to your master page (lots of ways to do this) then the JS Link box will be hidden.

<style type="text/css">
  input[id$="_JSLink_EDITOR"] {
    display:none;
  }
  label[for$="_JSLink_EDITOR"] {
    display:none;
  }
</style>

 

While we are at it, you may also want to hide the XSL Link option too:

<style type="text/css">
  input[id$="_JSLink_EDITOR"] {
    display:none;
  }
  label[for$="_JSLink_EDITOR"] {
    display:none;
  }
  input[id$="_XslLink_EDITOR"] {
    display:none;
  }
  label[for$="_XslLink_EDITOR"] {
    display:none;
  }
</style>

 

But what about the Site Owner?

If you want some users to still be able to edit the JS Link and XSL Link options then we can give those back using a SharePoint Security Trimmed Control. You just need to pick a permission that is unique that that group of users such as Add and Customize Pages. In the example below we take away JS Link from all users, and then give it back to select users.

<style type="text/css">
  input[id$="_JSLink_EDITOR"] {
    display:none;
  }
  label[for$="_JSLink_EDITOR"] {
    display:none;
  }
  input[id$="_XslLink_EDITOR"] {
    display:none;
  }
  label[for$="_XslLink_EDITOR"] {
    display:none;
  }
</style>

<Sharepoint:SPSecurityTrimmedControl runat="server" 
  PermissionsString="AddAndCustomizePages">
  <!-- Let owners and designers see the JSLink options -->
  <style type="text/css">
    input[id$="_JSLink_EDITOR"] {
      display:inline;
    }
    label[for$="_JSLink_EDITOR"] {
      display:inline;
    }
    input[id$="_XslLink_EDITOR"] {
      display:inline;
    }
    label[for$="_XslLink_EDITOR"] {
      display:inline;
    }
  </style>
</SharePoint:SPSecurityTrimmedControl>

 

.