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.
Upcoming SlideShare
What to Upload to SlideShare
What to Upload to SlideShare
Loading in …3
×
1 of 29

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

1

Share

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

×