MSGraph with Blazor

We are happy to share that Blazor applications in Radzen recently got a very important update: OData data source with AzureAD authentication!

In this post I’m going to show you how to connect MSGraph using OData and AzureAD in Blazor applications in few steps. Microsoft Graph is the gateway to data in Microsoft 365 and exposes REST APIs to access Excel, OneDrive, Outlook/Exchange, SharePoint, etc.

1. Create new application in Azure portal.

2. Add http://localhost:5000/ms-graph-callback in Authentication -> Redirect URIs. Add permissions to sign-in and read the user. Check also Microsoft Graph REST API reference for more info how to access and manage users.

3. Create new Blazor application in Radzen, add new OData data-source connected to https://graph.microsoft.com/v1.0/ endpoint with AzureAD authentication. Set https://login.microsoftonline.com/common/v2.0/ for Authorization Endpoint and enter ClientID, and Client Secret obtained from your application in Azure portal. Add user.read to Scopes and check all entities.

4. Create new page, invoke MSGraph.getMe data source method using Load event and assign ${result.displayName} to name property. Add new Label component to the page and set Text property to ${name}.

5. Run the application, sign-in and check the result.

Let’s now list Microsoft OneDrive files and folders!

1. Create new page named OneDrive, drag and drop a Row and two Column component from Radzen toolbox. Set 3 and 9 for the size of first and second column and add Tree component to the first column and DataGrid component to the second column.
2. Define page property rootItems of type List<DriveItem> with null as value.
3. Invoke MSGraph data-source getDrives() method on page Load event and set page property driveId to result.Value.ToList()[0].id.
4. In getDrives() Then invoke MSGraph data-source getDrivesRoot() method with ${driveId} as parameter. Set rootItems to new List<DriveItem>(){ result } and define property itemId with value ${result.id}. Execute ${grid0.Reload()}.
5. Bind the Tree component to rootItems page property and define one level using microsoft.graph.driveItem schema. Set name for the level TextProperty property and children for the level ChildrenProperty property.
6. Invoke MSGraph data-source getDrivesItemsChildren() method on Tree component Expand event with three parameters:
   • id = ${driveId}.
   • driveItemId = {((DriveItem)args.Value).id}.
   • $filter = file eq null. Filter drive items to return only folders. Execute event.Children.TextProperty = "name" and event.Children.Data = result.Value in invoke Then.
7. Set page property itemId to ((DriveItem)event.Value).id on Tree component Change event and execute ${grid0.Reload()}.
8. Bind the DataGrid component to getDrivesItemsChildren() using new data wizard, remove unwanted columns and paging parameters from LoadData event getDrivesItemsChildren() invoke and add two parameters to:
   • id = ${driveId}.
   • driveItemId = ${itemId}. Turn off DataGrid paging, sorting and filtering and set Visible property to ${itemId != null}.

.. and that’s all!

Combining Radzen powerful native Blazor WYSIWYG designer, CRUD pages scaffolding and connectivity to MSGraph you can develop complex user interfaces visually consuming data from Microsoft Office 365.

If you still haven’t tried Radzen you can get the latest bits from here. Check also our FREE native Blazor components. Don’t forget to share your feedback with us! Send an email to info at radzen.com or post in our forum.

Enjoy!