Connect Angular application to SharePoint list using MSGraph

This blog post demonstrates how to use Radzen to build an Angular application that will connect to Microsoft SharePoint using Microsoft Graph API and Azure Active Directory authentication!

Connect Angular application to SharePoint list using MSGraph

1. Create an MSGraph application by following our instructions. Specify Sites.Read.All as Delegated permissions:
2. Add an OData data source which points to the MSGraph API. Follow the second step in our documentation. Add one additional scope - Sites.Read.All:
3. Save the data source and add a new empty page in Radzen. Drag and drop a DataGrid component.
4. Click on an empty area in the page to show the Page Events in the property grid.
   • Add a new handler with Type set to Invoke Data Source Method.
   • Set name to getSitesListsItem. This method will retrieve the items from a SharePoint list which belongs to a site.
   • Add a Parameter by clicking the plus button.
   • Set Name to id. Set Value to the ID or hostname of your SharePoint Live site. You can get the ID from the MSGraph Explorer after logging in with your credentials.
   • Add another parameter. Set Name to listId. Set Value to the ID or display name of your list.
   • Add a Then handler. Set Type to Set property, Name to getListResult and Value to ${result.value}.
5. Select the DataGrid component. Set the Data property to getListResult, auto-generate columns and remove unwanted:
6. Run the application. It should redirect you to the Microsoft login screen. Please log with a MS business account because personal accounts don’t work with SharePoint online. After logging in you should see a DataGrid showing all list items:

Enjoy!