Applies To: SharePoint Framework
I had the honor of taking part in the PnP JS SIG call (Patterns and Practices JavaScript Special Interest Group) earlier today. On the call I was able to demo a sample I contributed for the SharePoint Framework Extensions called jQuery-Application-Toastr.
You can find a great write-up of the call on the Tech Community. You can also just watch the video directly on YouTube. You can even watch it right here, conveniently queued up to my demo, wowee!
Here are some related links:
- My Sample: jQuery-Application-Toastr sample
- Placeholder Sample I mentioned: JS-Application-ListDrivenPlaceholders
- The full repo: SP-Dev-Fx-Extensions
- Changes in SPFx Extensions in the Release Candidate
- Article on Theme Colors by Stefan Baur: How to use Theme Colors in SPFx Web Parts
- The slides I used: SPFx Extension Sample – Toastr
The Chris Kent 
I have a quick question. I’m using a library that has a dependency on jQuery in a header extension and then a separate library that has a dependency on jQuery in a web part. Both work fine on their own, but when I load them both to a page the library in the header extension can’t find the jQuery extension.
Have you come across anything like this?
Thanks,
Brendon
To summarize, you are referencing jQuery in both an Application Customizer (SPFx Extension) and a Client-Side Webpart (SPFx) but you get an error with the Application Customizer when visiting a page with the webpart on it?
Are these in the same solution (package)? Are you using a CDN to reference jQuery (if not, you should)?
I have been playing around with this SPFx Extension and while only in the debugging phase, it appears that the toast notifications are not rendering with the full style information. Not sure if there was something I missed, but the colors are not displaying as expected in the sample nor are icons showing in the notification. Any thoughts?
Apologies, the colors are rendering as expected, but the text is not.
Jesse, unfortunately, I’m seeing the same issue. The problem seems to have been introduced in SPFx 1.3.4 where they changed how UI Fabric was being referenced. I have opened an issue with SP Engineering here: https://github.com/SharePoint/sp-dev-docs/issues/1279
Hopefully they’ll provide a resolution/work-around soon and I’ll update the sample accordingly.
Good News! Microsoft has identified the issue and will be providing a fix soon!
Thanks for the update Chris, would be good to know when it is fully resolved and perhaps some details on what changed. In tips or suggestions on staying proactive and properly notified of changes to the framework that could adverse affects on solutions?
Unfortunately, Microsoft didn’t provide details on what changed (it appeared to me that the styles specifically related to icons including the loading of the fabric font were being output for webparts but not extensions). The fix was done on the O365 side and required no code changes or updates to the SPFx extension solutions.
The best way to stay aware of changes is to participate in the PnP calls (https://aka.ms/sppnp-js-sig-call). You can also watch them afterwards on YouTube (https://aka.ms/sppnp-videos) For issues, I often read through the issue list (https://github.com/SharePoint/sp-dev-docs/issues) which isn’t ideal but is the easiest way to know what’s happening. For any issues you notice, take a quick look through the list to see if anyone else posted it. If so, give a +1. If not, submit it yourself. SharePoint Engineering is really pretty responsive both with the issues and on Twitter.
Any updates on this?
There was no update on the issue, but I just checked this extension and a couple of others that I had deployed to my tenant and everything is working as expected! Please let me know if things aren’t working for you or if you have any other questions, thanks!
I just got around to testing this again, it appears now that icons are loading correctly, but the text in both the titleClass and messageClass are not rendering as expected with fabric fonts even though they are refrencing ms-font-m and ms-font-s respectively. The sizing is correct, but not the font itself.
After resolving all aforementioned issues, and successfully deploying this solution to my tenant. On the two sites i currently have this configured for, the toasts are only displaying on the site contents page on the site, and not any other pages.
What type of sites are these? SPFx extensions only work on modern pages (like the Site Contents page).
These are all modern pages. I deployed this yesterday and all was well, but today for some reason the toasts only display on the modern view of site contents. This is experienced in both Chrome and Edge.
To add to this, this is only experienced in my production tenant, all is still well with my dev tenant.
Coming back to this, I am longer experiencing the issue above in my production tenant. Could potentially been tied to hub-site feature/connection being enabled on these site collections without this feature actually being available in the production tenant. After removing those features, coming back to it today the toasts were rending on the correct pages. Although, today I am also experiencing a new issue. When navigating to other pages without dismissing the toasts, the spfx extension will render duplicate toasts on each page load.