Detect navigation change in SPFX Application customizer

[pmatthews05]

Category

• Question
• Typo
• Bug
• Additional article idea

Expected or Desired Behavior

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?

Observed Behavior

When navigating from one folder to another, the navigatedEvent doesn't fire.

Steps to Reproduce

Have the following code running on a document libraries. Have a document library with folders. View the debug console of the browser. If you navigate between the folders, you will discover that the renderControl doesn't fire again. It only fires on changes between libraries (if deployed to app catalog, not running through debug localhost session)

` public onInit(): Promise {
this.context.application.navigatedEvent.add(this, this.renderControl);
return Promise.resolve();
}

private renderControl(){

console.log("Rendering control');
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(
      MainBar,{
            context: this.context
      }
    );
    ReactDom.render(element, this._topPlaceholder.domElement);
}

}

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

Is there a different event I should be using? Also, if I navigated inside a folder, is there a way to work out which folder with a URL?

[VesaJuvonen]

Potential duplicate as #1265.

[pmatthews05]

@VesaJuvonen although my issue similar to #1265, it not quite the same. My issue is that navigatedevent doesn't fire when you navigate inside folders that are in the document library. The other issue seems to be about the placeholders not available when switching pages.

[VesaJuvonen]

yes - we do get that, but root cause or the issue is similar to the internal event handling in the Framework, which is why we cross-linked this in GitHub and in VSO. Obviously, we'll need to ensure that we have all of these fixed properly asap and the issue is being looked at by our engineering.

[ahackettms]

@pmatthews05 we are working on providing a solution to provide folder information in page context when navigate into a folder, and fire the navigation event.

[OmniFace]

The navigatedEvent also do not fire if performing a search or returning to the home page, unless you started on the search page (refresh or bookmark) and then move to the home page.

Is this a bug as well? Is navigatedEvent supposed to fire with all page transitions that don't reload the DOM?

[VesaJuvonen]

We have now changed our eventing model related on fix with #1042. This should be solving this issue as well, so closing this. If you still have issues around this, please do let us know. Thx.

[dhruvp29]

I am still facing this issue. When navigating from one folder to another, the navigatedEvent doesn't fire.

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues