question

johnjohn-0472 avatar image
0 Votes"
johnjohn-0472 asked johnjohn-0472 commented

SPFX Application customizer extension does not run on partial pages updates

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


office-sharepoint-online
ssw2.png (52.4 KiB)
rfrf.png (5.0 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

MichaelHan-MSFT avatar image
0 Votes"
MichaelHan-MSFT answered johnjohn-0472 commented

Hi @johnjohn-0472;

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.



image.png (67.4 KiB)
· 5
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@MichaelHan-MSFT thanks for the code. where it fixed most of the navigation issues i were facing. But still i am facing this issue >> if inside the home page's News web-part >> i click on "News Post", as follow:-

77221-newspois.png

the new page will open and the custom CSS will be applied to it.. not sure why? although the new news page will have a url different than the home page url.. can you advice on this please?
Thanks


0 Votes 0 ·
newspois.png (16.6 KiB)

@johnjohn-0472 The navigation event will not get triggered when a new page gets created. To handle page creation events in spfx application customizer, you could refer to this article: https://www.eliostruyf.com/handling-page-creation-events-spfx-application-customizer/

0 Votes 0 ·

@MichaelHan-MSFT But in this case can we have 2 handles inside my code; one for page creation and the other for navigation event ?

0 Votes 0 ·
Show more comments