Microsoft 365 Community Community Demos, 11 Apr 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Community demo - React Comparer web part sample with a reusable custom file picker control

Description

This community call demo is taken from the SharePoint Framework community call recording on 11th of April 2019. In this video, Hugo Bernier demonstrates a React based client-side web part which has been built using React and which contains an example reusable file picker control.

Presenter - Hugo Bernier - @bernierh

The code sample is available from https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-comparer

Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/sharepoint-framework-community-call-recording-11th-of-april-2019/

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

A

My name is Hugo brainy and today, hopefully I will be demoing. My react. Compare web part with the file picker I'm a really friendly guy. So if you have any questions or comments or concerns, do not hesitate to contact me. My Twitter account is: is here it's Bernie age and my blog is that wooden jizz blog, so I was just working on a control that I needed I needed a control to be able to compare two images side-by-side and I'm the world's laziest developer, so I I.

A

If I can avoid writing code, I will avoid I will look for things that I can reuse things that are available out of the box and I I can find anything that I needed so I actually looked at the react office fabric UI, which had a control that allows you to compare things side by side and they use this in their fluent site.

A

You know, office fabric is going to become Microsoft UI fabric and eventually they're, going to integrate the fluent style in their components, which will make the experience of web applications look very, very close to or more in line with, the desktop applications and what I needed was a control that I could use to compare things side by side. Just like you can do here. Hopefully you can see I'm moving the slider here and I can see the before and after look and I was I was looking everywhere.

A

It confined control, so I said you know what I'll just build my own control and as I was building the control. I thought you know what it would be really great if I could actually have a button on each side that would allow users to select a file from from the SharePoint file picker. So I looked everywhere again for an out-of-box sharepoint file. Picker I didn't find anything. It looked in the property controls the the PNP, reasonable controls didn't find. Anything I was just wrapping up the doing the rich text.

A

Control for the PNP, reusable control, I have a demo of it. Here and maybe that's something, I can demo at another time, but I decided. You know what I'm gonna write my own file picker, so I looked at the file picker that's available in SharePoint.

A

This is the image web part that's available out of the box in SharePoint and when you select an image, what it actually does, is it pops up this dialog that, hopefully, all of you have seen before, which shows are your recent files allows you to search, allows you to pick files from a onedrive files from your site, allows you to upload files and share from a link, so I decided, you know, I'm gonna, create this control and the goal was to create a control that would be easy to add to anyone's application.

A

That would that would not require special permissions or anything like that and I wanted the control to look as much as possible, exactly like the file picker control. So this is this. Is the web part that I created? It's called the compare web part and when you add it, it asks you to add images. If you click on add images and click on choose image, this control here is actually my custom control. So it allows me to look at my recent images. It allows me to search.

A

It allows me to pick documents from onedrive and so on and so forth. So let me actually pick documents just to show so I'll go in my sample pictures here and I'll pick a before image and then I'll go to my other file. Picker and I will pick afterimage.

A

Oops laughter and now what I should have is something that well, it doesn't look very, doesn't seem to be a good example here, but you can see that the idea here is I can pick images and put them side-by-side. So how did I do this?

A

What I did is I actually went through the file picker that was available out of the box, and then I used the the developer tools to actually start exploring what each component was so I clicked on. You know the the navigation and the lift and I actually looked at okay. Well, it's got the classes here, for example, and we just use an example here so I saw here those this, this class called MS nav group and you know, as a general rule.

A

Anything that starts with MS is probably coming from Microsoft, so I actually figured okay. So this is a Microsoft control. Ems nav group I actually went to the office UI fabric repository.

A

If, if you haven't used that it's actually a great source to learn, it's actually github that office, dev and under get office them you have their office, UI fabric react and if, once you're in there, you search for ms, what did I say. Ms nav group, so MS nav group you find yep best class is actually used somewhere in the code, and so it simple to actually find the controls that were used by going kind of one one component. At a time.

A

For example, I went to this here, I found that this is using something called an item file, so I looked found, I compiled it turns out by the way that in the office UI fabric icon tile, you have kind of a something called an item pile on a tile list. Those are controls that are in office UI fabric, unfortunately they're still in the experiments package.

A

So it's not quite supported yet you're, not quite supposed to use it in production, so I had to actually rewrite my version of those controls when I did that, but I basically I went through one control of the time and copied the styles. The look and the feel and rebuild this whole thing, the other thing that I did and Jenny had a question in the in the in the chat window. Here, how do what's an example of getting the most recently used files?

A

Well, if you look at the recent tab in the the file, picker you'll actually find that this is what it's doing. It's actually going to your in this case, the most recently used images. But if you look at your network in your developer tools- and you actually monitor the traffic you'll notice that as you click, you will actually see different calls being made now, there's tons of calls being made.

