SPFX Application customizer extension does not run on partial pages updates

john john 926 Reputation points
2021-03-11T23:57:22.183+00:00

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:-

76897-ssw2.png

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:-

76907-rfrf.png

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.

Regards

SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
9,565 questions
0 comments

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. MichaelHan-MSFT 18,016 Reputation points
    2021-03-12T09:38:50.377+00:00

    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:

    77113-image.png

    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.