SharePoint Framework / Modern pages with ScriptLink Custom Action

Question

How to insert into a SharePoint Online site collection one script (javascript) to run on all pages, including modern pages with the new SharePoint Framework (like Script Link Custom Action, or a script tag in the master page)?

Answer 1

So the single page app framework won't solve this, since the problem isn't that you want full control of one page, but rather partial control of all pages. That is in the works, but it's a bit tricky. A Couple of things pop out that need to be solved.

1. How do you handle classic and new pages when they both exist on a site at the same time?

2. How do you make them stable so that the product can improve and change over time without breaking custom solutions (we have broken people by changing innocuous properties on elements to support accessibility, but it slightly changed the dom- making the call to find element fail)

Answer 2

Current release of SharePoint Framework is only targeted on client side web parts. This means that there's no specific support for classic JavaScript embedding capabilities (like user custom action or JS Link). Currently available vNext experience on the document libraries, does not support these kind of customizations.

If you'd need to have still capability to inject a custom JavaScript cross your SharePoint pages, you'd have to keep on using Classic mode for the document libraries, which impacts also site contents page. Support for Classic mode can be controlled from SharePoint tenant level settings and is not going to go away anytime soon.

We are also working on providing additional extension points with SharePoint Framework, including the modern experiences for example in the document libraries. Details schedule or capabilities for these are not yet ready to be shared.

We would appreciate if you'd add a comment in the UserVoice for explaining your usage scenario for the JavaScript. This means that you'd explain the actual business scenario why the JavaScript is needed and what does it actually do. Here's UserVoice entry related on this discussion - https://sharepoint.uservoice.com/forums/329214-sites-and-collaboration/suggestions/13385364-allow-javascript-customization-and-css-branding-th

Vesa Juvonen, Microsoft

Answer 3

You could create your navigation element as a separate web part and place it at the top of your page, possibly using the REACT navbar components. However you would need to add it to every page.

This seems unfair but I believe there are good reasons why the Sharepoint team have gone down this road.

The reason that changing the actual page outside of the web part is not a good idea are:

• The modern SharePoint team sites are 'Evergreen' and liable to change without notification. Web Parts developed in the SharePoint Framework will continue to work as they if they do rely on anything outside the web part itself Microsoft will need to ensure that the changes do not affect the existing web parts.
• The modern team sites are designed to be 'mobile first' but also will render on other platforms, i.e. tablet, desktop, in a sympathetic manner. You would need to make sure that your 'custom actions' can handle all of these forms when you do not control how they are implemented.
• The SharePoint workbench is not SharePoint but a cut down representation that allows you to preview and test your web parts quickly. To use it to test your 'script link' modifications you would need to implement more of the SharePoint experience than it supports.

If you are trying to rebrand the SharePoint experience then I think you need to look at the planned Full Page / Single Page Application SharePoint Framework. It is apparently in the product backlog and there is an entry on UserVoice asking for it as well.

Hope this is of some use to you.

Sebastian