Microsoft 365 Community SharePoint, 27 Jul 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Build easily forms with the custom JSON Form Builder Web Part

Description

📺 In this 13 minute developer-focused demo, Dan explains how view formatting and data collection can be hard for end users and walks us through a Web Part he built to ease that workload. He shows how conditional logic may apply within it. After that, he walks us through his code and how to utilize react hooks and more. Closes with an outlook on future iterations.

This demo is taken from the Viva Connections & SharePoint Framework Community call recorded on July 27, 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Presenter
Dan Toft (Evobis) | @tanddant

📖 Supporting materials
• Sample - JSON form builder: https://adoption.microsoft.com/en-us/sample-solution-gallery/sample/pnp-sp-dev-spfx-web-parts-react-json-form/

💡 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

My name is Dan: I am a Microsoft gun. 365 consultant based in Denmark um I, come from a deaf background. I do a little bit of Consulting a little bit of Dev work.

A

um I have a block that's over at block.danceoft.dk and I'm active over in that new social media thing called X, where I'm at 10 then feel free to reach out. If you have any questions regarding what you're going to see today, um so I figured that I should start off by covering what is the the problem I'm trying to to resolve with this sample, um so I often run into clients who need a.

A

um They need some kind of form to gather in information that their employees are filling out and the SharePoint list or Microsoft lists. Are it's a great way to do that, but it doesn't doesn't always like build a like full experience, where the form is neatly organized the way they want it. um You can do something with your formatting, especially if you're a Chris Kent. You can definitely do something, um but it's just not as intuitive for the end user to set up these forms.

A

um So I wanted to build a solution where they don't have to worry about how they're going to gather the data they just have to build the form um and then I discussed it with my boss, who said you can't do that that would take months to build, which, um for anyone who knows me, is the best way to get me to to spend three nights working on something doing it. uh So I got to coding um as I was building the solution.

A

uh The micro 365 conference uh went ahead and Microsoft actually announced that they were going to be doing something so I thought I'd bring that in here. Just just for show this isn't my stuff. This is what Microsoft announced, um but I thought it was pretty neat um and it looks a lot more Sleek than the stuff I built, so I figured I would have that in there as well um yeah uh and there's there are blog post somewhere.

A

I could probably tell that in the chat afterwards to the uh the thing that I'm actually said around this thing, um but I figured. We should uh just go right ahead and go into the demo of what it is that I built what it does so I, don't know if you can see the window I just dragged on top there.

A

Yup shows up yeah awesome perfect, uh so this is essentially the like the concept. So we have this form that we can. We can fill that out. um I can go around do stuff here. It will uh show a new field if I said yes to this one, uh that sort of stuff, um if you said a bunch of things it will it's able to like dynamically change the form a little bit um and if I fill out everything here, we can go ahead and do that. I can submit the form right now.

A

There's an alert. Don't worry about that! That's from my debugging earlier that I didn't remove before I published um and it will create a link uh which includes the actual response, which means I can share this link and others are able to like see the same thing like and see the response.

A

um Now that that's pretty cool and not itself but I mean this is just a static form that Isn't that cool. So what I think is really cool about this. If I go in here on a blank SharePoint page, we can go ahead and we can insert the form- and this is where stuff gets cool.

A

um So we choose a document. Library I said list, it's a document Library, uh where we want our responses to be stored for now, uh then we're going to go ahead and we're just going to click here. We can add different types of fields. uh We'll do a few of these. We can make a group which can contain several Fields, so we could do the the classic, like first name and a last name, just version like basic stuff.

A

Here, um then we can go ahead and we can add another field that could be conditional and it could say if your first name is Dan or you want to do something inside of this. So this is a design sort of inspired, but what we know from, like our automated logic gaps where you can see, there's a border around just sort of limiting like what we can see.

A

um So we could do something like this and we can essentially just keep going here uh build out this thing. There's conditional Fields groups, uh there's multi-choice bunch of fields that we know from like SharePoint already.

A

uh We could go like this hit, save uh and publish that, and there we go now we have a form and if I enter my name as then we'll see that that label thing appears because that's conditionally, based on that name, ah we can fill this form out and it works just the same, um and there we go uh now something that I thought was pretty cool about this, that we don't get with Microsoft lists is we can save this URL now uh I'll load that in another tab just so we have it and we can go back in here uh to the like plain form: we can change the form, uh let's go ahead and add another field uh that could just be a number.

A

How old are you um save that?

A

And that's now here, but if we go back to the other thing, so this is the the form that was submitted earlier and refresh that it will still remember what the form looked like at that time. uh So this is done in a way where I actually save like the scheme of the form. As well as your response, so that we can make sure that we can show exactly what was happening when you build out the form initially, um let's take a look at like how the responses are stored.

A

Currently, that is a bit of a hacky way and I'm not not quite happy with it, but it works so I'm, essentially just generating a Json file and I'm dumping that in the document Library um here we can see the scheme map of the fields, which is simply just some like made up schema. That I came up with where each field has an ID. That is essentially like the fields, internal name mapping to do somewhere else.

A

