How to Display all the SharePoint Lists from a SharePoint Site

With the Microsoft Graph API connection, you can get all the SharePoint lists in your SharePoint site and display them on your page. Simply use the "Lists in a SharePoint Site” use case. To learn how to do it, follow the steps below.

TABLE OF CONTENTS

• Prerequisites
• What is the “Lists in a SharePoint Site” 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 Lists in a SharePoint Site Use Case
  • Step 6: Get the Site ID
  • Step 7: Connect
  • Step 8: Map Items
  • Step 9: 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 (Sites.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 “Lists in a SharePoint Site” Use Case?

The Lists in a SharePoint Site use case is a Microsoft Graph API GET query that retrieves all the SharePoint Lists in the specified SharePoint site.

The typical structure of this use case is:

https://graph.microsoft.com/v1.0/sites/[%Current('siteId')%]/lists

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

• Sites.Read.All- this permission allows the app to read all site properties (ID, display name, web URL, etc), lists and libraries, list items and documents, and site hierarchy.

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 Lists in a SharePoint Site 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 Lists in a SharePoint Site Use Case

Search for Lists in a SharePoint Site and select it:

Step 6: Get the Site ID

You will be prompted to fill in the details under Query Parameters. To do this, click Get Parameter:

Look for the group you want to use and copy its ID:

Click Go back:

Paste the copied ID in the field provided:

Step 7: Connect

Click Run Query:

Select Connect:

Step 8: 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. #displayName in the Title field - shows the title of the lists as the titles.
2. #createdDateTime in the Subtitle field - shows the date and time the list was created.
3. #webUrl - links to the actual SharePoint List.

(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 9: 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:

Congratulations! Your page viewers can now easily access all the SharePoint lists in your SharePoint site.

NOTESee how easily we found the SharePoint List we’re looking for? This is thanks to the Search & Filter Toolbar! With it, you can get the information you need in seconds. Simply go to Getting Started: The Basics of the Search & Filter Toolbar to give it a try.

Related articles:

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