Partial page load issue which prevent extending following button functionality using Application Customizer

[mohammadamer]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• browser Microsft Edge 90.0.818.42
• SPFx version 1.11.0
• Node.js version v10.24.0

Describe the bug / error

Page is not fully loaded which causes that elements like following button is not loaded in the DOM Content.
Following button is not loaded when trying to extend it's functionality by adding event handler to it.

Steps to reproduce

1. create a simple Application Customizer
2. In the public onInit(): Promise {}
3. add a some code to add event hander to following button in a SharePoint Site home page
4. Sample snippet to add click event handler

private registerFollowingButtonClickHandlers() {
// Registering the handlers
let followingButton = document.querySelector(
".ms-Button.ms-Button--action.ms-Button--command.ms-CompositeHeader-collapsible"
);
debugger;
followingButton.addEventListener("click", (e) => {
console.log("Following Button Clicked");
});
}

Expected behavior

Excepted behavior is to be able to extend the functionality of the following/Not following button in the SharePoint site home page.

[michaelhan-1]

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

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

Michael Han
Microsoft SharePoint Community Support

[mohammadamer]

@michaelhan-1
I had a quick look into the article I see that you add navigatedEvent listener inside onInit function in order to re-render a component every time you navigate to another page.

But my issue is to re-render the existing page and particular part (top header specially following button) of the page to be able to extend it's functionality

[AJIXuMuK]

Hi @mohammadamer!
Thank you for reporting the issue.
Unfortunately DOM navigation is not a supported scenario for SharePoint customizations.
So it might not work for various reasons.

[github-actions]

Thank you for taking the time to file an issue. We periodically archive older or inactive issues as part of our issue management process, which automatically closes them once they are archived.

If you’d like to understand more about why and how we handle archived (closed) issues, please see Our approach to closed issues.

We appreciate your contribution and if this is still an active issue with the latest SPFx versions, please do resubmit the details. We needed to perform a cleanup, so that we can start with a clean table with a new process. We apologize for the inconvenience this might cause.