Forum Discussion

Copper Contributor

Mar 12, 2018

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

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.

developer

paulpascha
Mar 12, 2018
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-overview

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-available-on-sharepoint-server-2013-us?rq=1

Vivek Gupta

Copper Contributor

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.

paulpascha

Bronze Contributor

Mar 12, 2018

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!

Vivek Gupta
Copper Contributor
Mar 13, 2018
How do I parse the XML returned by "/_api/search/query?querytext='contentclass:sts_site" & convert it into JSON?
- paulpascha
  Bronze Contributor
  Mar 13, 2018
  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