Forum Discussion
SharePoint Online hide "site contents" and "site usage" page (modern sites)
Hey hows it going.RedK1
A spfx extension seemed to solve my problem.
In my application customizer I imported SPPermission and then used some js to do what I needed.
My Code below:
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);
Reference:
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 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.
