0

enter image description here

I would like to hide the above commandbar in all pages using javascript in spfx extensions(application customizer).

I have tried the below code

@override
  public onInit(): Promise<void> {
    return super.onInit().then(_ => {
      pnp.setup({
        spfxContext: this.context
      });
    }).then(()=>{
      $(document).ready(()=>{
        pnp.sp.web.currentUser.get().then(d=>{
          pnp.sp.web.associatedOwnerGroup.users.getById(d.Id)
          .get().then((data)=>{
            console.log("Site Owner");
          }).catch((error)=>{
            console.log("Not Site Owner");            
            //hidding the button divs on banner for current users who are not owner
            $(".commandBarWrapper").bind("load",()=>{
              if($('.ms-CommandBar')){
                $(".ms-CommandBar").hide();                
              }           
          });
        });          
    });
  });
}

Is there any other way to know if the component has been loaded?

Please help

1

Update the hide logic by injecting a custom CSS so you don't need care about the page element load time.

 public onInit(): Promise<void> {
    Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
    const cssUrl: string = this.properties.cssurl;
    if (cssUrl) {
        // inject the style sheet
        const head: any = document.getElementsByTagName("head")[0] || document.documentElement;
        let customStyle: HTMLLinkElement = document.createElement("link");
        customStyle.href = cssUrl;
        customStyle.rel = "stylesheet";
        customStyle.type = "text/css";
        head.insertAdjacentElement("beforeEnd", customStyle);
    }
    return Promise.resolve();
  }

Check this demo.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.