New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SPFx Application Customizer, placeholder not re-rendering on page load #1069

MFSWE opened this Issue Nov 21, 2017 · 3 comments


None yet
2 participants

MFSWE commented Nov 21, 2017


  • Question
  • Typo
  • Bug
  • Additional article idea

Expected or Desired Behavior

I've developed an App Customizer/Extension and installed it on a Communication Site. When a page loads the solution should fetch metadata about the page from the Site Pages library and show that metadata in the Bottom PlaceHolder. The metadata shown is FirstPublishedDate and Created By.

Observed Behavior

When i click on a page's URL (we'll call it "PageA.aspx") and the page loads my Bottom Placeholder does not load at all. Refreshing PageA.aspx by hitting F5 brings up the placeholder with the correct metadata. If i navigate to PageB.aspx from PageA.aspx the placeholder from PageA.aspx is still showing, the placeholder is not re-rendered with PageB's metadata. Again, hitting F5 brings up the metadata for PageB.aspx.

When navigating between pages i can clearly see that all content on the page is reloaded except my Bottom Placeholder which does not even "flinch" on each page load.

In Chrome Dev Tools i can see that the script files for the App Customizer are loaded but the code does not run. I've tried setting breakpoints in the onInit function but they are only hit when reloading the page completely, not when navigating to the page for the "first time".

Steps to Reproduce

I followed this guide when developing the customizer:

I have another App Customizer with almost the same functionality with the same problem.


This comment has been minimized.

MFSWE commented Nov 21, 2017

I just went through this guide once more and the exact same problem occurs:

This time i set a time stamp to the Top and Bottom placeholders. The placeholders are shown directly when running GULP SERVE and the ?debugManifestsFile= query string parameters are provided.

Navigating away from the initially loaded page makes the ?debugManifestsFile= query string dissappear and the Placeholders should not render right? But the placeholders are still there with the same time stamp as on the previously loaded page. I can navigate to several different pages and the placeholder/time stamp stays the same.

Is it supposed to act this way?


This comment has been minimized.

mpasarin commented Nov 22, 2017

In order to modify the behavior of the application customizer I would recommend hooking up a callback to the navigated event.
In your onInit method you should add something like this.context.application.navigatedEvent.add(this, updateData)

The placeholders changed event triggers when the placeholder changes, but going from one page to the other doesn't change the placeholder themselves.
The application navigated will be triggered after doing the navigation, and the context information should be now up to date.

@mpasarin mpasarin self-assigned this Nov 22, 2017


This comment has been minimized.

MFSWE commented Nov 23, 2017


Perfect, that seems to have solved my problem.


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment