honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added preview for the thumbnail sample

This commit is contained in:
Mikael Svenson 2020-01-22 09:09:11 +01:00
parent 93bdf2ee95
commit b87f54e86c
3 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
samples/js-msgraph-thumbnail/README.md
View File

@ -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:

BIN
samples/js-msgraph-thumbnail/preview.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

4
samples/js-msgraph-thumbnail/src/webparts/thumbnail/ThumbnailWebPart.ts
View File

@ -47,13 +47,13 @@ export default class ThumbnailWebPart extends BaseClientSideWebPart<void> {
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 += (`<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 => {
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>`);
});
}