SharePoint Saturday Barcelona 2018 + "El Clasico" Demo

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:``` @override public onExecute(event: IListViewCommandSetExecuteEventParameters): void { switch (event.itemId) { case ‘COMMAND_1’: { console.log(“COMMAND_1 clicked”); const itemId: number = event.selectedRows[0].getValueByName(‘ID’); var serverRelativeUrl = “”;

      sp.web.lists.getById(this.context.pageContext.list.id.toString()).items.getById(itemId).select('File/ServerRelativeUrl').expand('File').get()
        .then((item: any) => {
          serverRelativeUrl = item.File.ServerRelativeUrl;
          console.log(serverRelativeUrl);

          sp.web.getFileByServerRelativeUrl(serverRelativeUrl).getBuffer()
            .then((buffer: ArrayBuffer) => {
              console.log("getting buffer array");
              $.ajax({
                url: "https://%YOUR\_DATACENTER\_REGION%.api.cognitive.microsoft.com/vision/v2.0/describe?",
                beforeSend: function (xhrObj) {
                  xhrObj.setRequestHeader("Content-Type", "application/octet-stream");
                  xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", "%YOUR\_COMPUTER\_VISION\_API\_KEY%");
                },
                type: "POST",
                processData: false,
                data: buffer
              })
                .done(function (data) {
                  console.log(data.description.captions\[0\]);
                  var output = data.description.captions\[0\].text;
                  var message = "";
                  if (output.indexOf('Suarez') >= 0) {
                    message = "At Barça we are Més que un club";
                  }
                  if (output.indexOf('Ramos') >= 0) {
                    message = "Okay. We need to talk. We are in Barcelona. Sorry, that image is not allowed.";
                    sp.web.getFileByServerRelativeUrl("/sites/%URL\_TO\_YOUR\_FCB\_LOGO\_STORED\_IN\_SHAREPOINT%").getBlob()
                      .then((blob: Blob) => {
                        sp.web.getFileByServerRelativeUrl(serverRelativeUrl).setContentChunked(blob);
                      });
                  }
                  if (output.indexOf('Gerrard') >= 0) {
                    message = "Y\*N\*W\*A";
                  }
                  console.log(data);
                  Dialog.alert("Demo says: " + message + " And this is the Azure description: " + output);
                })
                .fail(function (data) {
                  Dialog.alert(data\[0\].description);
                });
            });
        });
    }
    break;
  default:
    throw new Error('Unknown command');
}

}