diff --git a/samples/js-msgraph-thumbnail/README.md b/samples/js-msgraph-thumbnail/README.md index b8e25d89f..c50562223 100644 --- a/samples/js-msgraph-thumbnail/README.md +++ b/samples/js-msgraph-thumbnail/README.md @@ -3,6 +3,11 @@ ## 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. +_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 goal of the sample is to illustrate a single call calling pattern for the thumbnail with the following calling pattern: diff --git a/samples/js-msgraph-thumbnail/preview.gif b/samples/js-msgraph-thumbnail/preview.gif new file mode 100644 index 000000000..ccc1f80be Binary files /dev/null and b/samples/js-msgraph-thumbnail/preview.gif differ diff --git a/samples/js-msgraph-thumbnail/src/webparts/thumbnail/ThumbnailWebPart.ts b/samples/js-msgraph-thumbnail/src/webparts/thumbnail/ThumbnailWebPart.ts index eb8cd8656..ef9bcadc3 100644 --- a/samples/js-msgraph-thumbnail/src/webparts/thumbnail/ThumbnailWebPart.ts +++ b/samples/js-msgraph-thumbnail/src/webparts/thumbnail/ThumbnailWebPart.ts @@ -47,13 +47,13 @@ export default class ThumbnailWebPart extends BaseClientSideWebPart { 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}`; - _documentResults += (`
  • ${fileName}
  • `); + _documentResults += (`
  • ${fileName}
  • `); }); searchResults.PrimarySearchResults.forEach(item => { let thumbnailUrl = `/_api/v2.0/sites/${item["NormSiteID"]}/lists/${item["NormListID"]}/items/${item["NormUniqueID"]}/driveItem/thumbnails/0/${maxHeight}/content${noRedirect}`; - _searchResults += (`
  • ${item["FileName"]}
  • `); + _searchResults += (`
  • ${item["FileName"]}
  • `); }); }