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 at 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!