SPFX Application customizer extension does not run on partial pages updates

john john 791 Reputation points

I want to inject some CSS to my SharePoint page, so I follow those steps @ https://tahoeninjas.blog/2018/05/08/inject-custom-css-on-sharepoint-modern-pages-using-spfx-extensions/ to create SPFX Application customizer extension, where i did the following:-

md app-extension  
cd app-extension  
yo @microsoft/sharepoint  
What is your solution name?: app-extension  
Which baseline packages do you want to target for your component(s)? SharePoint Online only (latest)  
Which type of client-side component to create?: Extension  
What is your Application Customizer name? HelloWorld  
What is your Application Customizer description? HelloWorld description  

then i added the following code inside the .ts:-


So as shown in the above code I am specifying to only attach the custom css if the window.location.href = the url of the home page which is https://t****.sharepoint.com/sites/customeroperations/sitepages/dashboard.aspx in our case. now the above is working on most cases but is failing on the following cases:-

1) let say i am inside the Pages library >> then I click on the "Home" link to open the home page, as follow:-


this will do a partial update to the page and will load the home page content without causing the whole page to load >> where in this cases the SPFX extension will not run.

2) second case>> if I am inside the home page and the SPFX has loaded the custom css file correctly >>then i click on a page inside the news web part >> this will open the news page without refreshing the page >> which will cause the SPFX to run on the news page (which is not the home page)...

so my question is how I can force the SPFX extension to run on partial updates to check the page url, to avoid the above 2 issues?

Thanks in advance for any help.


A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
7,073 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Michael 17,921 Reputation points

    Hi @john john ;

    You could add navigatedEvent listener inside onInit function to make the SPFX extension to run on partial updates.

    Below is my sample code for you:


    This article would help you know more about navigatedEvent listener: https://nanddeepnachanblogs.com/posts/2020-04-10-handle-navigation-in-sharepoint-framework-application-customizer/

    If an Answer is helpful, please click "Accept Answer" and upvote it.
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.