Microsoft 365 Community SharePoint, 4 May 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Replicating the Quick Links web part for extensibility

Description

In this 11-minute developer-focused demo, Dan Toft shares a way to expose content search almost natively in mobile. In this ACE see implementing the Search API client and exposing the setQuery method, creating an adaptive card with input and search button, creating an adaptive card to present the results (template by João Mendes), and adding navigation events. You can use SharePoint Search API or Graph Search API, use the quickViewNavigator.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on May 4, 2023.

Demo Presenter
• Dan Toft (Evobis ApS) | @tanddant

Supporting materials
• Sample – Quick Links | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-quick-links
• Blog – Dan Toft | https://blog.dan-toft.dk/
• Documentation - Office URI Schemes | https://learn.microsoft.com/office/client-developer/office-uri-schemes

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

A

B

I'm, a Microsoft, 365 consultant and developer based in Denmark I'm, mostly active on Twitter, where you can find me it's over at attendant and feel free to reach out. If you have any questions about this, this demo that we're going to see and there's yeah really just asking anything you feel like.

B

So what is the the quick links web part that I've created? Well it sort of started off based on having a lot of clients who had the feedback that they wanted to. Do they like the quick link thing, but they want a little bit more. So maybe they want to to have a panel open when they click the button instead of redirecting to somewhere else they're, just like they're, 80 happy with it, and then I heard the feedback somewhere in the community as well.

B

I think there was a GitHub issue mentioning wanting to see the open or wanting to see Microsoft open source there quick links web part, because the drag and drop features are pretty cool so like wanting to drag and drop things and actually be able to edit your web part more, like intuitively, for the users and I thought being a Microsoft 365 consultant I, don't actually often like build proper web Parts. I kind of just watch things together so using the property pane is not something that I do all that.

B

Much to be honest, so I wanted to like learn or be better to do that or better at doing that. So I figured why? Why not like try and make a sample where I try to replicate the quick links for park, because it's got the drag and drop? It's got. The Dynamic, Property, Pane and I can add. Like those last things that I feel like it's missing, so uh I figured, we should start off with like a quick demo of it.

B

So if I open up my screen here, ah there we go so essentially what I've created is just a a web part I call this PT quick links here. Let's go ahead and open that move the old one just for for the sake where we have drag and drop like you expect it to be there. We can click a link.

B

It will open up the property, pane you're able to choose things about it, change the icon, using some PNP, reusable controls here, and that actually works pretty well, and one thing that I also really had a like harder time than I would actually expect it to be uh dealing with the switching context, so say: you're in the uh the default like property pane here and you're, switching up some layouts and you want to edit a link getting it to switch over, actually took some time and I'll show like how I did that.

B

But what was probably actually my biggest challenge in building this thing uh was getting this like drag and drop feature to to work. The way I wanted it to now that I'll have something like the smallest Clips later how it went during the process, um but essentially I've traded, like uh I, think 80 of what the tiles quick links were part can do. We have different sizes. We have the ability to only show an icon, you can click, you can add a new link.

B

The one thing that I decided actively not to do was audience targeting, uh just because I didn't feel like dealing with it, so that might be for a later demo or something but yeah. That's essentially the web part using the PNP, reusable control web Port title as well, so really just trying to replicate what Microsoft is doing out of the box. So we can do better or do more with it.

B

One of the things that I had a request for like a while back and just said you can't really do- is something as simple as putting in anything here. That is not a https link, so in this case opening a work document as a template or even linking to OneDrive files. Those are like office Yuri schemes um for those of you that are not familiar.

B

I will go ahead and I'll post a link in the chat for those which is essentially just a way to to like open up word or interact with the desktop clients, but the default quick links. What part will not accept any links that is not https enabled it was essentially just added GPS at the front. The link will break so that's a thing that I really wanted to to like get working and that works nicer. I can publish the site and if I click it, it will ask me to open upward.

B

uh No I am not signed in on the desktop client on this machine, so I will not open it, but it does actually work.

B

So that's actually like the main driving force behind building this webpart and obviously getting the practice yeah. So, let's move on with the slides, so I promised some like demonstrations of the uh the attempts at drag and drop.

B

You can see in the lower like lower part of the screen, uh that's kind of how it went for a little while I think there's a Twitter thread, Somewhere Out There of me getting more and more slowly insane uh trying to get it working took like three or four hours, because I was using a library that did not support what I was trying to do and then I demonstrate on the right how the uh the default, like column view in the SharePoint lists, I realize now there's a lot going on the screen, the default.

