Microsoft 365 Community SharePoint, 14 Apr 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building no-code solutions by connecting web parts based on list data

Description

In this 13-minute demo delivered by Chris Kent, viewers learn how to create a connected contextual doc library page (mini application) by integrating 1st and 3rd party web parts and by using scripts from the sample’s library to format views. Web parts optimized for doc preview, video rendering and form viewer are added to page and all are connected to the List (source) which contains content titles, descriptions, links to videos, surveys, etc. Chris spruces up list items displayed - content title and thumbnail. End result is a nice index of topics delivering a rich on-screen experience, without having to build or buy an app. This demo is extracted from the bi-weekly Microsoft 365 PnP community – General M365 Developer Special Interest Group (SIG) call recorded April 2, 2020.

Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Video - Web parts working together | http://bit.ly/lf-videobutton
• Formatting Documentation | aka.ms/spdocs-column-formatting
• Generic Video button view sample | https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/generic-video-button
• Document Navigator view sample | https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/document-navigator (coming soon)

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/m365pnp

A

Hey everybody I'm Chris: let's talk about some cool stuff. You can do all right. So if we go over to our classic warrior horses side here, all right, so our horses, they care about training, they care about the proper use of equipment. Of course, as we all do, and so they try to make all the manuals that they get for their equipment available. All right, so they've created this manuals document library and it's all right right. It's got the document here which you can see.

A

You know how to read: it they've even provided a few little details, and then we've got these other pieces here which I'm going to get back to which are some resources. They want you to kind of take a look at when you're looking at these things- and this is okay, but it becomes a lot more powerful. We start using something like this with the document library webpart on a modern page. Now we did something similar.

A

What I'm gonna show back in Thanksgiving, so November 28th in this past year, 2019 we've got a whole video on that I know how to do this with the list. We're gonna take a little further today and show you how to do with the document library, so I'll reference that video a little later, if you guys want to follow along for there, but for now let's go and create a new page go going home to death here.

A

We're gonna create a new page where we're gonna hold all of our exciting manuals and give this a little more context right. So it's great page 1 call this thing equipment that sounds exciting. Alright, if we edit that we'll know a little tools, destruction I, really like this little fancy. Here there we go. Okay, that sounds good and then let's change that image back there right, let's add an image: let's do any cool recent ones. Now we'll do a search, real, quick, it'll, say or equipment. That sounds good. What could be bad with that?

A

I was gonna, do live, being searches, there's one right so we'll grab this a nice horse equipment background the draw Creative, Commons I will change the focus beautiful stuff here. So now we've got a nice thing here, we'll move my name, but now, let's start working with this page right. So the first thing I want to do is we're gonna, kill that guy and let's make this into a two columns and we're gonna.

A

Add a nice document like a web part here, so we'll just type that in vacuum library and we're gonna grab our manuals list and now those that lovely same thing we saw before shows up here. So that's great I'm gonna hide that command bar cuz, that's annoying to me! Well, I will get rid of that one of the things we showed you is the way you can connect these to other web parts very kind of miniature applications here.

A

So in this case we're going to take advantage of one called the list properties we're in at the connect button over here. This is three little dots when I click that I want to connect the source. In this case, I'm gonna pick manuals alright and now I can start to see other stuff. Here now, I've got a little bit of delay and how that's showing up, but if we pick one say laser eyeballs there was all our details right.

A

Well, maybe we don't want to show everything all right, so we're gonna go back in here and we're gonna say you don't know if this one, let's just show the details, all right. We also notice there's something here, though, like the title coming from the actual document is a little more descriptive we'd want that instead, so let's come back and take a look at what we can do to make that even easier. So let's go ahead and save that again. The list takes a little bit to update.

A

Sometimes, let's once a show, there's just details all right. We gonna add another web part here, my where's my little web part selector there. It is, and this one we're gonna do the file viewer, we're gonna, build something here and then we're gonna format it so for the file viewer, we're not gonna, actually pick a document right. You could pick a standard document, one on that page or even better.

A

