Forum Discussion
SharePoint Online hide "site contents" and "site usage" page (modern sites)
phil333 hello.
Can you provide additional details/steps to your process (particularly for those this is new to)?
Following the video instructions, I am using Visual Studio Code.
- What specific extension did you import/install?
- What specific area did you add your provided code?
- Can you provide guidance on how to make the extension available on a SP site?
Thank you in advance for any help.
Hey its good to meet a fellow traveler that's new to this stuff too. Ill do my best to answer your question.
- Once build is done add this to top of “The Name of Your Extension”ApplicationCustomizer.ts. Its in the folder “src/extensions/”.
import { SPPermission } from '@microsoft/sp-page-context';
imports
- Below your imports you will see a section saying something like: “public onInit(): Promise<void>”. Under “Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);” is where you enter your code.
standard looking code
- Here is the JavaScript I used to hide the gear:
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);
}
- Make sure you save your work.
- In a cmd console, in the directory of your project, run:
gulp bundle –ship
- Then run:
gulp package-solution --ship
note: your application will be saved in projects directory: 'sharepoint/solutions/'
- Finally just upload your App to your SharePoint catalog site. You extension will show up just how it would when you add a webpart to a site.
Again I hope this helps. It does the trick for me.
phil333 Thank you for the additional detail!
This was our first attempt at creating and uploading extensions, so I had to follow the "Setup Environment" and "Build an extension" videos you referenced in your earlier post.
In short, by following the videos and using your offered code - we have resolved our gear issue for Read Only SPOnline users. Thank You again for your assistance!
For additional context and encouragement to continue your contributions, we operate Senior Housing Communities. Since we heavily utilize Sharepoint Online internally for employees, we recently decided to create "Member Portals" (i.e. simplified SharePoint sites) for our independent living residents to have secure access to dining menus/reservations, social events, calendars, guides/directories, etc. We struggled for months to prevent the ability of residents to have access to the Site Contents section (through the gear icon). On Tuesday, a resident trialing a site before "go live" suggested we remove the gear (fueling my frustration from not initially coming up with a solution). After finding your post and several hours of baptizing myself in extension building, six of the live Member Portals have this fix applied which serves more than 600 active seniors (small ray of sunshine in this pandemic clouded world). The remaining six sites have it applied prior to "go live". Microsoft should certainly make it easier to disable, but glad these forums assist those that choose not to wait.
I am very happy you have solved your problem. Nothing like the feeling of actually making something work.
I also appreciate insight into your SP setup (or you know, how you utilize it). Our current setup serves a little over 600 as well.
I agree that dealing with the gear should be easier than it is and yea these forums have been super helpful for me too. I think I use to live in the PowerApps forum.
Again, thank you.
phil333 Thanks so much for this. One questions, please bear with me because I'm not all that informed when it comes to using SharePoint Designer, once this is done, will I still be able to access the gear icon as the site owner? If not, how do I access all of the site settings?
Thank you,
Paul.
PaulMS Hello
Unfortunately if your speaking of SharePoint Designer I assume your trying this on classic pages? I used my code in conjunction with Spfx extensions in mind. These only work with modern pages.
The idea would be the same though. With js you check for permissions and then deal with the gear icon accordingly.
In my setup I left the gear visible to anyone with edit rights. Hope this helps.
