In the modern design of Office 365 and SharePoint Online in detail it is all about logos, photos and tiles or cards. Unfortunately there is still no easy Api to retrieve.
There is an undocumented version that helps maybe but only in case of ‘followed’ or ‘recent’ sites are what you want. Here is the issue and here the uservoice request.
In this post I want to show you another approach that uses the batch capability which is available for the SharePoint Rest API and can be easily used from the SPHttpClient class within SharePoint Framework (SPFx).
Furthermore the example is kept quite simple so you can also get an idea about batch requests with SharePoint Rest Api ans SPFx in general and adapt it to your own case.
Assume we have a bunch of site Urls in our use case:
When we start a batch we first need a url:
Now we have the problem that we cannot simply request the site properties as this would lead to totally different Urls which doesn’t work.
So in detail, a batch request with requests to
won’t work but several request to the same site but different lists, items, e.g. will work.
Fortunately search helps out here. We can simply request the needed properties with a search query for a site with our specific URL from current context:
Now we have constructed and collected all of our requests. We can now send them to the server and handle the responses:
Two important things to explicitly mention here:
First we use Promise.All() to wait for all requests to be completed. If we would handle each one be one we would need to write to our state each time a request is done. Or we would store it in a variable but then the challenge is when are all done and we can transfer to state? A counter can help (increase on request, decrease on response) but Promise.All() is much simpler.
Second we have to handle another async call, the json() method. Therefore we build another array of requests and with another Promise.All() we handle our final JSon response.
As we have to handle the Response of a search call, we use the helper Interfaces as below:
This approach is taken from Elio Struyf’s SPFx search example webpart.
Finally we can render our data.
As you can see I only used Groups respectively modern teamsites in my example. I like that they expose a site logo by default as a combination of an acronym and a randomly picked color. Modern communication sites display the same by default but do not expose the values (except in the above mentioned undocumented Api on followed or recent sites) or a built image as modern teamsites do. Mikael Svenson also commented on this a while ago, so we hope that Microsoft will improve the logo handling quite soon.
But I hope I gave you some ideas how to improve this yourself and also how to handle batch requests in general.
Now stay tuned for my next example where I will cover batch requests with Microsoft Graph and SharePoint Framework (SPFx).
Last not least the whole component class for your reference: