Microsoft 365 Community SharePoint, 3 Aug 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building no-code poll application with list formatting

Description

📺 In this 17 minute demo, Chris shows how to build a no-code poll app with SharePoint list formatting. He starts with a new site and applying a template and gets two lists in place. He continues with a comprehensive side-by-side view of UX and code for inlineEditField and customRowAction:setValue. He finishes by setting up a Power Automate flow that onboards new team members easily.

This demo is taken from the Microsoft 365 & Power Platform community call 3rd of August 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Presenter
Chris Kent (Takeda) | @TheChrisKent

📖 Supporting materials
• List formatting on GitHub: https://github.com/pnp/List-Formatting

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

Sharing is caring! You are awesome! 🧡

A

A

Let's talk about things all right, so we're gonna head over to our site and uh the warrior horses. You know that they've been working on a lot of interesting things lately and they want to start a whole new team site. You know so they can spin up a quick team site and get some things going on. So we're just going to create a new team site here, teamside right there and we're gonna just call this uh I, don't know uh surveys and stuff that sounds great surveys and stuff.

A

What a beautiful name we're gonna create that that's going to go and create our office 65 group we're not going to add anybody to it. Just yet we're just gonna finish here: to get our new site and we're gonna. Let that bring it in here and it's going to prompt us for some site templates and all sorts of stuff and uh we'll probably pick one just to make it look a little prettier than that. So we'll! Let it finish up here. We hit browse templates. Of course we can always have our own templates.

A

So if you've done some of that, you know you got some from your organization over here. You've got like a special template, but for this case we'll just do uh the onboarding theme. That sounds really great.

A

The idea here is, you know these templates, give you all sorts of fun things like some lists, starter lists, sometimes formats or web Parts already configured. uh It can be a great way to do it and again, if you want to get your own, uh that is an awesome way uh to help people set up their sites really quickly and get a few assets. They need uh right off the bat all right. So here we go now.

A

We've got ourselves a lovely site now I've gone ahead and created a couple of lists on some other sites which I'm just going to copy onto here. So we can take a look at them and then we'll jump into what the formats are actually doing. So, let's go ahead and create a list and we're going to say a list from an existing list.

A

There we go that way. I can pick one that I've already created and I happen to create that on the old. uh What was it called pull test as you do so we're going to create a poll list poll sounds great, we'll just create that, and let that go here and we'll take a look at what's in here and we'll create a test entry and we'll add our other list. So by default, we've got a configuration view we're going to switch over to our standard view, so see our poll all right.

A

So all we're trying to do is just ask some people some basic questions right. This is a configurable poll is the idea. So, let's add one here, so you can see. We just have this idea of a title. So we'll call this our weekly poll that sounds exciting all right and our question is uh what no sorry I've got. My Alexa alerts going off here, all right. So what is a best way for murder?

A

And that sounds great all right so option one would be, you know, grenades uh an option, two we'll just call that uh I don't know tanks. That sounds great. That's good enough! For now the idea is we just wanted to create one here, so we can have an entry and then we can have this idea of this configuration view right. So this is only ever going to have one item in it all right. So, as a result, we've removed the new button up here.

A

This is where we want to provide a kind of on the rails, editing experience for the end user right, so you can conquer to a PowerApp form or you can work without list form, but you may want to consider actually using view formatting to create a very uh like I said on the rails. Editing experience so right here. We've got this idea that I can add an option right, so I didn't like grenades and tanks.

A

I want to add on here: I can just edit it and we'll call it elephants, that's great all right, so we can save that this idea. We can move things around all right. We can move them up and down. We can remove options, we don't want- and we can also pick our colors here. So we've got a Color Picker all right, so we want to use this beautiful red here, maybe over here in their grenades. We want to use.

A

You know what our think color still we'll use this darker blue and then we'll just grab one more just for fun, we'll do a lovely yellow for the elephants, okay, but the idea here is I can create again this editing experience. They can edit everything right here. It's more of a! What you see is what you get all right: it's not that form I could show only the options when they make sense right.

A

So if we don't want options, elephants anymore, we just remove it and so on we'll come back and take a look at how we did some of that. But for now let's add a whole other list, because having just a pole doesn't do a whole lot for us. So what we're going to do is we're going to create a new list here again from existing lists off my other site. Now. All of this is a sample.

A

So all the formats and lists and everything are available to you on our sample site I'll show the link to that.

A

In the end, let's grab the pull responses here and because it's going to add that silly space for me I'm going to go ahead and create so URLs that messed up here and then I'll add that space back in right here so we'll just add a space back in we gotta love that oh Bonk, there we go there, we go, got a lovely pull responses and by default we're on the my response: viewable, let's just go to the all items View- and this was pretty straightforward as well.

A

um At least it feels that way. So this is going to say response from Chris Kent or let's call this the uh unconfigured.

