Microsoft 365 Community Community Demos, 21 Apr 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Community Demo - Using Custom Row Actions with Live list updates

Description

This community call demo is taken from the SharePoint General Development Special Interest Group recording on 18th of April 2019. In this video, Chris Kent (DMI) shows how to use Custom Row Actions with Live list updates powered by Microsoft Flow.

Presenter - Chris Kent (DMI) - @thechriskent

Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/sharepoint-dev-community-pnp-general-sp-dev-sig-recording-18th-of-april-2019/

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

A

All right, that's me, let's jump in so we talked about custom bro actions today, so we talked a little about these in the past couple of times specific. There I'm launching flows, but it actually got a lot of questions about these. There's a little bit confusion on how to put these in what they do.

A

Why would you use them and how you doing all that stuff, so we're gonna cover that so the way these work is right now, if I have a list with no formats right, if I click on something I get these buttons up here, I got I can edit the share, and all these nice little buttons.

A

I can also, of course, click on the title, and it opens up the the panel over here and also double click anywhere in the item that it does the same thing right and that's okay, but just like we've done before, where we wanted to take away that need to come in here and do flow and all that stuff and you select. If you want to be able to bring those buttons down here or bring some of those actions directly into your list items. There's.

B

Support for that.

A

So if we come in here, we're gonna call them settings, we haven't format this column and we're gonna do something like looks like the nelem type and we'll make this a button. So this is very important. Customer actions can only be applied to button. You can put them anywhere, but they will not do anything. So if I say, custom row, action- and here this is a guy like this, so we got put in an action inside so we say action in this case. We're just going to do that default click.

A

So we're going to imitate what the title button is doing right and of course we should add- some text comes in.

A

B

Good, that's always a.

A

Helpful thing to do put a comma and we preview that right we get this beautiful button here, I'm going to save that, because we get a little bit of weirdness, sometimes refresh that now, when I hit this Wow, it does the exact same thing that the title very sad take a look. We can go a little further with that right. So maybe you don't want a big gray button on your screen here, which makes total sense to me. So we've got a series of samples now.

A

So if we come over here to our list, formatting repo, alright, we come down here to column samples, you'll see this is brand-new. One called generic row actions and in here there is a format for each one of these different types of actions. So you can use these, and these are just fairly simple versions of this to kind of demonstrate that we're going to apply these, take a look them in action, so you're going to cut and paste those preview that so that's the exact same thing, but you'll notice.

A

It doesn't look like a button anymore, because what we've done in here as we've added children and some styles, so some of the styles admit that weird gradients from 1998 I made that transparent right. We added a child here or we're just adding a nice icon called open paint all right. We can do that for all of these, so it's pretty straightforward! Well, it'll do works when I save it so I'll save that one action exact same things you guys can see.

A

Some of these here have one thing with the Edit action right with paste that you'll notice up here that the action I'm using is edit props after using something like Visual Studio code. You'll, see that when you use edit props see that right there, it actually says that's not right. You failed because the same should be Edit item props. That is a bug in the schema, so ignore that it is edit props.

A

Okay, now the reason it's called Anna props and not just edits, because it's like the same thing for document libraries right when you go and you edit the properties there so we hit edit properties. We save that again simple, icon type thing here over here: let's format this one let's go to share then we'll demonstrate all these. So this one has a custom action of share very exciting over here. We're gonna go to the lead action format that column I'm. Gonna grab this.

A

When you get me getting all of these from the repo, so I'm gonna little fast on purpose, so we've done one here we see action is delete, so let's close these for now right. So now we get this edit action which again opens it all the way in edit mode. This is going to work nicely if you've already customized here and list form with power, Iraq power. Apps, all that's gonna work exactly the same, so you don't do anything different. The shares and open up this nice.

B

Little things I can.

A

Send my link to my hello item, or whatever I've got here alright and delete, is going to prompt them to delete it. Alright, so obviously you can't just straight-up delete it these and prompted for them now. So this is a super helpful right necessarily to put these here since they're already up here. It does prevent us from having to come up here. Select an item didn't choose at it, so there is some helpfulness there. It's even more couple in a view format. However, so you come over here to something like this right. You can see.

A

This is a view. Format we've actually wrapped the entire thing in a button. So if I take a look at that for my farm view, you can actually see the entire affair matter is wrapped in a button. Don't necessarily see that, but by doing that, the entire item is now able to open it up. So you can do that as well. We've got some other formats to show individual buttons kind of linked in there. You can do some conditional showing on those.

