How to Create a List that Displays All The Sites Your User Has Access To

With the REST API connection, you can showcase all the sites your user has access to. Follow the step-by-step tutorial to learn how.

NOTEThe list will display different sites for each user, showing only the sites they have permission to access.

TABLE OF CONTENTS

• Prerequisite
• 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 Design Element to REST API
  • Step 5: Map Items
  • Step 6: Save

Prerequisite

• You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must already have either the Icon List or the Simple List on your SharePoint page.

Step-by-step Tutorial

Follow the steps below to learn how to create a site list using REST API:

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 tag:

Click the Edit Properties icon:

Step 2: Switch to Grid Mode

NOTEThe ShortPoint Connect feature is currently only available in Grid Mode.

Click the Switch to Grid Mode icon:

Step 3: Edit the Design Element

NOTEBefore proceeding, make sure you already have an Icon List or a Simple List on your SharePoint page. For this guide, we will use an Icon List. 

Hover over the design element you want to use and click the cogwheel icon:

Step 4: Connect Design Element to REST API

Go to the Connect tab:

Select REST API:

Copy the code below and paste it in the REST API URL field:

/_api/search/query?querytext='contentclass:STS_Site'

Turn on Enable Advanced Settings:

Copy the code below:

function extractKeyValuePairsArray(dataArray) {
  return dataArray.map(data => {
    return data.Cells.results.reduce((acc, item) => {
      acc[item.Key] = item.Key != "Author" ? item.Value : item.Value.replace("Global Administrator", "").replace("SharePoint App", "").replace("System Account", "").replace(";", "");
      return acc;
    }, {});
  }).filter(x => x.WebTemplate != "SPSPERS");
}

const inputArray = data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results;
const outputArray = extractKeyValuePairsArray(inputArray);

return outputArray;

Scroll down until you see Map Results and paste the copied code:

Click Connect:

Step 5: Map Items

Delete all default content:

Use the link icon to map the properties you want to appear in the Title, Subtitle, and Link fields:

Below is an example of how we mapped the items we want to show in the Icon List:

1. #Title in the Title field - will showcase the name of the site as the title.
2. #Author in the Subtitle field - will display the site owner as the subtitle.
3. #SiteName in the Link field - will redirect users to the actual site when they click on an item.

(Optional) If you are using an Icon List, choose the icon you want to be displayed in the Icon field:

Step 6: Save

Click Preview to see how the list will look:

Click Update once satisfied:

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

Save your changes:

Congratulations! You've successfully created a list that shows all the sites your users can access.

Related articles:

• Showcasing Files and Folders From a Document Library Using REST API
• How to Show Top-Level Folders and Files from a Document Library Using REST API
• How to Show a Mixed View of Files and Folders from a Document Library Using REST API