A

You know to who I know some. It's probably some telemetrics or things like that. But eventually you will find and I'm not going to be able to define it in this presentation today. But you'll find the actual code that gets made when SharePoint does the search for a recent or a web search or something about. So what I did is, if I open the code, because that's probably what you guys are here for as I went and I actually captured, that network traffic and then I went and I created services.

A

So if I go here on earth services, I have a one drive service, one drive service and I actually recreated the call to be able to to retrieve the information. So this is, you know it almost feels. Hard-Coded I feel bad about this, but this is the actual all that gets made by by the dialog and I just reproduce that you'll notice here that I'm actually using in the case of going to my onedrive I'm using sp remote web to allow me to make HTTP calls to another URL.

A

In this case my onedrive, that's something that I was not able to do using the PNP j/s package. I actually opened an issue with that to be able to add support for a remote web calls. So I had to actually hard code. The Blackheart code, but I had to create the the fetch call of myself without using PN PGs.

A

But if you look quickly and I'm trying I'm really trying hard not to click around too much, because I know it can get really hard to read. But if you look in my web part component, I have now a new property control, called property pane file, picker, and it allows me to you know to do things.

A

For example, what type of images am I going to be expecting when I built this control I built it to support both images and documents, but I only tested it for images that was my primary goal and I have the ability to control whether I want to be able to do things like searching and things like that behind the scene, the control is implemented as a bunch of tabs.

A

The one thing I want to make clear when I build this you'll notice, the unbox picker has a few inconsistencies, it's it seems like, and it's probably a and company can probably tell me whether that's the case or not, but it really feels like each tab was built by a different team and, as a result, there's minor discrepancies in the HTML behind scene.

A

For example, if you look at the site, you have document libraries, you don't have a way to change of views, but if you look at the onedrive, you have the ability to change views and you have a file count inside the folders as tempting as it was for me to try to fix those discrepancies.

A

When I, when I wrote, this component I made sure to reproduce as much as possible the components exactly as they were, with the inconsistencies with the you know, the little things that were kind of driving me nuts, because I wanted everything to be perfect and that's something when you're looking at the code and you're. Looking at this and you're saying well, why didn't you go optimize this by reusing this component or by reusing this class?

A

That's why I did it this way and I've always been taught that you know optimization is enemy event, the enemy of innovation, so my first focus was to make sure that I got this out there there's going to be opportunities to improve this, hopefully, as we go further so for engine e, for example, and Jenny wanted to know how do I get the recent files tab.

A

This is actually the call that gets made. I think that's the one recent files. Yet this is the call that gets me by by a sharepoint which I converted to use p.m. PJs. You do a search based on last modified time and whatever the results that I receive, I actually display that in a in a file picker time, it's like I'm just being concerned about time here.

A

One thing that I wanted to point out and I actually wrote this in the instructions to install this web part is the the search component, the web search component, if I actually go, show it to you for a second the web search for hold on it, allows you to search just like the out-of-the-box component does.

A

This is actually using the Bing API and the Bing API needs an API key. So what I did is I actually configured the this tab? First of all, so that you can disable it, but also that you can, you can go to the SPO storage entity set to set an API key at the tenant level, and if you do that, once for your entire tenant, your entire tenant can use the shared API key. If you have any questions about how to do this, you can give me a shout on Twitter and I'll.

A

Be able to show you that so as a result, I built this component again it's inside of a web part, but then what I did is I actually submitted a request or not a request, an issued to the speed, dev effects, property controls. Saying hey anybody interested in this. It seems like a guy a lot of comments. A lot of people are interested so now that my rich text control is is out, I will be converting the code from this Web part to the reusable control.

A

That's all I have for you today. If you have any questions, please don't hesitate to reach out to me. I have written here the URL to the web break and a blog post. That explains the process. I went through and I'm sure I can count on David. Well there he is David Warner to actually have the links there. Thanks.

B

Everyone thanks Hugo, so, first of all, you're absolutely correct. The individual tabs are being built by a different persons, which is a pity, but it is what it is right now. One thing what we are also looking into potentially do internally, which might still take a while, is to get the whole system as a reusable component which which, by the way, makes sense. But until that will happen and I can't confirm, will it happen at all?

B

Having your tooling available will make a lot of sense, so really good stuff, really really great implementation and, and it's kind of how would I put it. It's always slightly scary, when we do reverse engineering, but I would say Hugo. Thank you for doing this, because this will help to justify also making the first party components potentially at some point open-source or available right. So, even though that would happen at some point, it's definitely not worth of worth of investments and the work.

B

What you've done so super super useful and also the api's which were using and which are using behind the scenes we need to get them documented, so absolutely make sense. But thank you huger. Thank you, awesome, stuff, absolutely also stuff.