Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building a real-time news feed and toast notifications on SharePoint with SPFx and webhooks

283 views

Published on

In these slides you can find what I presented to my session in an amazing location SharePoint Saturday Bremen 2018.
http://www.spsevents.org/city/Bremen/Bremen2018

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Building a real-time news feed and toast notifications on SharePoint with SPFx and webhooks

  1. 1. SharePoint Saturday North Germany 2018 Building a real-time news feed and toast notifications on SharePoint with SPFx and webhooks Giuliano De Luca / @giuleon @Spsbre #spsdenorth
  2. 2. SHAREPOINT SATURDAY NORTH GERMANY 2018
  3. 3. @giuleon delucagiuliano.com www.delucagiuliano.com SharePoint Saturday Bremen January 20, 2018
  4. 4. @giuleon delucagiuliano.com • Solution Architecture • SharePoint Framework • Webhooks • 4 demos • Resources
  5. 5. @giuleon delucagiuliano.com SharePoint Online List After the webhooks subscription, every list changes trigger an HTTP POST towards the subscriber 1 2 Socket.io Broadcast Node JS Web App SharePoint Framework Azure Web App SignalR
  6. 6. @giuleon delucagiuliano.com Available on SharePoint Online and SharePoint 2016
  7. 7. @giuleon delucagiuliano.com • Client-Side Web Parts • Client-Side Extensions • Application Customizer • Command Set • Field Customizer
  8. 8. @giuleon delucagiuliano.com • Tooling • Node.js • Yeoman • Gulp • TypeScript • Visual Studio (Code) • Frameworks – Choose yours • React • Angular.js • Knockout • Etc. SharePoint Framework Toolchain
  9. 9. @giuleon delucagiuliano.com IIS Express VS Project  New  <Template>
  10. 10. @giuleon delucagiuliano.com
  11. 11. @giuleon delucagiuliano.com Node.js App
  12. 12. @giuleon delucagiuliano.com • A way to be notified of a done change • Push model instead of Pull model • Universal model used by many services (WordPress, GitHub, MailChimp, ...) • First made available in OneDrive and Outlook • Now available in SharePoint Online
  13. 13. @giuleon delucagiuliano.com POST /_api/web/lists('list-id')/subscriptions Application Content-Type: application/json { "resource": "https://contoso.sharepoint.com/_api/web/lists({id})", "notificationUrl": "https://{your host}/your/webhook/service", "expirationDateTime": "2017-06-18T16:17:57+00:00" } SharePoint Service
  14. 14. @giuleon delucagiuliano.com Application YourWebHook notification serviceendpoint POST https://{your host}/your/webhook/service ?validationToken={randomString} SharePoint Service
  15. 15. @giuleon delucagiuliano.com Application Content-Type: text/plain {randomString} HTTP/1.1 200 OK SharePoint Service
  16. 16. @giuleon delucagiuliano.com SharePoint Service Application YourWebHook notification serviceendpoint HTTP/1.1 201 Created Application Content-Type: application/json { "id": "a8e6d5e6-9f7f-497a-b97f-8ffe8f559dc7", "expirationDateTime": "2017-06-18T16:17:57Z", "notificationUrl": "https://{your host}/your/webhook/service", "resource": "{id}" }
  17. 17. @giuleon delucagiuliano.com SharePoint Service YourWebHook notification serviceendpoint { "value":[ { "subscriptionId":"91779246-afe9-4525-b122-6c199ae89211", "clientState":"00000000-0000-0000-0000-000000000000", "expirationDateTime":"2017-06-18T17:27:00.0000000Z", "resource":"b9f6f714-9df8-470b-b22e-653855e1c181", "tenantId":"00000000-0000-0000-0000-000000000000", "siteUrl":"/", "webId":"dbc5a806-e4d4-46e5-951c-6344d70b62fa" } ] } POST https://{your host}/your/webhook/service
  18. 18. @giuleon delucagiuliano.com SharePoint Service YourWebHook notification serviceendpoint HTTP/1.1 200 OK
  19. 19. @giuleon delucagiuliano.com
  20. 20. @giuleon delucagiuliano.com
  21. 21. @giuleon delucagiuliano.com WebHooks have an expiration date of maximum 6 months after creation You can “renew” a WebHook via a REST call Two patterns are possible:
  22. 22. @giuleon delucagiuliano.com Demo Webhooks subscription with nodejs
  23. 23. @giuleon delucagiuliano.com
  24. 24. @giuleon delucagiuliano.com Demo
  25. 25. @giuleon delucagiuliano.com https://goo.gl/iRZZd7 https://goo.gl/SEUflx https://goo.gl/Y46vkA https://goo.gl/NmRG7j https://goo.gl/uXnZJd https://goo.gl/c4UiKW https://goo.gl/aDQ9W3 https://goo.gl/s2c22v https://goo.gl/SJ1VHW https://dev.office.com/fabric
  26. 26. @giuleon delucagiuliano.com

×