Merge branch 'dev'

This commit is contained in:
Mikael Svenson 2020-01-22 09:09:31 +01:00
commit 2ce00a8ce2
3 changed files with 7 additions and 2 deletions

View File

@ -3,6 +3,11 @@
## Summary ## Summary
A web part showcasing how to call the [Microsoft Graph Thumbnails API](https://docs.microsoft.com/en-us/graph/api/driveitem-list-thumbnails) to generate a preview image for files and pages in SharePoint. The sample illustrates how to craft the preview URL both from a search result as well as from a SharePoint item object. A web part showcasing how to call the [Microsoft Graph Thumbnails API](https://docs.microsoft.com/en-us/graph/api/driveitem-list-thumbnails) to generate a preview image for files and pages in SharePoint. The sample illustrates how to craft the preview URL both from a search result as well as from a SharePoint item object.
_Note that a preview for all file formats (eg. Excel) might not currently be available._
![web part sample](./preview.gif)
The sample calls the Microsoft Graph API directly directly via the _api/2.0 endpoint in SharePoint Online, but can easily be changed to call the Graph API endpoint directly for scenarios outside of SharePoint as long as an access token is retrieved. The sample calls the Microsoft Graph API directly directly via the _api/2.0 endpoint in SharePoint Online, but can easily be changed to call the Graph API endpoint directly for scenarios outside of SharePoint as long as an access token is retrieved.
The goal of the sample is to illustrate a single call calling pattern for the thumbnail with the following calling pattern: The goal of the sample is to illustrate a single call calling pattern for the thumbnail with the following calling pattern:

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

View File

@ -47,13 +47,13 @@ export default class ThumbnailWebPart extends BaseClientSideWebPart<void> {
let fileName = fileInfo["FileLeafRef"]; let fileName = fileInfo["FileLeafRef"];
let thumbnailUrl = `/_api/v2.0/sites/${this.context.pageContext.site.id}/lists/${listId}/items/${itemUniqueId}/driveItem/thumbnails/0/${maxHeight}/content${noRedirect}`; let thumbnailUrl = `/_api/v2.0/sites/${this.context.pageContext.site.id}/lists/${listId}/items/${itemUniqueId}/driveItem/thumbnails/0/${maxHeight}/content${noRedirect}`;
_documentResults += (`<li>${fileName}<br/><img height="150" border="1" src="${thumbnailUrl}"></li>`); _documentResults += (`<li>${fileName}<br/><img height="150" border="1" src="${thumbnailUrl}" onerror="this.src=''"></li>`);
}); });
searchResults.PrimarySearchResults.forEach(item => { searchResults.PrimarySearchResults.forEach(item => {
let thumbnailUrl = `/_api/v2.0/sites/${item["NormSiteID"]}/lists/${item["NormListID"]}/items/${item["NormUniqueID"]}/driveItem/thumbnails/0/${maxHeight}/content${noRedirect}`; let thumbnailUrl = `/_api/v2.0/sites/${item["NormSiteID"]}/lists/${item["NormListID"]}/items/${item["NormUniqueID"]}/driveItem/thumbnails/0/${maxHeight}/content${noRedirect}`;
_searchResults += (`<li>${item["FileName"]}<br/><img height="150" border="1" src="${thumbnailUrl}"></li>`); _searchResults += (`<li>${item["FileName"]}<br/><img height="150" border="1" src="${thumbnailUrl}" onerror="this.src=''"></li>`);
}); });
} }