4

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)?

Improve this question

3 Answers 3

Reset to default
2

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)

Improve this answer
3
  • Had similar problems with a product we are working (SharePoint Online + Angular): 1. The technologies are very different from classic and new pages, so I wouldnt handle them in same way. But the classic pages can use the existing approach (page layouts / Script Link), the new modern ones just need an approach to solve the issue (to not have legacy). Eventually in a couple of years only the modern approach will exist and the problem will be gone. And if the modern approach will allow more customization points in an easier way, for sure partners will move quicker to this direction.
    – Bogdan Mocanu
    Commented Aug 24, 2016 at 16:00
  • 2. We have a dependency injection strategy, so we define points that can be updated inside a page / site (navigation, header, footer, to small details if necessary...) and with a config file you can inject a template / controller to replace an existing one. We are doing this using require, so we define some keys for each template / controller (angular) / data source and the associated url for it and if a custom solution requires another header, will just create another header template and change this mapping. So will use our controller with their template.
    – Bogdan Mocanu
    Commented Aug 24, 2016 at 16:06
  • 2. And when updates happen to our controllers and templates, then the interfaces will change and we mark some members as deprecated, so they will change their templates if needed. Or if the services will change, then same strategy, for a while the new and old will run side by side, so they have time to change their controllers / templates. But this allows to customize a lot from the pages / across our solution and also update easily elements (small templates, large templates...). Might be an idea to consider. But agree, should not support changes to the dom...only in templates / services...
    – Bogdan Mocanu
    Commented Aug 24, 2016 at 16:17
6

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

Improve this answer
1
  • Looking forward for these features to be implemented then finally we can recommend our customers to go to the new and better experience but not until then I am afraid.
    – Magnus Hansson
    Commented Jan 9, 2017 at 11:06
1

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

Improve this answer
3
  • So, what I understand from your response is there is no support to customize SharePoint experience outside of web parts? The problem I have is...I don't want to create a SPA to fully customize it (but also have to re-invent the wheel). I would like to create a normal modern "traditional" SharePoint solution (not app), which includes multiple apps and tries to solve one business problem (like an intranet for a company). But the solution would require some level of consistency through the apps / pages and if I can only customize web parts, then we lose all these possibilities.
    – Bogdan Mocanu
    Commented Aug 23, 2016 at 14:44
  • I may be wrong but that is the gap the SPA is meant to plug. The framework is for building web parts embedded in the OOTB experience not for changing the user experience itself. Its the cost associated with having a stable experience.
    – Sebastian Rogers
    Commented Aug 23, 2016 at 16:55
  • 2
    Ok, I understand, even I don't agree. Because the main power of SharePoint was to use its functionalities and customize according to different needs. Now, it looks like it becomes a product, which has very limited possibilities to customize (a strong hit to the partners...). And the SPA framework...I don't see it as the fix for this issue. You are allowed there to use SharePoint only as a back-end...then why not using another framework (or own web service / DB) instead of paying the subscription of O365 for a glorified web service / database. Thanks for your answer!
    – Bogdan Mocanu
    Commented Aug 24, 2016 at 8:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.