B

Like view in SharePoint, the board view doesn't even support this, uh just sorts by whatever column you've set it's a short buy, so you can't actually drag and drop the cards at different, like positions and figuring out how to do that. Actually, it took like quite a while what I ended up doing was.

B

I was looking at the devops because it has a like you can see more in the devil boards, and you can see that they're using some kind of number to position the card, but I couldn't really figure out how they were doing it. So what I did is I thought well. I'm gonna need some kind of variable that I'm sorting by so I called that the sword weight.

B

So essentially what I'm doing with the sort weight is I am saying this is like I'm, gonna, just all sort the items by this. Actually this value and what I did is I, said 0 will be my lowest value and one will be my highest value that way. I can essentially say anytime, I put in a new tile, give it a value that is exactly in between whichever two I am working on.

B

So let's say: I wanted to enter or put input a new link on the left that would get 0.25, because that is like in between 0.5 and 0., and this way the number will essentially always stay between 0 and 1, but it will just get a very large amount of decimals in the end, but it will actually work so adding a new one in between those two would be 0.0375.

B

And that way, whenever I switch them around, I can always just like grab the item just before it, which in this case would like in the middle there would be 0.25 and the other one 0.5 and divide those by two and then, if I move that thing around. So let's say: I move the middle one to the left like this. It's essentially just going to be like. Oh that's, 0.125, because that is in between 0 and 0.25.

B

So, looking at the code that is doing this, it is I mean it looks more complex than it is one of the things that took me. A little bit of time was getting like getting it to work in this area where you don't have enough links. So if you have 10 links and you're dragging it to somewhere, where there's two new links that works awesome, but sometimes you're going to be moving it, where it is now, essentially its own neighbor in the calculation which took a little bit of work.

B

Of course, the sample links will also be provided where you will find like the code. If you need it, I decided not to really share the code on screen in Visual Studio this time. But what is happening is we're taking all the links and we're sorting those by the sort weight. That way we haven't already sorted array, which is what we're also working with in the UI. So I'm just like duplicating the array and then I wrote.

B

This get average function that just make sure that if the previous one is not I'm handling it and giving it the correct one and just looping through and essentially just returning sort of the array yeah there we go and moving on to the other part of the demo, the property pane. The property pane is one of those things that is actually really awesome about working with spfx but, like I, said in the beginning that I don't get to use all that often I tend to just hard code values, but working with it.

B

It's actually really neat how you can build something that is so generic. You can actually hand it out to to multiple people um and they can configure it based on their needs. um So here we're just seeing like the same thing, I sort of went over in the demo that you can change, properties and they'd interact, live with the web part and I guess, uh based on that I I like took a few learnings that I want to keep in mind the next time I'm building something where I'm using the property pane.

B

Those are you can use. You can just arrays in the property like we can call it the property back. um I, don't really know if there's a name for that. So essentially you can just like use square brackets and you can just put a number in there and that actually works accessing yeah accessing the data in the like property back.

B

Let's call it that the property control Json thing or whatever it's called, which is really neat, uh and it I think it's also what the uh there's the PNP control that reusable control that you can use, but it essentially gives you a list. You can use um I. Think that does the same thing.

B

Another thing is: it is actually possible to trigger opening the property pane directly from your light code. Now, having used the PMP or like placeholder control thing for a while, uh obviously I would have known that you could do it, but never never thought to do it in the solution. That was really neat and a nice thing to keep in mind that you can actually make right from your whiteboard trigger that you want to change. And, lastly, something that I always did was returned once from my property get property paying configuration method.

B

What I realized is there's nothing stopping you from returning several times. It's not a static Json object, so you could actually have several scenarios returning different property paintings. You could also use pages in in the one big one you're building, but what I find is, whenever I'm actually building my large property penis, it gets really hard to manage that large Json object so being able to split it out either into several returns or build the Json object first and return.

B

It was actually like kind of a eye-opener, at least for me, not having realized all those things you could actually change yeah and uh that's about it. Thank you so much for coming and seeing the the session I will share my sample Link in the chat as well, and if there are any questions, please uh feel free to to send them in the chat or reach out either later or on Twitter I will be available there as well yeah. Thank you and back to you. Gary.

A

Thank you very much, Dan again fantastic demo, thanks for going in detail as well to show the the Sorting kind of uh iteration, if you like, was worth it in the end, though right it's the process right, uh it's not quite working, it's not quite working and then hey it's worthwhile all this time, absolutely fantastic! Okay! Thank you very much.

A