Sp-dev-docs: Extension with placeholder bottom does not show up when navigating

[BraunJonathan]

Category

• [ ] Question
• [ ] Typo
• [X] Bug
• [ ] Additional article idea

Expected or Desired Behavior

Extension with bottom placeholder should show up in each site it is installed in.

Observed Behavior

I have an extension, with uses the bottom placeholder.
This extension is installed in all sites of my hub.
When i first load a page, the extension shows normally. If if navigate inside the site i'm in, the extension show up correctly but if i navigate on another site (which also has the extension installed), the extension does not show up at all (no js errors in the console) !

That extension worked very well until recently. It seems some update from you guys broke something...
Maybe i'm not doing some things rights, that's also why i'm posting this here.
@patmill : i'm posting this following #2792 : my top placeholder extension works well with the advice you posted but that one still doesn't work...

Steps to Reproduce

You can find the important part of the code just below

public onInit(): Promise<void> {
    this.checkProperties();
    this.context.application.navigatedEvent.add(this, this._changementNavigation);
    this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders.bind(this));
    return Promise.resolve<void>();
}

protected _renderPlaceHolders(): void {
    if (!this._piedDePagePlaceHolder) {
      this._piedDePagePlaceHolder =
        this.context.placeholderProvider.tryCreateContent(
          PlaceholderName.Bottom,
          { onDispose: this._onDispose }
        );
      this._piedDePagePlaceHolder.domElement.classList.add(FOOTER_DIV_CLASS);
    }

    this._elementReact = React.createElement<ICPiedDePageProps>(
      CPiedDePage,
      {
        blablabla
      }
    );
    ReactDom.render(this._elementReact, this._piedDePagePlaceHolder.domElement);
 }

  protected _changementNavigation(eventArgs: any): void {
      this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders.bind(this));
  }

I found a workaround which may help you find the problem...

If i use the below code instead of just
this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders.bind(this));
then it works...
Seems that when i navigate, my extension is created correctly but somehow disapears from the DOM...

Piece of code that gets things working:

if (this.context.placeholderProvider.placeholderNames.indexOf(PlaceholderName.Bottom) !== -1){
      if (this._piedDePagePlaceHolder){
        this._piedDePagePlaceHolder.dispose();
        delete this._piedDePagePlaceHolder;
      }    
      this._renderPlaceHolders();
    }else{
      this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders.bind(this));
    }
}

Thanks in advance

[yuanzheng]

Hi Jonathan. Your question made my attention. It's very interesting.
I built sharepoint framework extension for modern sites, and tested by following the instruction of MS doc: Build a Page Placeholder.
However, I didn't meet the problem you mentioned.
My investigations include:
-Safely using Placeholders in extension

May I ask you to offer a minimum reproduce-able code ? So that I could set it up on my local for testing purpose. Thanks.
@BraunJonathan

[BraunJonathan]

Hi Yuanzheng
Thanks for having a look at my problem :-)
Did you add the navigatedEvent part i've got in my code? I'm suspecting that's part of the problem...
I had to add it at the time because otherwise, some things are not reloaded when navigating into a site...

I will try to build a new extension from scratch and add my specificities one by one and i'll come back to you !

[BraunJonathan]

Ok, i manage to reproduce the problem.
It's a bit more complicated than i thought but still a real problem...
The problem happends only when :

• i use a navigatedEvent handler
• the link which causes the problem is indeed into a extension.

You can try with the extension provided here,you just have to install it on two sites and to add a link from one to another of the two sites as a content of the placeholder
bottom-placeholder_sample.zip

[BraunJonathan]

My workaround is not working anymore...
I tried to make things work with SPFX 1.7 and even 1.7 plusbeta...
Still no luck....

Most of the times when navigating from one site to another my isVisible property on my placeholder stays false...
Refreshing the page solves the problem but this is definitely something not satisfying...

This is happening in production on my company (several thousands users)...
We have a top placeholder megamenu which allows us to navigate aross sites and a footer (always the same app) deployed on each site...
The last one does not work after navigating !!

[ashishshukla1183]

I am also facing the same issue as detailed by @BraunJonathan
In my case we have multiple sites connected to a hub site and they all needs to have same header footer.
While top placeholder loads, bottom placeholder throws error while navigating between different sites. When I refresh the page, it comes back again.
This is clearly not a desired experience. In our case Footer is very important as it hosts a bunch of critical links.
Kindly let me know if there any resolution or work in progress.
Thanks.

[ashishshukla1183]

I am also facing the same issue as detailed by @BraunJonathan
In my case we have multiple sites connected to a hub site and they all needs to have same header footer.
While top placeholder loads, bottom placeholder throws error while navigating between different sites. When I refresh the page, it comes back again.
This is clearly not a desired experience. In our case Footer is very important as it hosts a bunch of critical links.
Kindly let me know if there any resolution or work in progress.
Thanks.

Code can be referenced at the following link:
https://gist.github.com/ashishshukla1183/5f5c2fdf03a45f85c51f67583404d576

[BraunJonathan]

Thanks to the last update, things seem now to work as they should !

BUT, take care not to dispose the placeholder otherwise you'll have a lot of troubles...
Used to do that in order for things to work and it crashes in production this morning...

[ashishshukla1183]

@BraunJonathan It still doesn't works for me.
Can you suggest what change i have to do in my code to make it work?
For reference you can fine my code here:
https://gist.github.com/ashishshukla1183/5f5c2fdf03a45f85c51f67583404d576

[BraunJonathan]

Make sure you never dispose your placeholder as it seems it's not coming back...
Other than that i do not see anything obvious...
Maybe the code update is not fully rolled yet ?
I'm reopening the issue then...

[ashishshukla1183]

