How to Display the OneNote Notebook Pages of a Specific User in SharePoint

The Microsoft Graph API connection enables you to pull all OneNote notebook sections for a specific user and present them on your SharePoint page. For this example, we'll feature the notebook sections belonging to Adele.

To accomplish this, all you have to do is use the “User’s Notebook Pages” use case. Follow the steps in the Step-by-step Tutorial to learn how.

TABLE OF CONTENTS

• Prerequisites
• What is the “User’s Notebook Pages” Use Case?
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Switch to Grid Mode
  • Step 3: Edit the Design Element
  • Step 4: Connect to Microsoft Graph API
  • Step 5: Use the User’s Notebook Pages Use Case
  • Step 6: Connect
  • Step 7: Map Items
  • Step 8: Save

Prerequisites

• You must have ShortPoint SPFx version 8.6.0.0 and up installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must have the Microsoft Graph API connection enabled. Go to How to Enable Microsoft Graph Integration for MS Graph API Connections to learn how.
• You must authorize the necessary permissions (Notes.Read and Notes.Read.All) in the API access page. To check, go to your SharePoint Admin Center > Advanced > API access.
• You must have the Design Element you want to use to connect on your SharePoint page. For best results, we recommend using Design Elements that allow listing of multiple items (e.g. Icon List, Image List, Simple List, etc.).

What is the “User’s Notebook Pages” Use Case?

Using a Microsoft Graph API GET query, the User’s Notebook Pages use case allows you to retrieve all notebook pages associated with a particular user.

The typical structure of this use case is:

https://graph.microsoft.com/v1.0/users/#emailAddress/onenote/pages

• #emailAddress - the email address of the specific user whose OneNote notebook pages you want shown.

After connecting with 'User's Notebook Pages,' you'll be able to showcase all notebook pages for a specified user, complete with links to the source pages.

To use it, you must enable the following permissions in the SharePoint Admin Center:

• Notes.Read - this permission allows the app to read all the OneNote notebooks, sections, and pages that the signed-in user already has access to, not including other users’ notebooks.
• Notes.Read.All - this permission allows the app to read all the OneNote notebooks that the signed-in user has access to, including notebooks owned by other users or shared within the organization.

NOTEIf you haven’t given access to the permissions above, go to your SharePoint Admin Center > Advanced > API access.

Step-by-step Tutorial

Follow the steps below to learn how to use the User’s Notebook Pages use case:

Step 1: Edit the ShortPoint Web Part

Go to the SharePoint page you want to use and click Edit:

Close the Toolbox:

Select the ShortPoint web part and click the Edit Properties icon:

Step 2: Switch to Grid Mode

NOTEShortPoint Connect is currently only available in Grid Mode.

Click the Switch to Grid Mode icon:

Step 3: Edit the Design Element

NOTEYou can use any Design Element you want. For best results, we recommend using Design Elements that allow listing of multiple items (e.g. Icon List, Image List, Simple List, etc.). For this guide, we’ll use Icon List.

Click the cogwheel icon of the Design Element you’ll use:

Step 4: Connect to Microsoft Graph API

Go to the Connect tab:

Select Microsoft Graph API:

NOTEYou need to enable the Microsoft Graph API connection before using it. Learn more about it in How to Enable Microsoft Graph Integration for MS Graph API Connections.

Step 5: Use the User’s Notebook Pages Use Case

Search for User’s Notebook Pages and select it:

Step 6: Connect

Under Query Parameters, you need to add a detail. Write the email of the user whose notebook pages you want to be shown.

NOTEMake sure that you and your page viewers have access to the OneNote notebooks of the specified user. Otherwise, the connection will not work as intended.

Click Run Query:

Select Connect:

Step 7: Map Items

Go to the Items tab:

Delete default content:

Use the link icon to map the properties you want to be displayed:

You can map any property you want. In our case, we used the following properties:

1. #title in the Title field - shows the titles of the notebook pages as the main header.
2. #lastModifiedDateTime in the Subtitle field - shows the date and time the notebook pages were last edited.
3. #links_oneNoteWebUrl_href - links to the actual notebook page.

(Optional) If you’re using an Icon List, select the icon you want to use:

NOTECheck out ShortPoint Connect: Basic Tutorial to learn more about mapping properties.

Step 8: Save

Click Preview to see how the Design Element will look:

Click Update to apply your changes:

Select the eye icon to see your page in real time:

Once satisfied, click Save:

You've successfully set up access to all the OneNote notebook pages of a specific user. Your page viewers can now easily navigate to any team member's notebook pages.

Related articles:

• How to Enable Microsoft Graph Integration for MS Graph API Connections
• Connection Type: Microsoft Graph API
• Microsoft Graph API: Use Cases