You can do that same kind of connection here, so we're gonna connect a source again, we're gonna pick manuals, and so the idea is whenever we select something over here in our document library, we're going to actually show that file directly on the page and then provide the details about it. So that's pretty cool right. So that's all right, but now we can go even further and add something else here. So let's add ourselves a new section, all right, so there you go section here, another couple, columns section and just for distinction.

A

We're gonna go to my section background who's, so pretty in this case we're gonna, add an embed all right now with embeds. We've shown this before you can actually so if you're gonna want to bed from YouTube or something you could set this up, and you then put special kind of characters in here right in this embed box, and that's pretty awesome in this case.

A

We're gonna do that as well, but instead of just a portion of the piece we're gonna grab our source manuals and you'll notice here in the list to go back to our list. We have these in bed 1 and in bed too, and we've got just the full-on iframe code. I'm withdrawal we did was we went to like you to we said, share and grab that it that embed code- and we just pasted it right in there.

A

So in this case we can reference that the same way we reference columns in our view, when we're trying to view or list formatting with this square bracket, dollar sign and then the name of our internal column right. So in this case we're saying bed 1 will leave that it's gonna go ahead and grab that YouTube video that we've got there and we gonna have another one here and grab another embed. In this case we can we're gonna connect it to manuals, doing quite a few connections here very exciting.

A

What I do in dollar sign in bed, two you'll notice that I started be a prompt for some of those if you're not familiar with your internal names, but that works so now, I've got another link. This one actress happens to be from Vimeo, because we've got that full iframe in there. We can have all sorts of different sources here. So that's cool right. So now, if we publish this guy, we'll take a look at it. We've got a little miniature application. It's it's! Alright!

A

Alright, we can come in here we can can choose like laser eyeballs right. We're gonna get that nice PowerPoint view here in just a minute, we'll come down here. We actually have a sway. That's embedded right. We've got a power app, that's embedded, that's cool! We come down the area to reptile tanks, something similar, I see the word document. We can read it here on the page. We can actually take a form right and embed that here and then we've got something from a TED talk, alright, so we're providing a lot more context.

A

This is pretty neat. If someone actually wants to edit that- and you know that document they can- and that actually brings us to another kind of issue here. We've got this really nice page, but then we have this incredibly ugly. Look at web part right. It's a Excel spreadsheet here with all the section information, because we need this information as part of our view in order to have that. As for these connections right, but what if we wanted to? You know clean that up a little bit. Well, we're gonna, that's exciting!

A

The other thing is people often times. Instead of hitting this little selection button, they're gonna sit here. They're gonna click that it's gonna open up a word and they're gonna lose all that context and everything we're trying to get to do, which is use this thing as a kind of connected contextual page. So horses are pretty smart, so they come back to their list and they remember we can do all that formatting stuff, so we're gonna form out our current view and I'm going to start with something that was very similar to a sample.

A

It already exists and hit advanced mode, so I can edit the JSON directly. We have this generic video button sample, which is what I talked about where we made kind of a quick video browser for YouTube and again that is a video we did previously. You can check that out, but I'm gonna start with that sample code. I'm gonna go ahead and copy that, where I've only edited one little thing, which is where I've set that text content instead of title so to file leaf ref right.

A

So that's how we reference this file name, which is okay but you'll, see you know, I got these manuals directly from the site and it's got this horrible name right. It's got the version. It's got a Dayton. Nobody really wants to select from that all right. We've got a little icon and that's okay, that's not quite what we want to do. So, let's change this up a little bit. So the first thing we're gonna do is we're gonna get rid of that icon so see.

A

If I can zoom this a little bit, make it a little easier to see. Okay whoa there we go so instead of a span with the icon. We're gonna make this an image all right. Instead, an icon named now we're gonna have a source right. We're going to provide that now. We've got this nice little app thumbnail.

A

We get here and we can say our size, we're gonna, say small and when I do that, you'll notice now I'm getting that that gets rendered automatically that's pretty right and if I wanted to control, you see I've got a little bit of the size in here. We're gonna skip that for now, but if you wanted to kind of constraint all that you've got all that power to do that as well doing Thal. That line up for this, though finally press.

