SOLVED

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

New Contributor

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.

5 Replies
best response
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...

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.

 

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!

 

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

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