Yesterday I had the pleasure to present at SharePoint Saturday Barcelona. The whole of 2018 we were kind of touring with our “lunch bell” session. It all began at SPS Barcelona 2017 where a part of the session on PnP was a demo of the lunch bell. The feedback was really great and the idea of creating a session around this topic alone was borne. But all good ends at some point in time in our case this was one of the last times we actually present this topic. We have a full backlog of ideas for 2019 and after ESPC we won’t present this anymore. There is also a real-world reason behind the decision. We as Solvion move to a new office by the 1st of January, so there isn’t a need for this kind of lunch bell anymore. But let’s see what the new office provides and what ideas will be there after moving. Here the slides from yesterday:

Back to SharePoint Saturday Barcelona. There is also another big event currently in Barcelona, El Clasico. The football match between FC Barcelona and Real Madrid. Last week in Brussels Edin asked me to use this match for one of my demos. It took me a few hours yesterday, but then I was able to showcase a SharePoint Framework ListView Command Set extension that takes the selected image in a document library and askes Azure Computer Vision for a description of the image. We tried the Command Set with a few images from footballers and got back a friendly message when the Command Set detected a local player from Barcelona. On the other hand, if it detects a certain player from Real Madrid, we just update the image with a logo from Barcelona just to make sure the audience in Barcelona isn’t starting throwing tomatoes at me presenting 😉

I will put the complete project code on Github next week, but here the important part with the actual “logic” behind:

 

I used the code generated by the PnP SPFx Yeoman generator and just added some lines in the onExecute method. As the code is running inside of SharePoint online and the images are secured and not reachable by Azure just with handing over a URL we need to grab the image in a data format. Line 15 reads the image in a buffer by using PnP-JS. All the details on how to handle files by using PnP-JS can be found here https://github.com/SharePoint/PnP-JS-Core/wiki/Working-With:-Files .

We then use an Azure Computer Vision endpoint by simply using the URL provided by Azure and the key of our configured service. We hand over the key to the header of the call in line 22. Just provide your own key here and change the URL to the endpoint in line 19 to your region. Both settings can be found in your Azure portal here:

 

Starting in line 28 we are handling the response from the Computer Vision service. Line 30 grabs the description part of the response as this holds a full sentence describing the image. After that, we just look for certain football player names and take some action if we found someone interesting.  Line 39 changes the blob of the selected file with new data again with the power of PnP-JS. To show some output we just use a dialog to provide some information to the end user. 

Here a short video of the Command Set in action:

 

 
Big thanks to Giuliano De Luca who helped with a few tips in the speaker’s room during creating this Command Set. Grazie Giuliano!