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

Merge branch 'dev'

This commit is contained in:
Mikael Svenson 2020-01-22 09:09:31 +01:00
parent 929629b0a9 b87f54e86c
commit 2ce00a8ce2
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 ## 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:

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 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>`);
}); });
} }