A

Ok, as we mentioned some of these documents right, we actually set the title property in office and that transferred over to our SharePoint list, we'd like to reference that right. So you would think we could just say title preview that, and you cannot so unlike list you can't reference title at all times with doing formatting in document libraries. They actually have to be part of the view. So let's go ahead and let's copy this, so I don't lose it on with a cancel.

A

For now this we can go back to our kind of our standard interface. Here. One of the strange things is: if I go into my show/hide columns. You'll see title is not an option for me here. So what I'm gonna do is I'm gonna go back to our old school I'm gonna edit. The current view and we'll give the second and I come down here and now. I can check title. My second ad, that's the view. That's all I need to change. I'm hit. Ok, now titles are part of the view.

A

So now I can reference in my format. So if I go back in I'm, gonna go documents, format current view you got me advanced, so I go that Jason I'm gonna paste. What we've done before I preview that now now I could say: I've got title, but now I've got a problem. Not every document has a title all right. So now we're gonna write just a really quick. If statement. So, let's take this, get rid of that guy, but actually leave it in here. We're gonna, say equals or say.

A

If the length remember this isn't the actual length of title. It's gonna be one if it has any content and it's gonna be 0. If it's blank in this case, I'm gonna, say if length title, then let's use the title alright, but if not, let's use that file deep breath. Alright, so at least we can see something. Those are parentheses here. Maybe that and that's okay. Alright, that's a significantly better, but now we just still got this dot. Docx like that's important to anyone. That's trying to browse a little portal here, so we're gonna.

A

Do a quick substring on this, our file leaf ratha. What a substring does right! It looks. It gets just the character starting at zero, so we're going to start at the very beginning and we want to go up to, and in this case we actually want to find that period right so we're gonna, say index of and now we're gonna actually look inside again the file leaf, wrap and when I look inside it I'm gonna be looking for a period. That's all I.

A

Do there know if I preview, that that's just gonna strip, that off now we've got ourselves a nice little navigational piece, so I'm gonna save that, and now we go back to our exciting new page here, equipment all right. So so now zoom didn't quite a bit. Let's zoom back out. Okay and let's refresh this, and we should see because we applied that to our bezel view. Now, we've got ourselves a much easier way to view this right. So now, when we go here, we can, you know, click our strapless grenade launchers.

A

We can read the document right here. We can elect them, even open it if they still want to I, want to read a full screen, but they have all the contexts with the specific videos or other embeds we wanted them to have. We've got additional details, we're providing to the list properties that we don't want to always show, because we've got a lot of documents here. We want to show when they click on it right. So now you can start to see.

A

There's real power here: I've created a single page, but by using a list and Thrones are formatted on there, so it doesn't look like an excel sheet. I've now created a miniature application in just a few minutes, and I can go a lot further with this, depending on what I want to do. Right, I can create this one. Nice thing I've I've often done is because the document library web part you can specify specific folders.

A

You can create whole pages that are dedicated to the same document library, but I have different folders but are using the same view. You can have multiple views here, really really cool stuff. Okay, alright, so take advantage of that, let's go back and review real quick, so the whole idea is there are several web parts to support these connections.

A

I couldn't know this property that took that with that file viewer in bed there are more coming, but there's also full support when you make your own using SharePoint framework, we've got several examples of that in our web parts, sample library or you can see how dynamic datas using there.

A

So if you want to embed and grab some of those same types properties and provide your own custom displays to create these kind of applications or let your users write, you deploy small pieces here and let them build complex applications using a combination of first-party webparts and your webparts. You could do all that and you can drive all that using some nice formats on either your list or your library webparts. Alright, so that's about it check out the full documentation.

A

If you check out this, if you go here, that's going to go to that video, where we've done a video portal using the same kind of concepts using a list and then, of course, we've got a couple of samples here. The generic video button and the document Navigator, which is the one I just put together here today, all right. That's what I got thanks. Everybody.