6

I have a SPFX customizer that displays a banner in the topPlaceholder. When the page loads, if it's a list, then it performs a calculation and then displays the banner.

When I move from one library to another, because the page isn't performing a full load, I found out I need use the navigatedEvent. This fires when the navigation changes.

However, I need to display the banner differently depending on what folder I'm in within a single document library. When navigating from one folder to another in a document library the navigatedEvent doesn't seem to fire, even though I am navigating to a different location.

Is this a bug with the navigatedEvent, or should I be using a different event?

    public onInit(): Promise<void> {
       var rootSiteFullUrl = this.context.pageContext.site.absoluteUrl;
    pnp.setup({
      spfxContext: this.context
    });

   this.context.application.navigatedEvent.add(this,  this.renderControl);  
    return Promise.resolve<void>();
  }


    private renderControl(){
    Log.info(LOG_SOURCE, `Available placeholders: ${this.context.placeholderProvider.placeholderNames.map(name => PlaceholderName[name]).join(', ')}`);


    //handling the top placeholder
    if(!this._topPlaceholder){
      this._topPlaceholder = this.context.placeholderProvider.tryCreateContent(
          PlaceholderName.Top, 
          {onDispose: this._onDispose});

      if(!this._topPlaceholder){
        console.error(`The expected placholder (Top) was not found.`);
        return;
      }  
    }

    if(this._topPlaceholder.domElement){
        const element : React.ReactElement<IInfoBarMainProps> = React.createElement(
          MainClosureBar,{
            siteRelativeUrl: this._siteRelativeURL,
            listID: this._listID,
            rootSiteUrl: this._rootSiteURL,
            context: this.context
          }
        );

        ReactDom.render(element, this._topPlaceholder.domElement);
    }
  }

  private _onDispose(){
    Log.info(LOG_SOURCE, `[IInfoBarApplicationCustomizer._onDispose] Disposed custom top placeholders`);
  }

I have a feeling that there isn't an event for navigating inside a folder, as when I'm in a folder, there is nothing within the this.context.pageContext that indicates that I'm in a folder.

0

I found the same issue and I troubleshooted it using the mutation observer and monitoring the breadcrumb. Here is some code that will help you to reach your goal:

let targetNode1 = document.querySelector(".od-ItemsScopeItemContent > div > div > div > div >div");

this._observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => this._myCustomHeaderBasedOnCurrentFolder(mutation));
});

if (targetNode1) {
  this._observer.observe(targetNode1, {
    attributes: true,
    attributeOldValue: true,
    subtree:true,
  });
}

}

The method

_myCustomHeaderBasedOnCurrentFolder

Is the action you want to perform when browsing through the folders. You will need to tune up a bit the observer config for a better monitoring.

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.