Get Current SharePoint Site Information in SPFx using MS Graph API

In this article, I will explain how to retrieve the current SharePoint site information using the Microsoft Graph API in an SPFx web part. In the example below, you can see that the web part displays the current SharePoint site’s logo, site name, URL, ID, description, template, storage information, and more.

Let’s see how to retrieve the information shown above for the current SharePoint site using the Microsoft Graph API.

Create an SPFx Web Part Using Bootstrap & MS Graph API to Get SharePoint Site Details

Let’s start by creating an SPFx solution, then set up Microsoft Graph API requests to fetch the current SharePoint site information. We’ll also use Bootstrap to design and style the web part.

1. Open the Windows command prompt or any other command prompt. Create a directory for the SPFx solution and then navigate into that directory with the following commands.

md SPFxSiteInfo

cd SPFxSiteInfo

2. Run the command below to create the solution using Yeoman.

yo @microsoft/sharepoint

3. Now, it will ask you a few details, as shown below. Provide the answers as I have given, or you can change them.

• What is your solution name? sp-fx-site-info
• Which type of client-side component to create? WebPart
• Add new Web part to solution sp-fx-site-info.
• What is your Web part name? CurrentSiteInfo
• Which template would you like to use? React

Then, it will take some time, and the SPFx solution will be created, after which you will see a successful message.

4. We’ll use Bootstrap for styling. To add it locally, run the command below. After installation, open the solution in VS Code using code ..

npm install bootstrap

5. To use Bootstrap CSS in your React component (.tsx file), import the following statement:

import 'bootstrap/dist/css/bootstrap.min.css';

To retrieve SharePoint site information using Microsoft Graph API, we need to start by configuring the required permissions in package-solution.json, then use MSGraphClient, and request admin consent.

6. Open the config/package-solution.json file. Add the below permission as shown in the image below.

"webApiPermissionRequests": [
       {
        "resource": "Microsoft Graph",
        "scope": "Sites.Read.All"
     }
 ]

Without using the MSGraph API, we can retrieve some basic information about the SharePoint site, such as the site name, URL, ID, description, logo URL, template, and more.

7. Now we’ll update the props interface to include MSGraphClientV3, allowing us to use Microsoft Graph within the component and basic site information. Update the code below in the Props.ts file.

import { MSGraphClientV3 } from '@microsoft/sp-http';
export interface ICurrentSiteInfoProps {
  description: string;
  isDarkTheme: boolean;
  environmentMessage: string;
  hasTeamsContext: boolean;
  userDisplayName: string;
  graphClient: MSGraphClientV3;
  siteName: string;
  siteUrl: string;
  siteDescription: string;
  siteLogoUrl: string;
  siteId: string;
  siteTemplate: string;
}

8. Next, in the CurrentSiteInfoWebpart.ts file, use msGraphClientFactory to get an instance of MSGraphClientV3. Import the statement below and update the render() function.

import { MSGraphClientV3 } from '@microsoft/sp-http';  

public render(): void {
    this.context.msGraphClientFactory.getClient('3').then((client:MSGraphClientV3)=>{
    const element: React.ReactElement<ICurrentSiteInfoProps> = React.createElement(
      CurrentSiteInfo,
      {
        description: this.properties.description,
        isDarkTheme: this._isDarkTheme,
        environmentMessage: this._environmentMessage,
        hasTeamsContext: !!this.context.sdks.microsoftTeams,
        userDisplayName: this.context.pageContext.user.displayName,
        graphClient: client,
        siteName: this.context.pageContext.web.title, 
        siteUrl: this.context.pageContext.web.absoluteUrl, 
        siteDescription: this.context.pageContext.web.description, 
        siteLogoUrl: this.context.pageContext.web.logoUrl,
        siteId: this.context.pageContext.web.id.toString(),
        siteTemplate: this.context.pageContext.web.templateName
      }
    );
    ReactDom.render(element, this.domElement);
  })
  }

Here, we are assigned the graphClient property with an instance of MSGraphClientV3, and then for the site name, URL, and other properties, we fetch values from this.context.pageContext.web.

• this = It refers to the current component.
• context = It provides helpful information about the current SharePoint environment.
• pageContext = It contains details about the current page, such as the user, site, and web.
• web = It refers to the current SharePoint site.

In addition to the above site properties, we will also explore how to retrieve further information about the current SharePoint site, including site storage details, the date it was created, and the date it was last updated, using the Microsoft Graph API.

9. Now, to fetch and store the remaining site information, create a state and include that state in the export default class. Then, initialize that state using the constructor within the default class, as shown below.

