How can I hide the gear icon based off permissions?

[phil333]

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 help would be great. Thank you.

[#2]

@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.

[#3]

@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.

[#4]

@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?

[#5]

Hi @phil333 , The Gear Icon shows only the things, your User will get to see according to their permission levels. I think, it is a good one to NOT hide icons in a SharePoint. SharePoint is not a HidePoint. Make sure, your users get a basic training or online course to learn, what the icons can do to for them. 

For instance, you always can restrict certain pages or the whole pages library of a site with a content approval, so that they cannot manipulate on whats in your pages without your approval. The pages library is in the site content of a site, you can go to "Library Settings" as a site Owner, than go to "advanced settings" - activate the first check box in this page here to set on a content approval. So each time someone changes the content, you'll get an alert by Mail and also can easily approve or reject a change. This is by far better than bother with coding in SharePoint Framework, I suggest. Have a good day today! And if I can help, pls. give a LIKe. Greets from Eva.

[#6]

@Eva Vogel Thank you for your response.

"SharePoint is not a HidePoint" was a good one. Unfortunately in this situation, SP is what ever the project manager wants it to be. Of which they don't want site contents and site usage visible to just every one. 

I do like your solution though for what is is worth. In a different scenario (probably most) I think it would really do the trick.

[#7 · Accepted solution]

@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-exte...

[#8]

I agree with @phil333.

@Eva Vogel, The issue is not approval content or publishing content. The issue is if we doesnt want to show the some of the groups(External group) where external users will have access to the content (Lists/Library and all of the items/files). which they don't need to access to all of the content. So prevention is better then cure..so the main purpose is to hide the settings gear from suite .

[#9]

Excellent contribution! I was able to replicate and test your code and it works as expected. This is very useful for enabling settings engagement only for admins and end users not having access to what's behind the scenes. Thank you very much for your valuable contribution.