OneDrive sync of multiple SharePoint libraries

We recently highlighted several new features in our Smarter Navigation, including fresh configuration options for navigation nodes such as custom icons and colors. The latest release of Smarter Navigation adds another highly practical capability. This article introduces the new option to synchronize multiple SharePoint document libraries with OneDrive directly from the navigation experience.

OneDrive synchronization of multiple SharePoint libraries

SharePoint lets you synchronize document libraries with OneDrive. To do so, users usually navigate to each library individually and trigger the sync via a button. Synchronizing several libraries in succession quickly becomes tedious. Our new feature streamlines this workflow by allowing users to select multiple libraries at once and synchronize all of them with OneDrive in a single action.

Frontend implementation of the OneDrive synchronization

The new feature surfaces an “Open with OneDrive” button directly inside the navigation. When the user selects this button, the navigation switches into OneDrive synchronization mode. Users can then pick the desired document libraries for synchronization through checkboxes. After making their selections, they confirm with the “Synchronize selection” button. All chosen document libraries are then synchronized with OneDrive in one step, eliminating the need to trigger the process for each individual library.

The app requires the Graph permission “Files.ReadWrite.All”, which must be granted by an administrator. Only after approval do we display the “Open with OneDrive” button for the new feature.

Synchronization through an API call via AadHttpClient

To synchronize the selected libraries with OneDrive, we use the SPFx AadHttpClient. The client instance is created through the factory using the endpoint URL https://yourcompany-my.sharepoint.com:

const aadHttpClientUrl = window.location.origin.replace(".sharepoint.com", "-my.sharepoint.com");
const aadHttpClient = await this.context.aadHttpClientFactory.getClient(aadHttpClientUrl);

After the AadHttpClient stores the authentication token in cookies, those cookies must remain enabled for Smarter Navigation to work reliably. If cookies are blocked, the page might refresh repeatedly. The issue traces back to a bug in the NPM package @microsoft/sp-http, and we have already raised a ticket. Once Microsoft resolves the bug, we will ship an update to Smarter Navigation so the issue no longer occurs.

With this AadHttpClient we execute an API call that synchronizes the libraries with OneDrive:

public async syncListItemToOneDrive(item: OneDriveItem): Promise<boolean> {
    const body = {
        name: item.title,
        remoteItem: {
            sharepointIds: {
                listId: item.id,
                listItemUniqueId: "root",
                siteId: this.siteId,
                siteUrl: this.siteUrl,
                webId: this.webId,
            }
        },
        "@microsoft.graph.conflictBehavior": "rename"
    };

    const result = await this.aadHttpClient.post(`${this.aadHttpClientUrl}/_api/v2.1/drives/me/items/root/children`,
        AadHttpClient.configurations.v1,
        {
            body: JSON.stringify(body),
            headers: {
                "content-type": "application/json"
            }
        });
}

We hope this article gave you a clear look at how Smarter Navigation enables OneDrive synchronization for multiple document libraries directly from the navigation.