SharePoint Framework & Angular Elements : Connecting to your SharePoint data
Your first webpart now works but how cool would it be if you could leverage some data that exists in your Office 365 data? If you're thinking like me, you're at the right spot!
Angular Elements and SharePoint Framework are still in their developments. This codes is based on pre-release of Angular Elements and a very "rough" integration with the SharePoint Framework. I am still pushing those samples so you can start playing with the technology. Please don't use any of this in production as of today. I will update the posts and code when better support will be offered by both Angular and SharePoint Framework.
This post is part of a series of post on integrating the SharePoint Framework with Angular Elements
- SharePoint Framework & Angular Elements : Building your first Web Part
- SharePoint Framework & Angular Elements : Connecting to your SharePoint data (this post)
- SharePoint Framework & Angular Elements : Mocking your data
- SharePoint Framework & Angular Elements : Using Google Material Design
- SharePoint Framework & Angular Elements : Using Office UI Fabric Core
First of all, make sure you read the Building your first Web Part post to understand how to get things started and have a working Web Part!
Importing ZoneJS in your project
In that specific scenario, because of async nature of the calls you will make to SharePoint and to simplify the development experience, we will need to "embed" an important piece of Angular : ZoneJS. Everything can be done without (as it's not a required piece anymore) but it's easier to use it for demo purposes.
To include ZoneJS, you have to add it to
packages.json, to the
wc-shim.js and to the Custom Element you are building.
Passing the context to your webpart
Ensure you have an
Input property in your Component that accepts a
WebPartContext and you will be able to transfer your WebPart context directly in your Component. That will simplify a lot of the calls as the
SPHttpClient takes care of some of the authentication challenges that exist in the SharePoint Framework.
You will also need to change the way to render your Component in your Web Part as you will need to pass in a complex object that would bot be supported as a simple custom element property.
Querying SharePoint in your Component
Now that your have access to the
SPHttpClient within your component, the only missing piece is to discuss with the SharePoint REST APIs! In this sample, we are only highlighting the lists that exist in the current Site, but you can be very creative here!
Show your data asynchronously in your template
The only missing piece is to display the fetched data from SharePoint in your Angular Template. Use the
*ngFor instruction combined with the
| async option to load asynchronous data and let Angular handle it!
Run your webpart
Once your Web Part is ready, you can finally run it using
gulp serve and see the result directly in your SharePoint Workbench!
Now that your webpart works, I'll let you play around and explore the different SharePoint REST APIs that you can leverage in those scenarios!