Make sure you never dispose your placeholder as it seems it's not coming back...
Other than that i do not see anything obvious...
Maybe the code update is not fully rolled yet ?
I'm reopening the issue then...

@BraunJonathan Thanks for reopening the issue. I need this issue to remain opened as in parallel we are planing to initiate a support ticket. Will reference this thread also in it.
I will let you know once this is no longer an issue. Then you can close it.

Meanwhile I found another issue, that in mobile devices, footer is coming in the middle of the screen. Apparently that also happens while navigating through pages (or sites), and goes away on page refresh. Can you see if your code is also having the same issue?
Thanks for your help.

[patmill]

Can you clarify what the exact repo steps are currently?

Specifically, things like
What browser / OS / app / device?
How is the extension deployed / configured? Site-by-site, or tenant wide?
Does it happen on a full page request, or only when you click from one page to the next?
If it is the latter, what page are you going from / to? Are they both modern pages? page -> list? SharePoint Home -> teamsite? etc.

Thanks.

[ashishshukla1183]

Can you clarify what the exact repo steps are currently?

Specifically, things like
What browser / OS / app / device?
How is the extension deployed / configured? Site-by-site, or tenant wide?
Does it happen on a full page request, or only when you click from one page to the next?
If it is the latter, what page are you going from / to? Are they both modern pages? page -> list? SharePoint Home -> teamsite? etc.

Thanks.

Sure. Following are the details. Let me know if you need any more specifics.

Browsers: All browsers. I am using Chrome, Firefox and Edge.

OS and Device: Windows 10 desktop and all mobile devices (both android and iOS)

Deployment and other details: This footer is deployed site by site. Its configured through a list maintained in the hub site. All sites connected to hub site have this footer deployed and they fetch data from list in hub site collection.

Sites: Both modern team sites and communication sites. Hub site is a communication site.

Scenarios when footer is rendered: When navigated within same site between Pages->Pages, Pages->List or Pages->layouts pages.

Scenarios when footer disappears:
When user moves from Hub site to another site (connected to the hub site) with footer deployed.
eg. user clicks on the OOB news webpart article link, which is fetching article from another site connected to hub site.
Footer comes back when user does a page refresh. Please note that in same scenario header placeholder appears seamlessly.

Footer Code: https://gist.github.com/ashishshukla1183/5f5c2fdf03a45f85c51f67583404d576

Another, may be related issue:
Also, recently I noticed that footer extn, is displayed in the middle of the page when seen on mobile devices. This too goes away with page refresh. when checked, I found that mobile classes are not getting applied when moving across pages. A refresh pages again solves this issue.

[patmill]

(sorry forgot to hit 'Comment' in this part ) - As an aside, looking at the gist, it's a bit strange that you still have your renderPlaceholder as an async / promise. Is that on purpose, or just left over from before?

Thanks for the repro steps. We'll look into them.

And just to confirm (and what we'll dig into) - you install the app on each "spoke" site of the hub, and navigate from hub site -> spoke site.

Does the footer exist on the hub site, then disappear on the spoke site on navigate, or is it that it doesn't exist on the hub site, but it never shows on on the spoke?

[ashishshukla1183]

(sorry forgot to hit 'Comment' in this part ) - As an aside, looking at the gist, it's a bit strange that you still have your renderPlaceholder as an async / promise. Is that on purpose, or just left over from before?

Thanks for the repro steps. We'll look into them.

And just to confirm (and what we'll dig into) - you install the app on each "spoke" site of the hub, and navigate from hub site -> spoke site.

Does the footer exist on the hub site, then disappear on the spoke site on navigate, or is it that it doesn't exist on the hub site, but it never shows on on the spoke?

Thank for the response Pat. Please find the below details:

renderPlaceholder as an async / promise It was left over from before. I can remove that and call getHubSiteUrl(); in oninit. However, it still not making any difference.

And just to confirm (and what we'll dig into) - you install the app on each "spoke" site of the hub, and navigate from hub site -> spoke site. This is correct. However, I just noticed that even if its not the hub site and I somehow navigate from one site to another, without complete page load, (eg. through other sites site pages link in news webpart), I still don't see the footer rendered. Just to share that I do see the top menu rendered seamlessly.(https://gist.github.com/ashishshukla1183/e7d9bb2887102104af635da7689b2911)

Does the footer exist on the hub site, then disappear on the spoke site on navigate, or is it that it doesn't exist on the hub site, but it never shows on on the spoke? Footer exists on all sites and activated. So, when navigated from hub to spoke site (through webparts or links), it disappears. However, its rendered perfectly when the same link is opened in a new tab or page is refreshed.

[patmill]

Just updating this thread. I'm having difficulty getting this to repro - both my header and footer keep showing up. Although I'm using a simple "here is some text" for the DOM content. I'll try running your gist.

[ashishshukla1183]

Just updating this thread. I'm having difficulty getting this to repro - both my header and footer keep showing up. Although I'm using a simple "here is some text" for the DOM content. I'll try running your gist.

Hi @patmill .. is there any update on the above issue. I was wondering if any recent update has fixed this issue. Just for info, out tenant is the first release.. so I am sure w eshould be having the latest update, unless you may want to confirm it..
Thanks for the help!

[ashishshukla1183]

So after adding UFooterApplicationCustomizer._bottomPlaceholder.isDisposed condition before creating DOM element to render application customizer, it does resolves the issue. I am positive this was not the case few days back.
So, now code is working fine and bottom placeholder is rendered successfully while navigating between diff sites.
@patmill and @BraunJonathan we can close the issue for now, although I am not sure if this fix is the correct one.

[kroska]

HI @ashishshukla1183, any update on gist?

[ashishshukla1183]

HI @ashishshukla1183, any update on gist?

Yes, just updated that.

[lucaband]

Closing as requested by @ashishshukla1183 above

[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