Repository: SharePoint/sp-dev-docs

Issue #1254: Detect navigation change in SPFX Application customizer
Created: 2018-01-19T09:13:50Z
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?

Duplicate issue #1042: SPFX Placeholder/Header (Application Extension) - Events bug?
Created: 2017-11-13T09:26:29Z
Hi Guys,
I think this is a bug, I am use a SPFX extension to populate the topheader with a menu.  It works a treat, but I have a weird issue happening in that in a certain instance the topheader content will not render out, the DOM is empty <div data-sp-placeholder="Top"></div>
Category

 Question
 Typo
 Bug
 Additional article idea

Expected or Desired Behavior
The topheader renders my content.
Observed Behavior
The topheader is empty in the DOM if you go to the new events webpart "see all" view.  Also if you navigate back to a modern page, on first load, the topheader contents wont render.
Steps to Reproduce
Create a spfx extension for SPO to render contents in <div data-sp-placeholder="Top"></div>

Deploy the extension.
On a modern page, where you see you header being rendered, insert the new events webpart,
Publish/Save page
Click on "See All" for the events webpart
The topheader is not rendered.
Go back to home, your topheader is not rendered either (on first load), hitting f5 fixes the issue.

I am not sure why, but it seems to only be affecting this webparts view.
Here is a screenshot of my page, working.  if I interact with the Events webpart, my troubles starts.

Closing comment (2019-08-29T06:52:06Z): @VesaJuvonen I am facing the issue while navigating between the folders. My problem is similar to #1254 .
I have raised new ticket. Please check #4557