Microsoft 365 Community SharePoint, 8 Oct 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building a list editing web part with React

Description

In this 10-minute Developer - focused demo, Ryan Schouten shares a List Form web part that allows users to easily add a list form to any page. Configure the form by pointing to an existing list and the web part generates the list form using fields from the list. Form fields can be added, ordered or removed visually in the web part. The web part uses SPFx and React and Office UI Fabric libraries. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on October 8, 2020.

Demo Presenter: Ryan Schouten | @ShrPntKnight

Supporting materials:
• Repo - React List Form Web Part | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-list-form

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

My name is ryan scouten. I've been involved with the pmp community for a few years. Changed jobs had to take a hiatus from meetings just due to being in the middle of my commute.

A

One of the things I can definitely say, I'm thankful for about the coronavirus, is lack of commute, so I actually get to be involved in some of these things now so um and also because that has allowed me to kind of devote some more time to contributing with the community. So looking at us looking at some of the poll requests well, the issues I said hey, how can I help out and one of the things that came up was the react list form web part sample.

A

It's kind of it's been around as we can see on here. It's been a sample for almost three years now, uh there's a couple issues that were listed so I started working on fixing it and talking with hugo- and I figured hey, this is kind of an older one, so it'd be good to kind of remind people that this thing still exists. So what is this?

A

The react list form web part is a react-based web part that allows you to be able to point it at a list and it'll generate the list form now that could be an edit form, a display form or a new form, and it's just a regular web part. So, as we can see here from the information page for this sample, it has a animated gif with the different pieces that it's got and the functionality uh we can look at it there's a lot of different things.

A

Some of the stuff that I added was some more recently was adding in the ability for user, multi-user, taxonomy and taxonomy multi field types and we'll look at this in a bit and then also working on a issue currently or cascading drop downs in for lookups. So if we look at this web part, we can go in. I'm going to add this guy to the site and scroll down. It is just called list form.

A

So when you come in fairly basic, we can click on configure, give it a name and then we need to give it a list to point at so for this first demo I am going to use test list form and then we specify whether we want to be new. We want it to be edit uh in this case I'm going to go with edit just so, we can kind of see what that looks like. So, if I set it to edit by default, it doesn't know which item you need to load.

A

So there's a query string parameter and in this case I'm just using item id equals two. So in the configuration I just need to tell what query string parameter to get the id of the item we want to edit from so like the item id and now it changes over.

A

So there also is the option, because this doesn't quite support all field types yet, but we're working on those as people need them. uh But if you want to, you can also check the unsub show unsupported and before the request I was working on, the user fields and taxonomy fields would not show up until you showed told it to show unsupported. Also, one of the cool things you can do is after you're done doing edit, so whether it's a new or you're doing an update to an existing item. You can redirect them to another page.

A

So, for example, I could redirect them to a details. Page say: hey, thank you for submitting your form and then I can also do pla. There are placeholders that allow you to specify hey here is the id of the item that was either edited or added, so you can actually include that and some other things in your process flow.

A

So the cool part about this is we have the ability to edit these. These are the fields that exist on the list. So, for example, we have here a date picker that includes most of these are using the uh the react controls from also from the community.

A

uh We can clear this out, so we have a people field.

A

Where I can find myself search for it also for taxonomy, we have the ability to go through and select some different locations.

A

And groups: this is just a group based filtering kind of testing through the different scenarios as we're going through it making sure it only returns. People that are in the group that's specified and then we're done. I can go ahead and also add an attachment, and then I can hit save now, since I haven't really configured to go anyplace else, we get just a message that says: item save successfully and then that goes away.

A

One of the things I have realized is there also is the ability to move these controls, so it is drag and droppable, um but as you'll notice, one of the things I was doing my testing yesterday, for whatever reason in the current version, it doesn't work. Also with the there are some icons over here. The top one is to move the field, and this one is to remove it say you don't want to show a specific field, you'll also notice. The remove button does actually work, but the icons are not working.

A

So, as you can see there, these are just community samples, so there are things that are beneficial. That may or may not be working. These particular items, I noticed, don't have a an issue created for them. uh I will probably just go ahead and simply want to work on it, but just kind of you know those type of things are there so for this particular one. If we switch to.

A

Another list: it just changes up the types of emotion, so I do have test cascading, just to kind of show you some of the stuff that's being worked on so in this scenario, working on being able to cascade down from one lookup field to another, because a lot of times we do parent-child relationships.

A

So in this case I've got it set up to test a multi-select. So on this one I have selected projects, one and two, and then our subfields. We have child elements that correspond, so we have project 1.1, 2.1 and then subproject so on and so forth. Now, if I come back up to the main project field, I can come here and uncheck project, this switches down to just project two and also the other. As you can see, the other fields have now changed that we don't have any of the project. One options anymore.

A

Also, if I select down those, are the only ones there if I uncheck everything still working, I work in progress on to make so make sure we get all the fields, but this is the entire list. So if I come in, I can select project one two and three.

A

We can see our values come back plus. We also get to see some of the other options, so it does. It does work with the cascading and making sure everything matches and then carrying on with that. So for the most part, that's a fairly simple project in case anybody wants to work with it. There are a if you're coming in. You want to work with the sample. There are a number of fields.

A

Your main point is going to be with the list form, but if we look at it, there are a bunch of different form fields that help handle the rendering. So we've got attachment fields. We've got boolean choice, date, lookup numbers, rich text, url fields, user fields and remember measure text, I'm not, but all these are fairly basic. uh So if we come into the taxonomy field, for example, we have a control and then it's just using the the sharepoint framework react controls community project to use the taxonomy picker, that's associated with it.

A

So a lot, not a lot of involvement is required to make updates to this. If you want to say hey, I want to there's this field type I want to go in. I want to add to it it's fairly simple to add these in and then there is a mapping file that coordinates the changes to so, if you add, in a new field type it'll map from the actual field type to visuals,.

A

Also, this one does lend itself fairly well for a regular page. I can come in. Add this guy here same experience pick the list.

A

And we'll just say new in the scenario, so I can win this demo item.

A

Oh, let's just go ahead and save this just in case something's in funky state, okay, project, three does not wow. All right obviously identified a bug here, so we'll just switch it back to edit. Then nothing like uh live coding demos.

A

So we can save this guy and we're ready to roll, and so I can add in an attachment and change things up. So, as you see, a lot of the involvement with the community projects are not super involved. There's some basic, adding in some functionality saying hey. I know how to work with this type of data. Let me kind of contribute and add those in and that's what I got. Thank you everybody for watching fantastic. Thank you for that demo.