Forum Discussion

phil333's avatar
phil333
Brass Contributor
Nov 02, 2020
Solved

How can I hide the gear icon based off permissions?

In the top right corner of modern sites is the settings gear. This gives to much access to those who don't need it. Is there any way to hide this based off permissions or groups, spfx extension? Any h...
admin
Permissions
security
SharePoint Online
  • phil333's avatar
    phil333
    Nov 09, 2020

    phil333 

    A spfx extension solved my problem!

     

    In my application customizer I imported SPPermission and then used some js to do what I needed.
    My Code below:

    const canEdit = this.context.pageContext.web.permissions.hasAnyPermissions(SPPermission.manageWeb);
if(!canEdit){
let checkExist = setInterval(function() {
const element = document.querySelector("#O365_MainLink_Settings_container").firstChild.firstChild.firstChild.firstChild;
if(typeof(element) != "undefined" && element != null){
element.parentElement.parentElement.parentElement.remove();
console.log("GFC user only has view rights.");
clearInterval(checkExist);
}
}, 100);
}


    References:
    Setup Environment: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment
    Build an extension: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/build-a-hello-world-extension

phil333's avatar
phil333
Brass Contributor
Nov 05, 2020

phil333 

In the hopes that this may help someone else...

 

I've been having luck using an spfx extension to view if the user has certain permissions. I still haven't been able to successfully hide the gear Icon though.  

 

The js I use works well on the first page load but then doesn't after that.  Not sure what's off.

  • ganeshsanap's avatar
    ganeshsanap
    MVP
    Nov 06, 2020

    phil333 

    SPFx extension will work only on modern pages in SharePoint.

     

    If it is not working on modern page then it might be the issue of browser cache. If you are testing in debugging mode then try uploading SPFX extension package in App catalog and then on your site.

     

    Also try testing by clearing browser cache.

    Please click Mark as Best Response if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

     

    • phil333's avatar
      phil333
      Brass Contributor
      Nov 09, 2020

      ganeshsanap 

       

      I was starting to wonder if anyone would reply, thank you.

       

      I have deployed and ran the extension on a test site but again, it works on first load and not after. Do you know how I would handle the cache issue? 

       

      Right now my js uses a function with set interval to check if the element is loaded. This doesnt always work though: 

       

      let checkExist = setInterval(function() {
          const element = document.querySelector("#O365_MainLink_Settings_container");
          if(typeof(element) != "undefined" && element != null){

              console.log("Element exists!");
              document.querySelector('#O365_MainLink_Settings_container').style.visibility = "hidden";
              clearInterval(checkExist);
          }
          
      }, 100);
       
      Any thoughts?

Resources