This was a triumph.
I'm making a note here: HUGE SUCCESS.

Search This Blog

Monday, December 2, 2013

How to hide links in the navigation from users that don't have edit permissions for certain pages in SharePoint 2013

Imagine you have a site that has managed navigation. Most of the pages in the site can be seen by all the users, but there is one page that has unique permissions. This page, for example, is named "Secret headquarters" and should only be visible to the members of the group "Secret service". All other users shouldn't even see the link to that page in the navigation, so basically nobody else but the members of the group should know there is such a page.

So, how do we hide a link to a page with custom permissions? And how exactly can we find out in which groups the user is in, and if the user is a member of the group "Secret service"?
Let me explain that to you.

Preparing a page for unique permissions

First of all, you need to create a group that will hold all the users that will have access to the "secret" page. I named my group "Secret service" and added some users. The group has read and edit permissions.
Then, you will need to create the page (if not already) that will be made hidden to all users except those who are a member of the group "Secret service". When you made the page, do the following:
  1. In your subsite, click on the "Settings" button on the top right corner
  2. Click on "Site content"
  3. Click on the name of the "Pages" library (or the "Subsites" library, depending on where you store your pages)
  4. Find the page you want to make secret, and click on the "..." on the right side of its name
  5. In the small modal dialog, click on "..." again and select "Shared with", then click on "Advanced"
  6. In the ribbon, top left icon, click on "Remove Unique Permissions", click "OK"
  7. Select the remaining groups and then click on "Remove User Permissions", click "OK"
  8. Click on "Grant Permissions", type in the name of the group that will have access to the page (in my case, that will be "Secret service")
  9. Click on "Show options" at the bottom of the dialog and untick "Send an email invitation"
  10. Select "Edit" permissions, press "OK"
  11. repeat steps 8 and 9, now select "Read" permissions, press "OK"
At this point, users who are not a member of the group "Secret service" will still see a link to the page in the navigation, but when they click on it, they will get a "Access denied" message.

Testing the permissions of the page

This will be quick and easy to test if you have a dummy account. If not, then I hope you have a colleague willing to spend 10 minutes of his/her time testing your environment. But let's just continue with the idea of having a dummy account.

First, let's add the dummy to the group and see if the dummy can access the page:
  1. With your administrator account, add the dummy account to the group "Secret service"
  2. Log in with the dummy account, navigate to the page "Secret headquarters"
    • If you can see the page with the dummy, then you did well!
    • If you can't see the page with the dummy, you probably didn't add the dummy user to the group "Secret service".
  3. Still on the dummy account, check if the dummy can see other pages in the same subsite
    • If you can still see all other pages with the dummy, then you did well!
    • If you can't see other pages with the dummy, then you probably set the unique permissions for the whole subsite instead of just the one page

Now we just need to check if the dummy will get an "Access denied" when the dummy tries to access the page without being a member of the group:
  1. With your administrator account, remove the dummy account from the group "Secret service"
  2. Log in with the dummy account, navigate to the page "Secret headquarters"
    • If you can't see the page with the dummy, you did well!
    • If you can see the page with the dummy, then you probably didn't remove the dummy from the group "Secret service".
If you passed these small tests, then we are ready to go to the next step!

Writing the code to hide the page from the navigation

Let's first write down what we want to achieve:
  1. Loop through all links in the navigation on the left side of the subsite
  2. When we encounter a list item in which the href attribute ends with "Secret-headquarters.aspx", we want to check the permissions of that page
  3. If we encounter such an element, we will run a function that will fetch all the groups in which the current user is in
    • If the current user is a member of the group "Secret service", we will take no action and leave the navigation as is.
    • If the current user is not a member of the group "Secret service", then we will select that list item holding the link to "Secret-headquarters.aspx" and set it hidden.
I included some comments, be sure to read those too!
// The following three lines are required, don't forget to find a copy 
//of "jquery.SPServices-2013.01.min.js" and add a reference to it here.
SP.SOD.executeFunc("sp.runtime.js");
SP.SOD.executeFunc("SP.js", "SP.ClientContext");
SP.SOD.executeOrDelayUntilScriptLoaded("SP.UserProfiles.js", 
 "~sitecollection/Style Library/Scripts/jquery.SPServices-2013.01.min.js");

var siteUrl = "";
var element = "";

$(document).ready(function() {
 // We only want to loop through the navigation on the left side of the
 // subsite;
 if($("#NavRootAspMenu") != null) {
  // If present, remove the last list item. This sometimes appears and 
  // causes problems since it doesn't have a href attribute.
  $("ul[id*='RootAspMenu'] li.ms-navedit-editArea:last-child").remove();
 }
});

runMe(); 

function runMe() {
 var $this = $("#NavRootAspMenu");
 if($this != null) {   
  $this.find("li").each(function(i){
   // For each list item that has a "a" element, fetch the "href" 
   // attribute and write it to siteUrl.
   siteUrl = $this.find("a.static")[i].href;
   // When the siteUrl ends with "Secret-headquarters.aspx", save the 
   // current element to "element" and run a function.
   if (siteUrl.indexOf("Secret-headquarters.aspx") > -1) {
    element = $this.find("a.static")[i];
    sharePointReady(siteUrl, element);
   }
  });
 }
}          
      
