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

This blog post demonstrates how to build an Angular app that will create new, rename and delete Microsoft OneDrive items using Microsoft Graph API and Azure Active Directory authentication! To know more about how to setup your Radzen application please check Manage your OneDrive using Radzen, MSGraph and Azure AD - Part I.

Creating pages for add new, edit/update and delete OneDrive files and folders

1. Create new page named EditDriveItem, call MSGraph data-source getDrivesItemsById() method on page Load event with two parameters:
   • id = ${parameters.driveId}.
   • driveItemId = ${parameters.itemId}. and set page property driveItem to ${result}.
2. Drag and drop Form component from Radzen toolbox, bind it to driveItem and define single field bound to Name property.
3. Call MSGraph data-source updateDrivesItems() method on Form component Submit event with three parameters:
   • id = ${parameters.driveId}.
   • driveItemId = ${parameters.itemId}.
   • driveItem = ${event}. Call Navigate Back on Form component Cancel event.
4. Select page OneDrive, add new event handler to the DataGrid component RowSelect event and execute Navigate to page EditDriveItem with two parameters:
   • driveId = ${drive.id}.
   • itemId = ${parameters.itemId}.
5. Create new page named AddDriveItem, drag and drop Form component from Radzen toolbox, and define single field bound to Name property. Set SubmitText to Add new folder.
6. Add Form component Submit event handler, execute code ${event.folder = {}} and invoke MSGraph data-source method createDrivesItemsChildren() method with three parameters:
   • id = ${parameters.driveId}.
   • driveItemId = ${parameters.itemId}.
   • driveItem = ${event}. Call Navigate Back on Form component Cancel event.
7. Select page OneDrive, set AllowAdd to True for the DataGrid component and execute Navigate to page AddDriveItem with two parameters:
   • driveId = ${drive.id}.
   • folderId = ${selectedFolderId}.
8. Set AllowDelete to True for the DataGrid component and invoke MSGraph data-source method deleteDrivesItems() with two parameters:
   • driveId = ${drive.id}.
   • driveItemId = ${event.id}.
9. Run the application, login using your Microsoft credentials, browse your OneDrive, delete and rename items and add new folders.

Enjoy!