A

This is our unconfigured item. We're not going to put a user we'll put a poll here, and this will make sense in a moment they just here. If we save that now we have this idea of a view that is put on here and this view has it's my response, so it could show either where the user is yourself or it's empty right now we don't have anything for for ourselves.

A

So what we're doing is we're automatically showing a message here about the pole not being configured that'll, look a little better if we add that to a page. So let's do that. So, let's come over here to our page here uh as page right there and let's uh well. The first thing to do is who's this lady.

A

We don't need this lady, that's not a horse all right, so this is not important to the demo, but uh makes me feel better all right, so we're just going to grab uh or I could have just save change. That image couldn't ask, but that's all right, we'll just do an image here.

A

We're gonna upload one from our machine, we'll hope that we're in a good folder here all right, we're in a good folder all right, we'll do the scary horse pull and we'll give that just a moment here, perfect I'm, going to add that image much better. Now we're now we're now we're looking like a little horse site here, but maybe say up here in this section.

A

um We want to edit this section I'm going to just remove the uh the section background, because that does not play well with the list web parts, then I'm gonna add a list and the list I'm going to add my poll responses.

A

This is where I get that my response, I'm going to take away the command bar and the see all button I'm just going to change this to poll there we go and now, if I apply that the idea here is, you know, I haven't gotten an intro yet so now I just see this poll is not yet configured, but let's go over here and configure that, oh, not that guy. Let's click on the uh oh, let's republish this, so we can play with that. A little bit yes, I'm ready. Do it perfect all right?

A

So let's go back to our uh pull responses, let's open that in a new tab. So we can refresh this one and let's create an entry for myself and I'll. Show you how we're gonna do that automatically for everybody else, all right! So, let's go over here. Let's create our initial one here and in this case we're going to say responses from Chris Kent.

A

There you go and that's me whoa there we go and we'll pick our poll again. So it's gonna be the same one for our case here, but now that I have a response right, there's not actually anything responding. But if we go back here and refresh this page there we go, we should see. Do we no longer have our message up here about it not being configured now we actually have a way to fill this out right. What is the best way for murdering? Well, that's definitely elephants right.

A

So we pick elephants that goes and updates our response right and is recorded that we're elephants and if we go and change that later, uh we could have new polls, and this will automatically update with that and we'll be getting a chance to respond again so pretty pretty exciting and then we'll take a look at one more Factor here, and that is the idea of how we're doing this with the formats right and why we're doing this and and so on and so forth, all right. So, let's take a look at that configuration one.

A

First, I just want to point out a few things again, it'll be easier. If you go through the format yourself, that is, it is kind of big. Let's make this a little bigger. Shall we well I'm not sure why I decided dark mode all of a sudden, but that's exciting, all right there we go so a couple things I just wanted to point out in this format uh is that we are doing a lot of in-line editing right. So that's this idea of when you click on this right. Sharepoint just takes care of it.

A

For me, I, can you know what's the best way for murdering and I can add a g if I decide, that's the better way to say that all right, let's press, enter and that's done pretty easy. All we really need to do is we're going to say our down here, like Connor question right here we just say inline edit field, and we specify that field and it's automatic for us. It just understands that when you hover over that element, you click on it go ahead and provide the standard, editing interface.

A

So that's awesome, but we're also doing some pretty fancy stuff here where we're moving options around and so on. Now we're not actually reordering these we're actually re-saving these values in option. One option to option three uh underlying things there and the way we're doing that is if we scroll way down here, we start to see uh some of these fun things. So this is our Color Picker.

A

Now, let's take a look at the Color Picker, actually I'm, going to skip the Color Picker, because I want to show you the other thing and then we'll come back to our Color Picker. Where is my all right here? We go, but the idea is someone talking nope just having fun there. Okay, but you can see right here. We start to do set value. The nice thing about set value is we can specify multiple columns at once to update right. So we can also do pretty fancy logic here.

A

We can just specify a column if we want to do that or a value like this or a full-on expression which allows us to really again provide a very on the rails experience for the end user. We know when we can delete. We know we can move things up and down and when we want to add options right. So if we actually delete elephants, for instance, we get this add an option all right. We can add that right back in you know we'll say uh ferrets perfect.

A

Okay, so that's part of that now, let's take a look at that Color Picker. We just glossed over briefly, so that's this guy right here and the thing to note with this is I've not created an element for each one of these. That would take forever and this format would be you know, I, don't know 3000 lines long. We don't want to do that so instead, what I've done is a trick here.

A

We've seen before I've created just one element per color and I've split them across a four each, so I'm saying four: each split it with each one of these colors that I want to do and then with those I can just use this color iterator is a magic value where I can actually use those in my set, my set value so set the color two to that color, iterator and so on, as they pick them and I can also tell when they've picked them so check that out, but that's a great way to uh to add some nice functionality again kind of that on the rails.

