 So, thank you very much everybody for joining us today. This is another webinar and a series of webinars from Voitanos. Today, we're going to cover using reusable PNP controls and SharePoint framework projects. Real briefly, my name—oh, a little fast there—real briefly, my name is Andrew Connell. I'm going to be your host for the webinar today, but you didn't come here to listen to me. You came here to listen to our guest. Jump onto our guest in just a moment. I'm the founder of Voitanos, also the person that's building the training class that I've been working on for around mastering the SharePoint framework. I've been an MVP for SharePoint and different products now. I guess now I'm Office Servers and Services going back since 2005, and I also co-host a podcast called the Microsoft Cloud Show. Today we have with us Ilio. So, Ilio, would you mind taking a second to introduce yourself? No problem. Hi, everyone. I'm Ilio Serra from Belgium. I'm also an MVP. I'm part of the Valo Internet team, which is located in Finland and also partly in Canada. And if there are any questions, my contact details are on the slide you're currently seeing. So, that's it. That's me. Awesome. I guess I need to go grab your SharePoint PNP team picture that you have there because now I get to join you as part of the core team now. Okay, so what are we going to cover today? So, like I said, we're going to talk about reusable PNP controls and SharePoint framework projects. This is a couple of projects that Ilio has been behind that are part of PNP that are really, really useful and make things really valuable to us. So, we're going to talk about what these React controls are, talk about the property paying controls are, and I'm just going to step back and I'm going to let Ilio take it from here over the next 30 minutes or so. If you have any questions, please feel free to use the question-answer panel inside of the Zoom client. I'll keep an eye on those for us as well. And with that, though, Ilio, I want to go ahead and turn this over to you. Okay, thank you. It's a bit weird because my Zoom client just switched and I don't see the slides anymore, but no problems at all. So, first of all, I would say that we started the controls, the controls libraries as part of the idea of somebody else, and that somebody else was Olivier Capentier, which is working for Microsoft, and he created, yeah, some parts of the controls. And we got the idea, these are very good controls, and that's something we want to provide or give you as a cave back to the community as part of PMP because they can really help you to reuse things and to get up to speed very quickly. Based on that, we checked the controls, which were popular, and we also created some controls ourselves. So today we have different kind of controls. We have two sets. We have controls for React, which are going to cover in the demos and also in the slides a bit. And we also have controls for property paints. So property paints are the paints where you configure your bad parts or your solutions in. So on this slide, you can see and place all the control, the place all the control that was an ID that was originating from the first version of SharePoint framework. The first version of SharePoint framework had placed all the control, but for some reason it was removed in the future. So we added it back to our React controls. What else have we added? We have an editful web part title field, the same kind of look and feel you can expect from a first party control. That's what we built into our libraries. We also have field extensions. Field extensions allow you to change the look and feel of some fields inside a list rendering. That's also part of our controls library. And then these, the three ones at the left are at the right bottom, the term picker or date picker and our list picker. These are obviously why fabric controls, but with more logic behind the scenes. They have been connected towards SharePoint so that you don't have to create a logic behind these things anymore. So much better than normal Office UI fabric controls. Okay, Andrew, you can go to the next slide. So why would you actually use them? First of all, what I want to say is that many of these controls are coming from the actual first party solutions that Microsoft is building. So if we see something very useful in these first party controls, we try to get the code or check how it works and move it over to the PMP controls so that it gets open sourced and that you can reuse it. It's also, if we built the controls and we share it with community, you don't have to create it yourself anymore. So you don't have to reinvent the wheel in that case. It's also important. It's community-driven, so all IDs, questions and feedback are always welcome. If you want to contribute to it, I will show you the links to these two repositories. All contributions are always welcome. If you see yourself doing some things over and over again, and it might be a good idea to add it to these controls, feel free to do so. It would be of great help. So eventually, if you start using these controls, it gets your project started easily and it speeds up your development process a lot, and that's what I have seen in my projects already. You can go to the next one. So first of all, the React controls library, and the React controls library is the controls that are basically used for rendering in the content body of your web part or your solution. We focused on React. Why? There's a simple reason. Office UI fabric is React-based, so we went for that approach. What happens in the future? We are not sure yet, but now with Angular elements coming, it could be that we also create a new library based on Angular elements controls so that we can use them in Angular projects and we'll see what the future will bring us, but at the moment, we only focus on React controls because we elaborate the use of the Office UI fabric controls. On this slide, you can see the GitHub repository. So all issues can be added over there. Documentation is in line with the Office 365 CLI, so we use the same team, although it's blue and not orange or reddish, but for the rest, it's the same. Documentation also works the same if you want to contribute and you already contributed to the Office 365 CLI project. Everything works the same way, so feel free to do so. Next one. Then besides the normal controls, we have the property pane controls. The property pane controls are the controls you are going to use during the configuration of your solutions. It's not that these controls are being used inside the content zone of your web parts, so basically these are the term pickers, the date pickers, number fields, and so on. So same kind of structure, GitHub repository for these controls. Issues can be pushed there, and documentation just the same. Okay, next one. And then I think we can almost start doing the demos. So just to document how you can start it, because that's something I'm not going to do during the demo. So in order to start, you can install them via the typical NPM commands via NPM install at PMP. Yes, they are under the at PMP branch, and then you can specify which type you want to install SPFX controls react or the SPFX property controls. So that's it. The dash, dash, save, it's not required anymore with notes eight and NPM version six, because everything will automatically be saved for you, but before that, you still have to do that. Okay. So what I prepared is a very simple demo, but I hope that it's a very useful one. So on the right, I left sides, I have my web part on the right side, I have my code section. So the web part isn't actually doing anything at the moment, it's, it's just the PMP controls demo label that it's showing. That's it. So let me first go to the documentation. This is the documentation sites where you can just go to the controls and see which controls that are available. In there, we have a lot of screenshots. Sometimes or these days, we try to push a GIF images so that it's easy to see how the controls actually work in your projects or in the solutions. In there, you will find everything, what you have to include, where to include and so on. So let's start by adding a placeholder. Placeholder is part of the controls from React. So if we are going to check over here, we see placeholder. This is our placeholder control and that's probably the first thing you want to like to add to your web part. So this is a thing you want to use whenever a user wants to configure the web part or wants to add the web part on the page and it's not configured yet. Then it's going to show you a placeholder message so that the user knows, oh, I still have to configure this. These things are also being used inside the first party web part like, for instance, the Office 365 connectors. That's a new web part which is just released. And they also use this kind of placeholder in there, the web part. So my web part consists of two files, the PMP controls web part. That's my main web part file and then my component file, which is a PMP controls.tsx file. This is my React components. In there, right now, you see this diff with the heading one set to PMP controls demo. And this is what I'm going to replace with my syntax once it works. Yeah, now it works. So here is my first code for my placeholder. And I specify two placeholders. The reason is that the first one has a button. The other one doesn't have a button just to show that there are different kind of settings depending on how you're rendering the web part. So if I'm rendering the web part in view mode right now, there's no button. And when I'm going to edit the page, I see a configure button. And now I can click on this. And I see my property pane. My property pane right now is empty. And this is what we are going to fill in in just a couple of seconds. So by just adding displays all the control, configuring a couple of properties, you immediately get this kind of behavior. So the same thing what you can expect from Office UI fabric is what we are offering with the PMP controls. So in order to add some more logic to our web part, we are going over to our PMP controls web part to add some property fields in there. Normally, if you are going to add new property fields inside your property pane, what you are going to do is you're going to add fields inside the group field section, which you can find here in the get property pane configuration site. Let me, my syntax highlighting is not helping me today, for some reason. So normally what we would do is we specify a text field. And in there, we give it a label. And then I specify it correctly. No, I didn't. Oh, that's a lie. My stupid mistake. So this is what we typically do. We only have a small set of these fields. So this is just a text field. This is the default behavior from SharePoint Framework. And on top of that, we added our own kind of behavior. For instance, what we added is highly requested control, the property field list picker. This list picker can be configured to different kind of situations, like for instance, what is the base type of the template of your list you're looking for. Currently, it's configured for only returning document libraries. But if you want to return lists or your own custom lists, that's all possible. You can configure other things. You can specify if it's multi-selection, if it's single selection, and so on. What it's actually going to do, this is just a dropdown, just an Office UI fabric dropdown, which is going to render. So let me render it already, go to configure again. But it has the logic of calling your SharePoint sites and fetching all the document libraries which are in there so that it allows you to select the document library you want to have. So of course, you can build it yourself, but now with this control, you don't have to build that logic behind scenes. So you can just drop it in, configure the things you need to do, and once it's configured, everything is automatically done for you. So you don't have to worry about that anymore. Same goes for a very handy term picker one. The term picker allows you to specify the term you want to use. You can group it by the name of the term groups. You can group it by the name of the term set, and so on and so on. You can do it by ID or by its name. Let me save this one, and let's see what's the actual result of this control. Let's configure. And you see here the term picker. And right now, you only see one group. The reason is because I specified it over here that it only has to show or filter everything on custom and then departments. So then I'm not going to see anything more. I specified that it's only single selection. So if I'm going to select, this is going to single select. I can also click the switch over here. Let it recompile everything and reload. And now I should have a multi-select. So if I store this, if I reopen it, everything is back to multi-selection. And the same goes the other way. If I split the switch again, reload it, then it's now only the single selection. Let's have some other fields for some other logic. What I added more is a number fields. This is a field I'm going to use later on as well for specifying how many items I want to load in my list view. Yes, I'm going to add the list view later. And I also have a property field toggle with callouts. We had some contributions. One of these contributions was a set of elements with callouts so that it can help the end user to see what he actually has to add. Instead of adding just a description, you can add an information button in there so that he can click or hover over it to specify what this field actually should do. So let me show this. If I go to configure, you see the toggle and now you see an information button. And instead of adding the description underneath it, we added the description inside that callout so that it's easier for the end user to see where he can find the information for that field. There are multiple controls in there. I'm not going to show every control. So these are the controls we require for our web art. So now we can go over to our components again. And in our components, we are going to add some other things like for instance, a spinner. Spinner is coming from Office UI Fabric, another placeholder which specifies if no items has been found. And a web art title. This web art title is quite useful. That's also the one which is being used in the first party controls. Though it's not the actual, the same code, but it mimics the same behavior. So first of all, I need to configure my web art. So let's say that we are going to retrieve items from the documents library and the rest is all okay. The rest is for later. And now if I'm going to save it, you don't see anything. The reason is there is nothing to render yet. Although there is that web art title control, the web art title control only renders something if there's something in place. So if I'm going to edit the web art again, I see this web art zone and now I can give it the web art title. If I save this, the web art title is in place. No, my actual web art is not doing a lot. So let's add the last step of logic and let's add a list view. List view is using the details, view control of Office UI fabric, but we added a couple of things to it, like the logic of specifying which fields you want to view, which icon fields, which group fields, which fields to sort long and so on and so on. Because all this logic is not there by default in the details component from Office UI fabric. And if you ever try to work with it, that's kind of a hard control to work, to get it to work within your code or within your solutions. So here what you can see is the magic of the PMP controls. It's fetching or we fetch my actual code over here is fetching the list items. So once my list items are retrieved, I push them towards my current state of my components. And in here in my list view, I specify which items I want to visualize. So these are the same documents which I can see inside my document library. So only these, I think nine documents are in place. That are the ones that I can retrieve from there. I can specify how many items I want to retrieve and it's, so now I will need three, four. With this toggle, I can specify if I want to see grouping inside my control. So by just flipping switch, I see these grouping options. How does my web app know what to do with it? In my list view control, I have a group by fields property which is specifying which fields it needs to be using for grouping. You can add multiple fields in there. Right now I only added a single one which is the department field but you can have sub dependencies or a sub grouping also works. So this, if I'm going to just show you what this, this is just an object which specifies the name of which property you want to show. In this case, department.label. The reason why that is department.label is because department is a managed metadata field. So the value I'm getting back is department.label and department.termid as far as I believe, yeah. So I'm using the label to visualize the grouping inside my web art. And if I want to add another one then I just add another property over here and then I get another grouping for subgrouping if I want. But this is something I didn't complete in my document library so I cannot actually do it. But this can also be done. Inside the select terms that quickly sets or marketing, maybe marketing is better because it actually contains two items. If I'm wrong, now it contains three items. Oh yeah, there's that actual number of items to retrieve. So now it returns me all three marketing items. And this is just by using that term as a filter. That's also something that is possible. And that's why these property fields are really useful because they know the logic. They just send you the information and you can start working with the information. Of course, behind all these controls there's still a bit more logic. Like for instance, the web art title control it still requires a couple of things in order to get started. All these things can be found inside the documentation section. Like for instance, it needs to know the display mode. That's something which is coming from within your controls web art section. So that's the web art that it's loading knows in which kind of display mode it is. Is it in read or is it in edit? So that's something you have to pass through to your component. Also the update property is a function and this function is going to update the actual property inside your web art for the title of your web art. And I can actually show you that if I go to my web art and I go back, go to the top over here, I have update property and this is a function. What it gets is the value. The value I just insert over here. So my value, this is actually coming in here and it's going to overwrite for whatever reason I specified description should be the title and the description should not be here. Okay, actually I need it inside my control and we can quickly move this so that we don't actually need that anymore. And that's how it works. So all some of these things you need to get in place in order to start using these controls. But that's all the things that you can find or all these things you can find inside the documentation parts that you see over here that you add the placeholder like this. That's a good way. You can also add everything to your project but that will make your bundle larger because the same behavior obviously why fabric works. So we always go for the best approach. So this is the best one. And here in here, you can see these things like the on configure, this is the function you need to execute, same thing goes for the web art title, for the web art title. This is all the things you need to get in place and in here you see that update property function that you also have to configure in your main file. So I think this is it for the demo parts. I hope that you had a good overview of what is possible with all these controls. So two types controls, react controls are based on UI fabric with a bit more logic and know how of how SharePoint works. And we have the property paying controls which allows you to quickly configure your web art and to have more logic behind some of these controls. Like for instance, a text field can only have text. Now we have a number field which can only have numbers. Actually, it's weird that it wasn't available but now it's available with the BMP control set. Awesome, that's really useful. Thank you. Yeah, thank you very much. Let me, I wanted to ask, I have one question that was submitted. So let me go ahead and ask that first. And if anybody else has any other questions, if you wouldn't mind taking a minute to just, there's a place where you can post questions on the question and answer panel. Sorry, I'm trying to get the slides back up. If you just use on the question and answer panel where you can actually say if you want to, if you want to post your question. So first question by Raymond is asking about the term set picker. It thinks it's really cool, but is it possible to use it in an app customizer or within a web part instead of just the property paying? That seems it's a very good question. We are looking into it at the moment. It's, it cannot be done because the property paying fields, they are actually using React. And in an application customizer, it could be that you're going to use something else. You're going to use Angular, you're going to use Q or no framework at all. So you don't have the dependency on the React over there. And in the property paying zone, that's all being rendered from React and is being used as a React component. So that's why we chose the same way as our SharePoint is using it. So it needs to be actually rendered in that zone. Currently, we are looking into it to port some of these things over towards the React controls project so that it can be used in whatever solution you want to ask, like, for instance, an application customizer or, yeah, something else. Gotcha. Yeah. It's like your bad part. And Kristen had a similar question too about asking about property paying controls used outside the property paying, but I think you just answered that. So the ones that are all the property paying controls that you were showing, the managed metadata term set picker, the drop down, the list drop down selector, those are all intended to be used just inside the property paying. But the other stuff that you were showing, like the list view and the placeholder and the web part title, those can be used inside the web part itself. Yeah, indeed. Got it. Cool. It requires a bit more work because of everything is bound or has a dependency on that property paying field. So we get all the logic of the web part from that property paying. And to port it over, we have to build something to replace that. It's not that hard, but that's something we need to do. And we're taking a look at it and to doing that in the future. And it's an opportunity for community contributions as well to help as a community project. So it's a place for people to step up and give you a hand. For sure. If you already did it and you want to contribute, feel free to do so. We'd love to see contributions in either of these two repositories. Awesome. Well, thanks a lot. If anybody has any questions too, I'm going to go do a little bit of wrap up stuff. But if you have any additional questions, please feel free to go ahead and post them in the question and answer piece. We'll come back to it in just a moment. There's just two things I wanted to address here. One is that I can think it's safe to assume that everybody here that's watching this webinar is probably a SharePoint developer. And what Vojtanus and Rencor are doing right now, there was a Rencor survey that ran for February and through March about SharePoint and Office 365 customizations. That survey is over. We're running another survey. This time I'm hosting it about SharePoint development. And this is a lot more on the technical aspects of SharePoint development, like what frameworks you use, what, where you go to ask questions, where you get help. It's a lot of stuff that not only is, you can see what other developers are doing around you by also participating in this, but Microsoft is also very keen to see the results of this survey as well and talking to them. In fact, just between us, they were a little frustrated that they don't have some of this information themselves from their marketing group. But so we're giving them a hand with this stuff as well to see how we can get the community to jump in. So what you can do is you've just head over to stateofsharepointdevelopment.com. It's been about five to 10 minutes answering a fairly lengthy survey. If you plug your email address in at the end, you'll be eligible to win five tickets, one of five tickets, to the European Collaboration Summit later in late May, a subscription to my ultimate bundle of my Mastering in the SharePoint Framework Development course, and one of 10 different 25 Amazon.com gift cards that we'll be handing out. The awards will probably start going out, at least the ones for the Collaboration Summit. Those tickets will probably go out in early part of May, but the rest of them will probably be going out sometime later in May, as we may let the registration or the survey stay open a little bit deeper into May. And then just, I'd be remiss if I didn't mention a couple of the free resources, if you're a SharePoint developer, SharePoint Framework developer, or any kind of a SharePoint developer, I have a bi-weekly newsletter that I run that curates content from all these different sources from Microsoft News, from samples, from screencasts and community blog posts as well. If you see something that's missing, let me know, maybe that person is not on my list of things to check every week or every two weeks. But we also call out updates to specific projects. And the two projects that Elio mentioned in today's webinar, the one for the React web part controls and the controls for the property pane. Whenever Elio has a release, that project, one of those two projects has a release and there's new controls or there's big updates. We definitely call those out there as well. So it's another way for you to get up to date on what's going on in the SharePoint development space without trying to track everything down because I don't know about you but I have a hard time staying on top of it. I just make it as part of my job so to give everybody else a hand. And then there's a couple of other resources that you see there on the screen. But with that, that's everything that we wanted to cover today. Ah, Steve says this is how you learned about this webinar. I'm assuming that you're saying it's from the newsletter. So awesome, you're a subscriber and I appreciate it. If anybody has any other questions, now's a good time to go ahead and post them but otherwise we're gonna go ahead and wrap up the webinar in just a moment. This was recorded, we will publish it on the Voigtanos blog in the next 24 hours. So if you just keep an eye out there, you'll see a link where it'll get posted. I am gonna do a little bit of video editing and edit my video out and replace it with the slides that you should have seen. My bad on that one, but we'll definitely take care of that. And everything will get posted and everybody will have the ability to go ahead and see it that way. So I don't see any other questions that have popped up here. If you do have any other questions though, when you do see the video pop up, feel free to post the questions in the comment for the recording of the webinar. I put Ilya's contact information up here as well again, if you wanted to reach out to him. Great SharePoint developer out there, good friend. So it was really flattered to have him join us today and thank you very much Ilya for taking the time to join us today. Yeah, no problem, thank you for the opportunity. Awesome, and thank you everybody for joining us today. And with that, we'll see you other questions. So thank you very much, go ahead and wrap it up. Hope everyone has a great day. Bye-bye.