Microsoft 365 Community Community Demos, 19 Dec 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Get Thumbnail Command Set extension for files

Description

This PnP community demo is taken from the bi-weekly SharePoint Developer Community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded on December 19, 2019.

In this 5-minute video, Aakash Bhardwaj, Office 365 Developer at HCL Technologies, walks through a SPFx extension example that uses React to get a thumbnail image URL from a list. On the toolbar select “Get Thumbnail”, from the pop-up select thumbnail size - Small, Medium, Large and finally Copy the returned link. The get link functionality also works for docs, videos... The thumbnail is fetched using the Graph API.

Presenter: Aakash Bhardwaj (HCL Technologies) | @aakash_316

Supporting materials:
• Sample code - https://github.com/SharePoint/sp-dev-fx-extensions/tree/master/samples/react-command-get-thumbnail

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp

A

Hello, everyone I, am mukesh baburaj I work as an office 365 developer at HCL Technologies, so today, I'll be showing in it the effects extension sample that I contributed a while back. So this one is called the get thumbnail, so it's an SPF X command bar extension that uses Microsoft graph API to fetch the thumbnail image URL of any file stored in a SharePoint document library. So let me show how it works so here I have a document library in in a site in where I have installed this xpx extension solution.

A

So here when I select any of these files, so at the top I will get this get thumbnail button visible. So this button would be visible only when I have selected a single file so for multiple selections it would be hidden and also for the folder selection. That would be hidden as well. So when I select a file and I click on this get thumbnail button, so this little dialog box would appear. So this would first of all ask me the size of the thumbnail image that I want.

A

So here I have given some options like small, medium and large, so whichever option I select, so this would actually give me the thumbnail image URL for that size, so clicking on this copy button would copy this link to my clipboard and now I can just open a new tab and try to access this so same I can do for different sizes as well like a medium and large as well. So it would give me the appropriate size like this.

A

So this was the basic functionality but, like I said, it would work for any of these files, whether we have a dog file or a PDF file or image file, but for the folders it would be hidden. So let me know it quickly jump over to the code.

A

So this is my main command set dot, t-- s file. So here in the on init method, I am assigning some variables that I will be using later, like this site, ID endless study and I'm using PNP JS to get the content type ID of the folder content type, because that I'll be using later on to check. If my selected item is a folder. So this was the on init method, then, in this method, I'm actually making the check like if I want to make that command by visible or hidden.

A

So, like I, said here, I'm doing that check to see if it's a folder item or and if it's just a single item selection. So only then the command bar would be visible, otherwise it could be hidden and then, in this method, I am actually dealing with the code that the action that takes place when that command bar is clicked. So here, I am actually creating an object of this thumbnail. Dialer class and I am passing some data values to it like this site, ID list ID and item ID.

A

So these three values I'll be using to actually fetch the the thumbnail using the graph API so in this class of each object, I created so here, I'm, basically rendering a react component. My thumbnail dialog content component, so this component will actually deal with all the logic and would render all the UI components. So let me show this yes, so the render method is pretty straightforward. So just a one dialer content component here that has other components like this I checkmark icon. That was used to show that the link has been copied.

A

Then the text- and this is the drop down from where we can select this size, small, medium or large, and then the text field and the primary button to copy. So what happens when I select this select? Any of the choices in this drop-down is so I call this method called the get thumbnail URL. So this has all the code that that I need to fetch the thumbnail URL, so here I'm using the MS craft, client library. So this is the end API endpoint I'm, calling for dove the site list and item.

A

So the site list and item ID, followed by the drive item thumbnails and in the end I'm specifying the size whether it needs to be small, medium or large. So to make this call using the MS craft, grant the permission that is required. Is this sides not read dot or on Microsoft graph? So this you can find here in the Web API permission request property.

A

So after that it's just simple like since I have the URL now so I'm just populating it populating that in the text box and clicking on the copy button is calling another method thing. This one is the copy thumbnail URL. So this would just copy the value to my clipboard.

A

So I guess that's all from this demo. If anyone has any questions, I'd be happy to answer them in the chat window. Great, very cool, very cool.