This is a field group that doesn't use anything, but if we take this one, which is the first name, we can see that down here. The response was then, and we can see that there's a lookup field for for that in the conditional field and the match value is done. So this is just really basic, like Json schema structure to to generate the like how this the form should look in the end um and then because I store everything together.

A

That makes me able to display the form exactly as it was at the time um yeah. So, let's close the demo down um and move on to talk about which, like field types, we saw that earlier too and actually Daniel had a similar enum solution. Earlier we saw, uh but essentially I just chose like the fields that made sense to me. You could you could go in and you could add something like lookup Fields I know there are people in the GitHub repository now who's that are looking into adding new user field and lookup fields.

A

um I wanted my first version to be I, don't want to say SharePoint less, but I wanted it to be something that essentially could function outside of SharePoint right now. The only like real connection there is that I use PNP JS to store it into a document Library. You could call any API with that data and storage somewhere else.

A

um Yeah, let's move along and look at some code. um I will go ahead and I will open up a visual studio code over here, so I'm trying to think I'll code sure for the first time so so bear with me. Here um the first thing I wanted to show you is react hooks, which is something I've been playing more and more with and I, really like, um so I build a hook that I called use object.

A

That is like a generic hook and essentially what this allows me to do is when I'm setting the state to see the good old like and if you're, building class components you use Touch state every time you have to do that for an object. You have to do the spread operator first and I'm essentially doing that like packaged away here.

A

So whenever I'm changing something in my state, I can simply say change, and then this is the the field ID or the field value that the value on my object, that I want to change and the new value um do a bit more zoom here, just just in case.

A

um So that's something that I really like about using these react hooks. uh This was one of the first projects where I really like put it to use and like tried forcing myself to do it.

A

um Oh, that's just a little like thing that I thought was pretty neat as I was looking over the code, so the entire rendering of the form when it isn't like build mode, it's less than 100 lines of code when I started working on this project, I was imagining it like I, guess, being several thousand lines of code, uh so I was quite surprised when I looked over it and saw that was 97 lines of code, um so the internal names. Here uh we talked about those earlier that are like mapping.

A

They are a random ID from the property pane of the solution. You can actually edit the whole schema. So you could give those IDs that you want yourself if you needed it for a API you're developing yourself um or if you wanted two Fields it at the same value. You could go ahead and edit on the Json scheme on and you'd be Off to the Races.

A

um The next thing that I've completely in the solutions that I really like is the the context API. uh This is something that I've been using for for a little bit, but I don't see a lot of people using and I thought I'd shout it out just just like how cool this is.

A

So essentially you create a contact like you would create any other react element I'm, creating this at the root and I'm giving it my uh my web part contact and a provider that I'm building um and because, if children is my my form then anywhere in, like the uh the component hierarchy from here on and down, I'll. Be able to use that thing. So I can just go ahead and I can uh that's where that goes.

A

I can go ahead and I can say a react, use contact here um and then I can get the provider and that's available for me and I could do this 50 components down, uh essentially, saving me from that that classic proc drilling we sometimes see in solutions that are based on class components where you're passing a prop like the entire way down just to just to get it available at the root, um especially if you're using the PNP react. Reducible controls a lot of those want.

A

Your your context, which you might not have passed through all your other components.

A

This is an easy way to like share that down um yeah uh and there's the usage of it because I extracted it up here uh and then another thing I wanted to shout out that I, don't use that often and I thought it was pretty cool in this way is the display mode property that is from your um it's available in your like a web Port file, uh you can see which kind of mode the page is in, which is how I do the switching of when you publish the page, it's displayed in one way and when you go ahead and edit it it's displayed in another way.

A

um That's that's about it for what I wanted to call out in the code. uh If there are any questions, I'll be around the chat to answer those as well. um I went back a page um yeah.

A

uh Then I just wanted to round out my my presentation with a few things that I thought might be cool to add uh later, to see this inclusion or, if you feel like it, you can go ahead and do that uh so the first one is I, wanted it to be able to create a SharePoint list and set up the fields instead of doing a Json file somewhere.

A

uh That sounds like the Daniel's solution from earlier might actually be a great way to do that, um because you could provision those like lists really easily I'll look up user Fields uh Michaela over on GitHub said much. You wouldn't look into that I! Don't know if she's gotten around to it yet, um but it would be, it would be pretty neat um to do.

A

uh Another thing is right: now the fields are stuck in the order you put them in there. uh They are you're unable to move them later, uh which is a bit annoying, um but I figured that it would be. It would be a really awesome like to be able to drag and drop those around like you can with, for instance, the quick link web part um and required Fields right now.

A

I don't have any validation, but you've actually filled in the fields you're doing when you're like submitting the form, Ah that's something that would make a lot of sense, so you could could force people to at least fill out some of the fields, um but I also haven't gotten around to that um yeah and then that's about it uh again. My name is santosoft. You can find me over on on X or or elsewhere uh I'm on most of the socials um yeah.

A

Thank you for for listening to what I have to say, uh I'll share some links in the chat uh first, one being that Microsoft, like the blog post about the list, update link to the sample and a link to where you can find these slides after this session is done.

A

uh Yeah! That's about it! Thank you so much for listening to what I have to say, foreign.