function sharePointReady(siteUrl, element) {
 // Create an array that will hold a list of all the groups where the 
 // current user is a member of.
 var userGroupArray = new Array();
 var group;
 
 // The line below is handy in case you have multiple pages you want to
 // hide, but need to be accessed by different groups. 
 if(siteUrl.indexOf("Secret-headquarters.aspx") >- 1) { 
  group = "Secret service";
 } 
 
 // Get all groups where the current user is a member of.
 var userGroup = $().SPServices({ 
  operation: "GetGroupCollectionFromUser", 
  userLoginName: $().SPServices.SPGetCurrentUser(), 
  async: false, 
  completefunc: function(xData, Status) {
   $(xData.responseXML).find("Group").each(function() {
    // Push the name of the group to the array.
    userGroupArray.push($(this).attr("Name"));
   });
  }
 });
 
 // This useful little function is to check if an element is contained in
 // your array. 
 function include(arr, obj) {
  for (var i = 0; i < arr.length; i++) {
   if (arr[i] == obj) return true;
  }
 }

 // If the array contains the group "Secret service", then do nothing. 
 if(include(userGroupArray,group)) {
  //console.log("You can edit this!");
 }
 // If the array does not contain the group "Secret service", then hide
 // the element from the current user so that he/she cannot navigate to
 // the page. 
 else {
  //console.log("You can't edit this!");
  element.style.display="none";
 }
}

That's it! We're ready with the script. Now it's time to test it out and see if it works.

Adding a reference to the master page

If we want to apply this code on multiple subsites, then it is best that we add a reference to our script in the master page. I just added the code to an existing script that was already loaded on the master page (I use a HTML master page), but if you want to add it as a separate script, this is how it might look like:
<!--SPM:<SharePoint:ScriptLink language="javascript" ID="scriptLink1" 
runat="server" name="~sitecollection/Style Library/Scripts/scripts.js" 
OnDemand="false" Localizable="false"/>-->

Do note that the ID might be different. You must make sure that you do not already have a scriptlink with the same ID, so change the number of the ID and make it unique.
Check in your master page and your script, and go take a look at the page.
You can re-do the steps mentioned in "Testing the permissions of the page", and this time you will immediately see if the list item for the page "Secret headquarters" is present in the list or not.
It should now be hidden from users who are not a member of the group "Secret service", and it will remain visible to those who are a member of that group.

Enjoy!

If you have any questions, please do not hesitate to ask!
Special thanks go to Ali Sharepoint from Stack Exchange, who helped me with the code.
The code for "JavaScript Array Contains" was found on www.css-tricks.com.

11 comments:

  1. Hi. I wanted to know if it was easy to work the other way and hide everything except for 1 page unless in a specific group and then show all pages?

    ReplyDelete
    Replies
    1. So basically, hide all the pages except page X, and if a user is a member of a group Y, show all pages?
      In that case I would do the following:

      Give all the pages custom permissions (read "Preparing a page for unique permissions" to know how to do this) and add group Y as the only group that has permissions on those pages. For page X, you create a group Z with all users in it and give group Z read permissions for page X.

      Replace the code on line 32 with the following:
      if (siteurl != null) {

      Replace the code on line 48 to 50 with the following:
      if(siteUrl.indexOf("Name-of-page-X.aspx") >- 1) {
      group = "Group Z";
      }
      else {
      group = "Group Y";
      }

      In the "if" statement, you give the end of the url of page X (the page that everyone should see) and you also give the name of group Z, the group in which all your users are. In the "else" statement, you give the name of group Y (which allows users to see all the pages when they are a member of this group).

      The script will run for every list item in the navigation.
      If the code detects that page X is in the navigation, and the current user is member of group Z, then the user will only see page X. If the user is a member of group Y as well, then the user will also see all the other pages. If not, the user will only see page X (provided that you added the user to group Z, which has permissions only for page X).
      So this way, only users who are a member of group Y can see all the other pages because you gave those pages unique permissions, allowing them to be visible to only that group.

      I hope I was of any help to you. Give it a try and let me know if it works!

      Delete
  2. Instead of: "Loop through all links in the navigation on the left side of the subsite"

    Do you know how you could loop through all the links in the farm?

    Trying to display internal/secret sites in the top nav based on permission groups.

    Thanks - Paul

    ReplyDelete
    Replies
    1. I think you just need to get the ID for the div element that wraps the top navigation? That ID would be "DeltaTopNavigation". Not 100% sure though,
      Replace the code on line 14 with: if($("#DeltaTopNavigation") != null) {
      Replace the code on line 24 with: var $this = $("#DeltaTopNavigation");
      That way it will loop through all the links in the top navigation. Do let me know if this is the answer you were looking for! If not, do let me know and I'll see what I can do to help.

      Delete
  3. Hi thanks for posting this. Is there any way to run this for a top navigation? Thanks!

    ReplyDelete
    Replies
    1. I believe it should be possible, yes! On line 24, change it from "NavRootAspMenu" to "DeltaTopNavigation". I haven't tested this but I think with a little tweaking and experimenting this will get you the result.

      Delete
  4. Good day

    How do u achieve the same results with a custom menu?

    Tman

    ReplyDelete
    Replies
    1. I'm assuming your custom menu has a parent element with an ID, in which case you just replace the code on line 24 and add the ID of your element there (instead of "#NavRootAspMenu"). It will then look at each list item it encounters inside of that parent element. You may want to remove or replace the a.static part though, as a custom menu will probably use different classnames.

      Delete
  5. Hey Magali,

    I have tested your solution and got "ReferenceError: $ is not defined" line "$(document).ready(function()". Any suggestions?

    Thanks

    ReplyDelete
    Replies
    1. Did you put the references to the jquery library in your page? It sounds like you're missing the jquery library since it fails at the $(document) part.

      Delete
  6. Hi,

    I get the same 'ReferenceError' even though I referenced the jquery library in the masterpage. Any ideas why this might happen?

    ReplyDelete