Manage your OneDrive using Radzen, MSGraph and Azure AD - Part I

This blog post demonstrates how to build with Radzen an Angular app that will access Microsoft OneDrive using Microsoft Graph API and Azure Active Directory authentication!

Creating the app and MSGraph data-source

Create a new Radzen application, add MSGraph data-source similar to our article and add Files.Read scopes/permissions.

Creating a page with Tree and DataGrid to browse 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.
2. Call MSGraph data-source getDrives() method on page Load event and define two page properties getDrivesResult for the returned data and drive for the first drive in the collection.
3. After getDrives() call invoke MSGraph data-source getDrivesRoot() method with ${drive.id} as parameter and define page property rootId to ${result.id}.
4. Drag and drop Tree component from Radzen toolbox to the first column, bind it to getDrivesResult page property and define two levels using microsoft.graph.drive and microsoft.graph.driveItem schemas. Set owner.user.displayName for the first level Text property and name for the second level Text property.
5. Call MSGraph data-source getDrivesItemsChildren() method on Tree component NodeExpand event with three parameters:
   • id = ${drive.id}.
   • driveItemId = ${event.level == 0 ? this.rootId : event.data.id}. Provide rootId or current node/item id depending on level.
   • $filter = file eq null. Filter drive items to return only folders. Execute ${event.children = result.value} after getDrivesItemsChildren() method call.
6. Add new event handler to the Tree component NodeLoaded event and execute ${event.leaf = event.data.folder ? event.data.folder.childCount == 0 : false}. The tree node will not be expandable if there are no children.
7. Add new event handler to the Tree component NodeSelect event, define selectedFolderId page property with value ${event.level == 0 ? this.rootId : event.data.id}, invoke getDrivesItemsChildren() method with two parameters:
   • id = ${drive.id}.
   • driveItemId = ${event.level == 0 ? this.rootId : event.data.id}. and set page property selectedItemChildren to ${result.value}.
8. Drag and drop DataGrid component from Radzen toolbox to the second column, bind it to selectedItemChildren and define desired columns. Check AllowSorting and AllowFiltering.
9. Run the application, login using your Microsoft credentials and browse your OneDrive files and folders.

Enjoy!