A

What you can't do is the condition for the action and, of course, we've seen this one before right will reformat the flow. So let me grab my execute flow, so this one's slightly different, which we've seen and that when we do this, one we'd only have to provide not only the action of execute flow. It provide the ID of the flow associated with this list, but yeah we've covered this a number of times or some samples. Some guidance on that.

A

So I'm not gonna, go into real details on that, but one of the things I wanted to point out. That's pretty cool! Let me refresh just to make sure I got everything here. There's.

B

A

I do something like the butter is turned I. Do my flow action. This flow has already been associated with this list and for selecting items alright, so you come here and I say, run flow and watch what happens to you. It's pretty cool, we'll see, watch this butter is turn. Is it then other than that? So we had a live list update right, so the butter has turned suddenly got an exclamation mark, a very useful flow, all right. So that's what we can do with that emphasize flow, but that's really interesting.

A

The idea that I didn't have to refresh this. So let's take a look at this a little more detail, so this is cool, but what? If? What? If for the horses, we just saw this presentation right.

A

We come over here to our standard warrior horses site and we want to see this in action, maybe in a little more elaborate way, maybe less useful bit more elaborate, so to come into this secret lab where experiments are wrought upon these horses, all right, so we'll zoom that back out, so we got ourselves a nice view format here, all right. The thing is, we could take advantage of, so we've got into an elaborate view: format, let's refresh make sure I got so.

B

We don't lose all my connections, all.

A

Right zoomed out too much reset zoom, perfect. Okay, so we've got my experiment here. Going on I've got these nice buttons over here that I can style any way. I want all right. I can put images inside here. I can make these just buttons like put all sorts of elements, icons. Everything else variety reports just can open up the list.

A

Item pane alters into some kind of edit all right, killing the experiments, not the force itself right will delete it and notify, of course, then provides that share later, but here's something else we can do all right. So when we take advantage that I would say start an or flow here, we can begin the experiments when we run that because one of the cool things here is that we had those live list updates before you'll see that your format actually can respect. Those live list updates themselves all right so, as you think, X cubed.

A

In the background, you can keep your list view up. There's almost a dashboard of things right. So this.

B

A

A little bit of a strange experiment in some of this, but to get the idea that this quickly becomes really powerful. So, as other people are heading things behind the scenes, right or you've got flows, long-running flows or updating things or other things are triggering. You can keep something like this up all the time and keep that going all right and.

B

A

Associate different flows right so I've got a halt experiment, so you get the idea that this was really really powerful and you can do so much more by integrating some of these things with either flow or these life live ListView updates with your view and column format. So alright, let's review real, quick, so custom row action only works in a button element but use those style and children properties. You know fancy in there right. There is some weirdness with the data redraw. Let's just saw that was refreshing.

A

So if you apply this and your format and you've just done the preview and it doesn't seem to work hit the Save button refresh and it should work, there's also some interesting stuff going on. When is list item gets updated, there's an open issue for that and again you only need that action frames if you didn't execute flow- and this is an important one. This is one of the only items and all of this formatting where you can I use an expression and that's in the action property.

A

So if you need to have a different action for your button, you're actually going to need to use our display:none trick and have two different elements for that. So here's those actions again got default. Click Edit, props! You got share, delete and execute flow, very exciting, again ignore the schema. It's a.

A

Live list updates are magical, so take advantage of those the only real sadness right now na and I'm hoping yet work in the listed library webparts. So it's only something: that's live within the ListView itself, so.

B

But take advantage of that I think it's really really powerful. Alright.

A

And last, but not least, here is where you can find those samples they're going to take a look at some of that code. You can go over and see our real actions. We've also got a little more details on those start flows and.

B

Then, if you want to see.

A

Where we've integrated it inside a larger view, you see the contact part format or we wrapped the entire view in an action, if you can see in the bulletin board format. Alright, that's it! For this week's side, it was for many tips.

B

Awesome or some thank you, Chris really really pretty great stuff, and it has to be something in the air or water in Indiana related on the demo content like my winter, but yeah really cool stuff, and these are great samples and, like said the github repo has all of the samples available for anybody and I know that Chris has done a good job on clarifying.

B

If there's a list dependency, it is defining what kind of list has to exist and what are the columns and all of that fatherless, but I think that's it from this one.