interface ICurrentSiteDetailsState {
  siteCreatedDate: string;
  siteLastModifiedDate: string;
  siteStorageQuota: number;
  siteStorageUsed: number;
  siteStorageRemaining: number;
}

export default class CurrentSiteInfo extends React.Component<ICurrentSiteInfoProps, ICurrentSiteDetailsState > {
    constructor(props: ICurrentSiteInfoProps) {
    super(props);
    this.state = {
      siteCreatedDate: '',
      siteLastModifiedDate: '',
      siteStorageQuota: 0,
      siteStorageUsed: 0,
      siteStorageRemaining: 0,
    };
  }

10. Then, within the class, above the render() method, add the componentDidMount() method, which will retrieve the site storage information, including the date it was created and the date it was last updated.

public async componentDidMount(): Promise<void> {
  const { graphClient, siteUrl } = this.props;

  try {
    const url = new URL(siteUrl);
    const hostname = url.hostname;
    const pathname = url.pathname;
    const graphSitePath = `/sites/${hostname}:${pathname}`;
    const site = await graphClient.api(graphSitePath).get();
    console.log("Graph site response:", site);

    const createdDate = site.createdDateTime
      ? new Date(site.createdDateTime).toLocaleDateString('en-GB')
      : '';
    const modifiedDate = site.lastModifiedDateTime
      ? new Date(site.lastModifiedDateTime).toLocaleDateString('en-GB')
      : '';
    const siteId = site.id;
    let storageUsed = 0;
    let storageTotal = 0;
    let storageRemaining = 0;
    const drive = await graphClient.api(`/sites/${siteId}/drive`).get();
    if (drive?.quota) {
      storageUsed = Math.round(drive.quota.used / (1024 * 1024));   // MB
      storageTotal = Math.round(drive.quota.total / (1024 * 1024)); // MB
      storageRemaining = storageTotal - storageUsed;
    }
    this.setState({
      siteCreatedDate: createdDate,
      siteLastModifiedDate: modifiedDate,
      siteStorageQuota: storageTotal,
      siteStorageUsed: storageUsed,
      siteStorageRemaining: storageRemaining,
    });

  } catch (error) {
    console.error('Error loading site details:', error);
  }
}

Here,

• const { graphClient, siteUrl } = this.props; Fetching the graphClient and siteUrl values via props.
• const url = new URL(siteUrl); Returns the URl object to access structured components of the URL, such as:
  • hostname = for exe, “szg.sharepoint.com”
  • pathname = “/sites/sitename”
  • href = “https://szg.sharepoint.com/sites/sitename”
• We’re doing this because the Microsoft Graph API HTTP request will look like this: GET /sites/{hostname}:/{relative-path}
• const graphSitePath = `/sites/${hostname}:${pathname}`; This line will create the site path required for MS Graph API.
• const site = await graphClient.api(graphSitePath).get(); The site will hold the Microsoft Graph API call response in an object format.
• Through this site object, we are fetching the site’s creation and last update dates [site.createdDateTime, site.lastModifiedDateTime].
• const drive = await graphClient.api(`/sites/${siteId}/drive`).get(); This is another call to retrieve the site storage details, and it will be stored in the drive object.
• From this drive object, we are fetching the storage[drive.quota.used, drive.quota.total]
• After calculating the storage in MBs, we stored those values in variables and then used those values to update the state.

11. Then, update the render() method with the code below.