A

Exactly what you want all right. Let's move on look at a couple other things here. So, let's head over to our pull responses list and take a look at that format. A couple things we want to point out here on this one is again this view is filtered using the special me command. If you haven't seen that before, when you filter your view, you can say where a person field equals me in this little square bracket.

A

So it's going to automatically be dynamic, which is cool all right, but if we format that current view, one of the things we want to note is again we're hiding that new button up here. But then we get down here, we're using What's called the row index. So the row index is the order in which your rows were drawn or rendered to the screen and they're always going to start at zero, and so one of the things we're doing here is we're saying anything over the first one. Just don't show it right.

A

So if you get more than one result here, we're just actually hiding the element right. So it's actually turning two elements here, because we always have that empty unconfigured and what we're doing is, if you're, the first element right here, unconfigured right, so we've got this here, we're going to show it and we say our row index yeah I, don't remember where it is. The idea here is: if it's.

A

If the row index is zero on this one, we're going to show it and if it's not, then we're going to hide it and that again allows us to have that idea of providing a default item on the item. We're looking for when we're looking for a specific item. Does it come up which is pretty cool, pretty exciting? The other thing we're doing um is behind the scenes.

A

Is we want to calculated column and we'll come back to that in a moment, the idea is sometimes you want a calculator column that isn't actually a calculated column or isn't even possible in the normal way of doing a calculated column and we'll take a look at what that looks like here. So when I vote on this, if I vote for grenades, for instance- and then we take a look at those all items, we can see right here. We have this custom field and the reason we're doing this is normally.

A

You cannot take these projected fields or additional fields from a lookup and use those in calculated columns, but because we're doing the set value we can build our own calculated columns this way, and by doing this, I can actually then group on that field and then break it apart. Oh, we don't have any entries here with the match our current piece here, but this creates hey, uh let's edit the current view to make sure we've got the iteration set correctly and you can see that exciting results.

A

View, let's go down here, make sure we got the user column and we want to say that the iteration is greater than or equal to zero. And if you read through the the read me on that, that part a little make sense here, but the idea is my results.

A

So I have a one vote for grenade right, I'm grouping that- and it is this- is a progress bar that will grow as we get more responses and we're doing that by separating that, you know, I'm putting in quotes calculated column out, but do some string manipulation on here. We could have multiple results and we can easily see this and again place this on a page as well, which creates an entire poll application and we're all good to go.

A

The only other piece that's missing is it would be nice that if someone added a team, they automatically got one of those entries, and so we're going to do exactly that, and so what we're going to do is we're just going to go to Power automate and we're just going to try and describe this. So when a horse is added or removed from an office 365.

A

Look up the user's profile and then create create a list item in SharePoint. Let's see if it understands the horse's references here, how smart is to say ah it's smart enough to understand. We mean horse, we mean a user, so here we go and we just hit next and what it's going to do is it's automatically suggesting uh this flow for us and then we're going to go ahead and pick our group. So what do we call that group?

A

We called that surveys and stuff and then our site is, of course, surveys and stuff, and then our list is our poll responses list right there and we'll hit create flow. We're going to let the AI do some magic for us and put it in this very pretty looking interface here, all right. So now we can see that our group is configured right to pull in from surveys and stuff it's going to go ahead and get that user profile for us using the user ID it retrieved.

A

You know from the member that was added and then we're going to go and create this item, and the only thing we need to do is make sure we specify our title and our user and our poll all right. So we hit those and so we're going to say our title is responses from and then we'll just say the display name display name and then our user claims we're just gonna.

A

Do our custom value here and we're going to put in the uh UPN right, the user, principal name and our polladio is always weekly poll and that's it and we save that uh in the interesting I'm not going to test it, but I promise it does work and the idea is it'll automatically create that entry. So when someone gets added to the team, if they go there immediately, they'll see our a wait for a minute.

A

While we configure your poll and then you know within a few minutes, they will have that entry and they can go ahead and start filling out the poll, and so it's all automated and it's a nice little application it quickly. Let's ramp it up, so David can do his final slides here. A couple things here is the wow. So when you're at any things, there's two different options, so inline edit field super easy. It's just going to be. Sharepoint is going to do the magic for you.

A

If you really want some power, the set value is going to let you set one or more values, and you can use those expressions, oh yeah and then finally, I didn't show them. There I actually created a little reset button. So this is a tip.

A

I use a lot when I'm testing, especially a lot of things that require you, know unique use cases I just create a little extra buttons that I hide in my format that just set the app set the input or set the uh the set, the value on a bunch of different columns, so I get the exact input. I want, so that's a great way to kind of debug things and then there's the rest of things covered last thing to say is that sample is available.

A

It is live as about 10 minutes ago the team pull sample interview samples. If you want to check out all those formats and that's all I got whoa foreign.