SPFx Extension Toastr Notifications Demo

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:

16 thoughts on “SPFx Extension Toastr Notifications Demo

  1. 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?



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

  2. 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?

        • 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.

          • 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.

                  • 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.

Leave a Reply to theChrisKent Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s