SOLVED

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

%3CLINGO-SUB%20id%3D%22lingo-sub-170439%22%20slang%3D%22en-US%22%3EHow%20to%20show%20the%20Site%20Collection%20List%20using%20SharePoint%20Framework%20Client%20Side%20Web%20Part%20in%20Office%20365%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-170439%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%0A%3CP%3EHow%20to%20show%20the%20Site%20Collection%20List%26nbsp%3Bwhich%20is%20accessible%20to%20the%20user%20using%20SharePoint%20Framework%20Client%20Side%20Web%20Part%20in%20Office%20365%3F%3C%2FP%3E%0A%3CP%3EPlease%20provide%20a%20example.%3C%2FP%3E%0A%3CP%3EThanks%20in%20advance.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-170439%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-170934%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20show%20the%20Site%20Collection%20List%20using%20SharePoint%20Framework%20Client%20Side%20Web%20Part%20in%20Office%203%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-170934%22%20slang%3D%22en-US%22%3ESeveral%20JavaScript%20libraries%20exist%20to%20parse%20XML%20and%20convert%20to%20JSON.%20I%20have%20no%20experience%20using%20any%20of%20them%20so%20I%20can't%20recommend%20on.%20Maybe%20just%20parsing%20the%20XML%20and%20working%20with%20an%20XMLDocument%20also%20works%20for%20you%3F%3CBR%20%2F%3E%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FGuide%2FParsing_and_serializing_XML%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FGuide%2FParsing_and_serializing_XML%3C%2FA%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-170922%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20show%20the%20Site%20Collection%20List%20using%20SharePoint%20Framework%20Client%20Side%20Web%20Part%20in%20Office%203%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-170922%22%20slang%3D%22en-US%22%3E%3CP%3EHow%20do%20I%20parse%20the%20XML%20returned%20by%20%22%2F_api%2Fsearch%2Fquery%3Fquerytext%3D'contentclass%3Asts_site%22%20%26amp%3B%20convert%20it%20into%20JSON%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-170749%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20show%20the%20Site%20Collection%20List%20using%20SharePoint%20Framework%20Client%20Side%20Web%20Part%20in%20Office%203%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-170749%22%20slang%3D%22en-US%22%3E%3CP%3EI%20noticed%20a%20HTTP%20500%20server%20error%20occurs%20in%20your%20code.%20This%20has%20to%20do%20with%20the%20OData%20version%20being%20supporoted%20by%26nbsp%3BSP%20Search%20REST%20API.%20After%20changing%20your%20_getListData%20method%20as%20below%20I%20got%20it%20working%3A%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%3Eprivate%20_getListData()%3A%20Promise%26lt%3BISiteCollectionLists%26gt%3B%20%7B%0A%20%20%20%20const%20spSearchConfig%3A%20ISPHttpClientConfiguration%20%3D%20%7B%0A%20%20%20%20%20%20defaultODataVersion%3A%20ODataVersion.v3%0A%20%20%20%20%7D%3B%0A%0A%20%20%20%20return%20this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl%20%2B%20%22%2F_api%2Fsearch%2Fquery%3Fquerytext%3D'contentclass%3Asts_site'%22%2C%20SPHttpClient.configurations.v1.overrideWith(spSearchConfig))%0A%20%20%20%20%20%20.then((response)%20%3D%26gt%3B%20%7B%0A%20%20%20%20%20%20%20%20return%20response.json()%3B%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%7D%3C%2FPRE%3E%0A%3CP%3EYou%20have%20to%20import%20some%20additional%20types%20for%20the%20above%20to%20work%2C%20see%20the%20blog%20below%20for%20details%3A%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22http%3A%2F%2Fwww.vrdmn.com%2F2017%2F01%2Fworking-with-rest-api-in-sharepoint.html%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttp%3A%2F%2Fwww.vrdmn.com%2F2017%2F01%2Fworking-with-rest-api-in-sharepoint.html%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EHope%20this%20helps!%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-170510%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20show%20the%20Site%20Collection%20List%20using%20SharePoint%20Framework%20Client%20Side%20Web%20Part%20in%20Office%203%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-170510%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20Paul%2C%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThanks%20for%20the%20reply.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EHowever%2C%20I%20am%20not%20able%20to%20get%20the%20Site%20Collection%20List%20using%20the%20_getListData()%20method%20in%20GetSiteCollectionListWebPart.ts%20in%20O365%20using%20SharePoint%20Framework%20(SPFx)%3A%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3Eexport%20interface%20ISiteCollectionLists%20%7B%3CBR%20%2F%3E%20value%3A%20ISiteCollectionList%5B%5D%3B%3CBR%20%2F%3E%7D%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3Eexport%20interface%20ISiteCollectionList%20%7B%3CBR%20%2F%3E%20SiteCollectionName%3A%20string%3B%3CBR%20%2F%3E%20SiteCollectionUrl%3A%20string%3B%3CBR%20%2F%3E%7D%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3Eprivate%20_getListData()%3A%20Promise%3CISITECOLLECTIONLISTS%3E%20%7B%3CBR%20%2F%3E%20return%20this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl%20%2B%20%22%2F_api%2Fsearch%2Fquery%3Fquerytext%3D'contentclass%3Asts_site'%22%2C%20SPHttpClient.configurations.v1)%3CBR%20%2F%3E%20.then((response)%20%3D%26gt%3B%20%7B%3CBR%20%2F%3E%20return%20response.json()%3B%3CBR%20%2F%3E%20%7D)%3B%3CBR%20%2F%3E%7D%3C%2FISITECOLLECTIONLISTS%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EPlease%20let%20me%20know%20the%20corrections%20to%20be%20made%20in%20_getListData()%20method.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThanks%20in%20advance.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-170452%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20show%20the%20Site%20Collection%20List%20using%20SharePoint%20Framework%20Client%20Side%20Web%20Part%20in%20Office%203%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-170452%22%20slang%3D%22en-US%22%3E%3CP%3EYou%20can%20achieve%20this%20by%20making%20use%20the%20Search%20REST%20API%3A%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fgeneral-development%2Fsharepoint-search-rest-api-overview%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fgeneral-development%2Fsharepoint-search-rest-api-overview%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EYou%20can%20specify%20your%20search%20query%20to%20retrieve%20site%20collections%3A%3C%2FP%3E%0A%3CP%3E%3CSTRONG%3Econtentclass%3A%22STS_Site%22%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ESee%20also%3A%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fsharepoint.stackexchange.com%2Fquestions%2F137739%2Fi-want-to-get-list-of-all-site-collection-available-on-sharepoint-server-2013-us%3Frq%3D1%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fsharepoint.stackexchange.com%2Fquestions%2F137739%2Fi-want-to-get-list-of-all-site-collection-available-on-sharepoint-server-2013-us%3Frq%3D1%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E
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