  public render(): React.ReactElement<ICurrentSiteInfoProps> {
  const siteLogoUrl = this.props.siteLogoUrl || 'https://via.placeholder.com/120'; 
  const siteTemplateId = this.props.siteTemplate; 
  const templateMap: { [key: string]: string } = {
     "1": "Classic Team Site",
     "64": "Modern Team Site (with Microsoft 365 Group)",
    "68": "Communication Site",
   };
  const siteTemplateName = templateMap[siteTemplateId] || `Unknown Template (${siteTemplateId})`;
  return (
      <div className="card shadow p-4" style={{ backgroundColor: '#f3f0fc' }}>
        <div className="row align-items-center">
          
          {/* Left: Logo, site template name */}
          <div className="col-md-3 text-center border-end">
            <img
              src={siteLogoUrl}
              alt="Site Logo"
              className="rounded-circle border shadow-sm mb-3"
              style={{ width: 100, height: 100, objectFit: 'cover' }}
            />
            <p>{siteTemplateName}</p>
            
          </div>

        {/* Right: Site Details */}
        <div className="col-md-9">
          <div className="row">
            <div className="col-sm-6">
              <p><strong>Site Name:</strong> {this.props.siteName}</p>
              <p><strong>Site URL:</strong> <a href={this.props.siteUrl} target="_blank">{this.props.siteUrl}</a></p>
              <p><strong>Site ID:</strong> {this.props.siteId}</p>
              <p><strong>Site Description:</strong>{this.props.siteDescription}</p>
            </div>
            <div className="col-sm-6">
              <p><strong>Created:</strong> {this.state.siteCreatedDate}</p>
              <p><strong>Modified:</strong> {this.state.siteLastModifiedDate}</p>
              <p><strong>Storage Quota:</strong> {this.state.siteStorageQuota} MB</p>
              <p><strong>Storage Used:</strong> {this.state.siteStorageUsed} MB</p>
              <p><strong>Remaining:</strong> {this.state.siteStorageRemaining} MB</p>
            </div>
          </div>
        </div>

      </div>
    </div>
      );
  }

Here,

• siteLogoUrl = This variable stores the site logo URL from the props; if the logo URL is not found, it holds a default placeholder URL.
• siteTemplateId = It holds the site template ID from the props.
• templateMap = Based on the template ID, we map to the template name, such as “Team Site” or “Communication Site”.
• siteTemplateName = It holds the template name from the “templateMap” matches with the template ID.
• <div className=”card shadow p-4″> = Bootstrap class “card shadow” is applied to create a card with padding 4 for top, bottom, left, right.
• <div className=”row align-items-center”> = It creates a row inside the card, and aligns the items in the center.
• <div className=”col-md-3 text-center border-end”> = Within the row, this column takes 3 out of 12 columns on medium and places text in the center, providing a border end. Within this site, the logo and the site template name will be displayed.
• <div className=”col-md-9″> = This column takes 9 out of 12 columns on medium.
• <div className=”row”> = Within the above column, a row will be created with this div element.
• <div className=”col-sm-6″> = This column takes 6 out of 12 columns on small screen, within this column, we are displaying the:
  • Site Name
  • Site URL
  • Site ID
  • Site Description
• <div className=”col-sm-6″> = This column takes 6 out of 12 columns like in the above, within this column we are displaying the:
  • Created
  • Modified
  • Storage Quota
  • Storage Used
  • Remaining

Here, we are fetching some site properties from the Props and others from the States. So this.props indicates props and this.state indicates state.

12. Update the icon for this web part in the officeFabricIconFontName property within the “preconfiguredEntries” section of the manifest.json file.

  "preconfiguredEntries": [{
    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Advanced
    "group": { "default": "Advanced" },
    "title": { "default": "CurrentSiteInfo" },
    "description": { "default": "CurrentSiteInfo description" },
    "officeFabricIconFontName": "AdminSLogoInverse32",
    "properties": {
      "description": "CurrentSiteInfo"
    }
  }]

13. Now save the changes. To test it locally, run the command below. It will automatically open the workbench URL with the SharePoint site you provided in the serve.json file’s “initialPage” parameter.

gulp serve

Now, in the above image, you can see that the local workbench is open, and our web part icon has also changed. Click on it, and the web part will display the current site information, as shown below.

This way, we can easily fetch the current SharePoint site information and design the web part using the Bootstrap CSS.

Deploy SPFx: Retrieve SharePoint Site Information Webpart

After deployment, we need to obtain approval from the tenant administrator to use the Microsoft Graph API calls against SharePoint. But here, we have used the Sites.Read.All is a delegated permission that allows us to access the current SharePoint site’s basic information, and it is granted by default, so it doesn’t require admin consent.

Run the following commands one by one to package the solution.

gulp clean
gulp build
gulp bundle --ship
gulp package-solution --ship

After running these commands, a .sppkg file will be created in the sharepoint/solution folder. Upload this file to either into the site collection app catalog or the tenant app catalog.

Download the SPFx Solution

Download the SPFx solution from the link below, then run the command below to install all required packages before starting the setup.

npm install

• Download SPFx Retrieve Current SharePoint Site Information Webpart using Microsoft Graph API

I hope you found this article helpful!, In this article, I have explained how to retrieve the current SharePoint site information using the Microsoft Graph API. We also discussed how to use the Bootstrap CSS to design the SPFx web part. Follow this article if you are also trying to fetch the current site information in a SPFx web part.

Also, you may like the following tutorial:

• SPFx Error: Couldn’t add this app
• Create SPFx Dynamic Accordion Webpart Using PnP Controls React
• Add Multiple WebParts To Single SPFx Solution
• Create Folders and Subfolders in SharePoint document library using SPFx
• SPFx Application Customizer Example
• SPFx Field Customizer Example