Perry Kankam is a Software Engineer for ThreeWill. Perry started out programming in C# and XML. Over the years, he has continuously added a variety of skills to his skillset including recent mobile application development technologies like Angular, React and Ionic.
It always gets challenging when dealing with navigation events on single or partially-loaded pages. I recently implemented an SPFx Application Customizer in the top of every site page on page load (using context’s placeholderProvider, tryCreateContent).
This application customizer was a simple button that handled some list actions upon click. Getting the button to display and adding styling was not really a challenge. In my head, I thought it was ready to go until QA reported a navigation issue. The button still shows when not on a site page. For example, if a user fires off a search or clicks Home, the button still displays. Being new to application customizers, the first thing I did was to check for the current site URL and only show my button when it contained “/SitePages/”, but of course, that didn’t work.
After hours of scattered information, below is the proper way to handle navigation events when using application customizers.
- Add the “navigatedEvent” event properly to your application in your oninit() method. This one-liner will add the method to be invoked when the change in navigation is triggered.
2. Create your new _render() method or the name you used while adding the navigatedEvent in the previous step. The actions you have in your new method will be handled upon a navigation change. For example, if you want to log in to the console upon navigation change, your _render() method will only have a “console.Log(“whatever”);”.
3. What if you want your application customizer to be dismissed upon navigation? You should create an onDispose method and reference it in your _render() method as needed.
In conclusion, yes, application customizers can be dismissed even when navigating to pages that only partially load. This is a simple fix that should get the job done!