0 comment

A smart stupid web part consumes a third party API through Azure Functions – Part 3

The second blog post in this series was pretty long. This time I keep it way shorter. This time I focus more on the user experience and the ideas behind the final web part that consumes the third party API. Like I promised the web part code itself contains only a single REST query against my Azure Function and that’s it.

Let’s first take at the typical behaviour of the first party video web part available on Office 365.

The Office 365 Video Web Parts behaviour

There are two web parts for videos right now. The Office 365 Videos or the Stream Preview web part, not to mention the generic embed web part. The user needs to know where to find the videos. So they have to open another browser window or browser tab, search for a video and paste the URL into the web part.

Office365 video web part default behaviour


Microsoft stream web part default behaviour

There is nothing wrong with this approach. Honestly, it is the conventional approach and even was in the classic experience. You search for the video somewhere else and past the code to embed. Simple as that. With my web part, I wanted to use a smarter approach and still keep the web part stupid. It means that there is no real connection directly to the third party API or contains any business logic, other than the logic of the user interface.

My Vimeo Search Web Part

The web part I use to demo to consume the Azure Function is not 100% ready yet there still some things left to improve. This early version should give you more an idea how the overall user experience is meant to be. The first thing you see after this web part gets embedded on a page is just a big bold search box. This search box allows you to search Vimeo videos through the Azure Function, but it could be any 3rd party API.

First look after web part was embedded

After you search for any specific video, the search result gets shown right below the search box. It also displays the title, the owner and a short description of each video.

Vimeo search result through Azure Function

So far so good but how to choose the matching video. When you click on one of the videos a preview gets displayed right below the search bar too. The embedded player is fully functioning, and I reuse the same control for the regular view of the videos also. The button below the video stores the selected video directly to the web part properties.

Video preview after selection

This way there is no need for the user to fumble around with different browser tabs or windows to find an appropriate video. If the user already has a link to a video, it is even possible to enter the URL directly. Finally, let’s take a look how the final embedded video looks.

Finally the embedded video

The screenshot was taken directly from the view in the workbench preview. Like mentioned earlier this reuses the same player as I used for previewing the video. The player itself is fully responsive because Vimeo already provides this feature.

A responsive small sized video embedded on the page

To use the property pane or not to use the property pane

The property pane for web parts is pretty convenient for simple configurations. In this case, if you have to deal with media such as video. It might want to do directly in the page context instead of using a minified user experience in the property pane. Search for videos directly in the web part feels more natural but is also has a downside. You not actually see while editing how the final content looks. This issue is more related to the overall edition process in SharePoint where you don’t have yet the possibility to preview the content unless you published it. A feature that every content management system has typically. Even previewing the mobile experience is hard for the business user too. The need to trust it gets adequately rendered but have no easy way to preview. My rule of thumb pro and against the property pane is. Simple configurations go to the property pane. For more complex operations it might be smarter to get handled directly in the web part.

Finally get a live impression

To give you a better impression how the overall setup and the behaviour looks like I recorded a short video.

  Currently, the code is an early beta, not beneficial to share right now. I will make some final adjustments and publish it as part of the Pattern and Practices initiative. I hope this three-part series already gave you an idea for your upcoming projects and here is some feedback I already got on the first two parts.

In case you missed the other two parts check out:

Stay tuned!!!