How to show the Site Collection List using SharePoint Framework Client Side Web Part in Office 365?

[Vivek Gupta]

Hi,

How to show the Site Collection List which is accessible to the user using SharePoint Framework Client Side Web Part in Office 365?

Please provide a example.

Thanks in advance.

[#2 · Accepted solution]

You can achieve this by making use the Search REST API:

https://docs.microsoft.com/en-us/sharepoint/dev/general-development/sharepoint-search-rest-api-overv...

You can specify your search query to retrieve site collections:

contentclass:"STS_Site"

See also:

https://sharepoint.stackexchange.com/questions/137739/i-want-to-get-list-of-all-site-collection-avai...

[#3]

Hi Paul,

Thanks for the reply.

However, I am not able to get the Site Collection List using the _getListData() method in GetSiteCollectionListWebPart.ts in O365 using SharePoint Framework (SPFx):

export interface ISiteCollectionLists {
value: ISiteCollectionList[];
}

export interface ISiteCollectionList {
SiteCollectionName: string;
SiteCollectionUrl: string;
}

private _getListData(): Promise<ISiteCollectionLists> {
return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + "/_api/search/query?querytext='contentclass:sts_site'", SPHttpClient.configurations.v1)
.then((response) => {
return response.json();
});
}

Please let me know the corrections to be made in _getListData() method.

Thanks in advance.

[#4]

I noticed a HTTP 500 server error occurs in your code. This has to do with the OData version being supporoted by SP Search REST API. After changing your _getListData method as below I got it working:

private _getListData(): Promise<ISiteCollectionLists> {
    const spSearchConfig: ISPHttpClientConfiguration = {
      defaultODataVersion: ODataVersion.v3
    };

    return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + "/_api/search/query?querytext='contentclass:sts_site'", SPHttpClient.configurations.v1.overrideWith(spSearchConfig))
      .then((response) => {
        return response.json();
      });
  }

You have to import some additional types for the above to work, see the blog below for details:

http://www.vrdmn.com/2017/01/working-with-rest-api-in-sharepoint.html

Hope this helps!

[#5]

How do I parse the XML returned by "/_api/search/query?querytext='contentclass:sts_site" & convert it into JSON?

[#6]

Several JavaScript libraries exist to parse XML and convert to JSON. I have no experience using any of them so I can't recommend on. Maybe just parsing the XML and working with an XMLDocument also works for you?

https://developer.mozilla.org/en-US/docs/Web/Guide/Parsing_and_serializing_XML