Microsoft 365 Community PnP Virtual Conference, 8 Sep 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PnP Virtual Conference - 09/2020 - Create Beautiful Web Parts in Minutes Using PnP Controls

Description

The session shows how to use PnP Reusable SharePoint Framework Controls to quickly create beautiful and functional SharePoint Framework web parts. PnP SPFx reusable controls are designed to simplify SharePoint Framework solution development.

There's two set of controls:
- Property Pane controls designed to be used with SharePoint Framework web parts to provide enhanced configuration experience in web part edit mode. These can be used in your projects regadless which JavaScript framework you've chosen to use
- React Content Controls are designed to be used within the SharePoint Framework editing area. These can be used to provide standardized experience when you are building your solution using React.

Both control types are using Office UI Fabric controls behind the scenes, but are combining and decorating them with more advance capabilities.

Speaker: Alex Terentiev (Sharepointalist) | @alexaterentiev

Supporting materials:
• PnP SPFx reusable React Controls - https://pnp.github.io/sp-dev-fx-controls-react/
• PnP SPFx reusable property controls for web parts - https://pnp.github.io/sp-dev-fx-property-controls/

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

Hello, everyone, my name, is alex terentiff and welcome to the session, create beautiful spfx web part in minutes using pnp, reusable controls.

A

Few words about myself, I'm an office development team, vp and a member of microsoft, 365 pnp team, I'm solutions, architected sharepoint list and have more than 10 years of experience in sharepoint and frontend development. I have been three times awarded during sharepoint of kitchen events in 2017, 2018 and 2019, but more important, of course, is social media. So follow me on twitter read my blog visit my github profile and feel free to connect with me on linkedin, and here is today's agenda. First we'll go through sharepoint framework overview.

A

Then we will talk about microsoft, 365, pnp and, of course we will code. We will create a beautiful web part using pnp, reusable controls and, let's start with sharepoint framework overview. So what is sharepoint framework? The sharepoint framework is a modern way to develop sharepoint customizations, it's client-side, it's modern, it's mobile. First, it's framework agnostic, meaning that you can use any javascript or typescript or front-end framework.

A

You like it's based on commonly used web development tools and it can be kind of headache for classic sharepoint developers, but it allows us to bring the latest and greatest from front-end world into sharepoint, and one more thing to mention here is that first-party components are developed using sharepoint framework as well, and it makes sharepoint framework kind of a unique development tools, because first-party developers and third-party developers are in the same boat.

A

Let's talk about developmental chains, so, as I mentioned, all the tools are web development tools, but they're pretty similar to what we had in dot net world, and I will show you that in a moment, so the first tool is node.js. It's a hosting and serving environment for javascript projects, and it's pretty similar to is express in.net world. The next one is npm.

A

It's a package manager that allows you to reference or add different modules, different libraries in your projects, it's similar to nuget package manager in dot net world webpack, is a modules bundler, transformer and packager. It compiles your typescript bundles. Everything in chunks that will be loaded to the page. Gulp is an extendable task. Runner that allows you to create execution flows for such routines like building the projects, and it also allows us to inject our custom tasks in sharepoint framework build routine as well, and if you look at webpack and gulp, it is similar.

A

They are similar to ms building.net world yeoman is a templates engine based on generator ecosystem, and you can think of generator as a template, with conditional configuration based on some parameters or prompts and typescript is a language. It's a type superset of javascript that compiles into javascript, and you will use typescript to develop to implement your projects and it's pretty similar to csharp. As you can see, there are a lot of tools to learn and it's definitely hard to learn them all, and actually it's not even needed.

A

If you don't plan to implement some really complex scenarios that not even really related to sharepoint from sharepoint framework perspective, the most important tool to learn is typescript, as this is the language you'll be using on day-to-day basis for the development for other tools, you can just remember a few commands and use them.

A

I would also recommend to be familiar with the npm modules, because there are a lot of ready-to-use solutions that you can include into your project without reinventing the wheel, for example popular library like moment.js, that allows you to work with dates, including user-friendly formatting, so what's currently available in sharepoint framework, first of all client-side web parts, and if you are familiar with classic asp.net parts. The idea here is the same.

A

It's just a component that can be added to the page and solve some business problem, good thing about client-side vapors that they are available in sharepoint online sharepoint, 2016 and sharepoint 2019, and they can be added both on modern and classic pages. Another great thing about client-side web parts that they can be used as microsoft teams, tab and in future as office add-ins as well. The next one is extensions and extensions. Allow you to extend or customize modern, sharepoint, ui and modern sharepoint experience.

A

Currently there are four types of extensions available and the first one is application, customizer that allows you to add custom, page header and page footer or just inject custom, css or javascript to the page. The next one is command set, customizer that allows you to add custom buttons to list command bar or list items context menu field. Customizer allows you to provide custom, rendering to list item fields and the last available extension is search.

A

Query modifier that allows you to extend search query before it actually sent to server for processing and in this sample, the user typed meeting, and we translated it to turkish and spanish and got the results for all three languages: library components. You can think about library components as of sharepoint framework models that can be installed to app catalog and then used or reused in any other sharepoint framework solution on your tenant. Now, let's overview the steps you need to proceed to create sharepoint framework project.

A

First, you need to install node.js and npm on your machine and small remark here: sharepoint framework works with node.js version, 8 and 10 12 is not currently supported. Next install any ide, you like the only requirement for ide support or front-end development like syntax, highlighting for javascript, typescript and css intellisense and so on. I prefer visual studio code as it is free. It was initially created for front-end development and most of the samples around sharepoint framework are presented using vs code as well. Next step is to install yeoman and gulp. This is done using npm.

A

I is an install shortcut. Minus g parameter shows that these modules are installed globally and will be available across your machine. uh Yo is a shortcut for yeoman and gulp is gold. Next one install yeoman, sharepoint generator and again we are installing it globally using my hd parameter.

A

Next, we can navigate to the projects folder and execute yo at microsoft, sharepoint to start scaffolding of the sharepoint framework project, and you will be asked multiple questions that allow the generator to correctly configure the solution. For example, what is the name of the solution? How do you want to create web part, extension or library, component and so on? If you are creating the first ever project on this specific machine, you will need to run gold trust, the third command.

A

It will allow browsers to know about sharepoint framework development certificate that is used for local workbench debugging, and the last step is to restart your project or start debugging of your project with gulp surf command.

A

It will start or launch a local server default browser and open workbench page in this browser, so you'll be able to debug your web part on that page and now, let's overview microsoft, 365 pnp, initiative, microsoft, 365 pnp is an open source initiative coordinated by microsoft, 365 engineering, it's a set of resources on top of microsoft, to simplify admins developers and user's life.

A

It contains tons of helpful materials as microsoft, 365, dev, videos, microsoft, 365, pnp, videos, open source tools and libraries like office, 365, cli, pnp, powershell, yeoman, generator and others sample galleries for sp effects, column and view formatting, microsoft, teams etc, and the only url you should remember is aka dot, msl m365pnp.

A

This is a landing page for all microsoft, 365 resources. But in this session we'll focus on pnp, reusable controls. There are two repositories or two npm modules for the controls. The first one is pnp react controls. This is a set of reusable controls for building spfx web parts and extensions and the second one is pnp property, pane controls, a set of controls to be used in spfx, webparts property pane and let's jump to the code and start creating our beautiful spfx web part using both react, controls and property pane controls.

A

So what we are creating, let's assume we need to develop a web part that displays a carousel of images. The images are stored in some document library and we want to provide ability to select a site and a document library where these images are stored to implement the functionality.

A

We'll use the next pnp controls carousel to display the carousel itself placeholder to notify that the web part hasn't been configured yet webpart title to show custom title for the web part and side picker with list picker to select the site and the document library where the images are stored and if you navigate to the documentation for reusable react. Controls you'll find all the information on how to use the controls, uh what properties to assign, how to import the control from the library and so on and so forth.

A

So here is the example of the carousel control and all the properties uh here is the placeholder and how to handle the on configure event and how exactly you can open the property pane when this event is fired same for web part title how you can provide the display mode, update property and so on so forth, and the same for reusable property, paying control in the documentation. Again, you can find all the properties you can see how the components are look like and how to use them in your web parts.

A

And let's look at the document library where our slides are stored. As you can see, there is some additional metadata for our slides, like title description and url. This metadata will be used to display additional information on our slide and title is just a single line of text. Description is multiple lines of text and url is a hyperlink or picture now, let's jump to the code, and I have already scaffolded the default web part project using react framework and the first thing we need to do.

A

We need to install our reusable controls, libraries to the uh our project. This is done using npm. I is a shortcut for install, save, save exact because we want to save the exact version of our components at pnp, slash, spfx controls react at pnp, spfx property controls and let's wait until the components or libraries are installed.

A

Awesome. Let's jump back to the code and start changing it. So first thing we need to do is to change our uh props for our react components, so uh we will need site, url and list id to get slides from our library. We will need title display mode and update title to work with the part title pnp, reusable control.

A

We also need onconfigure to handle the configuration, change or configuration button click from our placeholder component, and we also need sp, http client property that we will use to call apis, sharepoint rest apis and get data request. Data from our document, library, okay, so the props are ready now, let's navigate to web part and modify to store needed properties. So first, let's add needed imports.

A

We need property field, site picker and I property field site from pnp property controls, property field site picker is a property field that will be used in property pane and I property field site is an interface of the value returned by the component and we also need the property field list speaker. This is the control from pnp property controls that is used to uh select list in property pane okay, so these imports are done and now we can modify uh the part properties uh to store needed information.

A

So uh we need sites and the type of the sites will be. I property field site and ray of this, and we need list id, which is just a string and also we need a title that will present or store uh our web parts title okay, so now we can navigate to get property pane configuration, we can delete description and we can add property field to site picker and property field list speaker. And if you go to the uh documentation for the controls, you will see that it's pretty simple to configure these controls.

A

There are a few required properties, a few optional properties and the configuration basically is pretty similar to out of the box uh property controls like a property, pane text field or drop down. So you need to provide target property which is kind of a name of the property where the value of the field is stored and you need to provide some additional configuration or some additional properties for the property pane control. So in case of site picker, we are providing context. We are providing properties label on property change.

A

We need to set that we don't want a multi-select, so multi-select is set to false. We need to provide initial sites or initial value and the key for property, pane uh list, picker or property field list. Tweaker again, we need to provide target property. We need to provide label context properties uh on property change. Again, we don't want it to be a multi-select and additional thing here. Interesting thing is that we will set disabled property of the uh control to these dot properties, dot sites. So basically, if these properties, those sites is undefined.

A

In that case, our list picker is disabled and it basically makes sense, because if the site is not selected, we cannot select a list because we don't have a site yet right. We also need to provide web absolute url property. This is the url of the site from where we will request a list of.

A

A

And one more property that I want to pay you attention to is base template that allows us to filter the lists returned from the site based on the uh template. In our case it's 101, so we will receive only the document: libraries, okay, we have finished with the property pane and the last part here is to provide all the props to our react component. So we will get site url list id and title from web parts properties we'll get display mode from display mode property of the web.

A

Part update title is a simple handler that will store the title. New title to the properties of the web part and on configure will be the same as we saw in the documentation for the components. Basically, we will just open the property pane for the configuration and for the sp http client. We will get this information from webparts context that contains sphttp client property as well. Okay, so the web part is ready and now, let's navigate to our react component, to modify to actually render the carousel with webpart title and placeholder if needed.

A

First of all, we can delete all the default markup because we don't need that and let's add all the imports that we will use in our component. So we will need to import placeholder, webpart, title and carousel from spfx controls react.

A

Now, let's create a helper interface, I carousel image to have type definition for these slides that are returned from sharepoint document library. It will have four properties. The first one is image src, which is basically the url to our slide and then title description and url are the metadata properties from our document library. Next, let's define state of our component with the only property called images and the type of this property will be array of I carousel image.

A

Now, let's modify the definition of our component to use this state interface and also, let's set standard constructor to initialize our state.

A

The next thing to do is to implement method, to request data from the document library. uh Let's call it get images, it will be a synchronous method, we will pass a processor parameter and it will return promise of type void, and the first thing to do in this method is to check if our props object contains site, url and list id. If not, we will just return undefined from the method. Otherwise, we will use each sphttp client instance to get data using sharepoint rest api and the url for the request.

A

Will be site, url or web url slash api, slash lists, slash get by id. I will provide an id, then slash items, and we also, we will also add, expand, parameter and we will expand the file because we need a list item and we also need a file itself, because we want to get the url for this file.

A

When we got the response, we can convert it to json. This is done using response.json method. Now, let's process this json to get the array of iqr cell image objects. So if the json is correct and if the document library has some items, we will have the value property inside the json and we can integrate through this property because it will be an array and for each and every item of this array we can create our iqr cell image object and in the end we will just set our state.

A

We will set images property of the state to the uh images object. Images array that we just got from the response and we will call get images method in two situations in two places. First in component did mount to get the initial data from there and also in component will receive props if site, url or list ide have been changed.

A

Finally, we can start working on the markup of our object and first, let's do the destructoring of the props object. In that case, we can reference any property of this object directly and then let's modify what is returned from our render method. So first one will be a web part title and we'll provide title we'll provide display mode and we'll provide update title to this component. Then, if site url isn't defined or list id is undefined, we will show placeholder component and we need to pass several properties to this component.

A

First of all, I can name then icon text, description, button label and, of course, the handler for onconfigure event for the main content. Let's create additional helper method to get main content and in this method, if we already received the images from the document, library will return carousel, and the interesting thing here is how we are providing the element: property of the carousel element.

A

Property can be either j6, dot, element, object or array of j6 element objects, or it also can be an array of eye, carousel image, props objects, and we will use the last one and we will go through uh or iterate through all the images we will use map method and we will convert every image to this. I carousel image: props object, we'll also set some additional properties of the carousel component.

A

Buttons, location and buttons display to specify how the pref and next buttons are displayed is infinite to specify that our animation will be looped indicator style to provide styles for the slice indicators, fake handlers for prep and next buttons click and pause on hover flag. To specify that we want to pause our animation when we hover over the slide. If there are no images, we'll display the spinner from fluent ui framework.

A

Now we can go back to render method and call get main content if site url is defined and list id is defined as well. The last thing from the code perspective is to add some styles. For that purposes, let's navigate to a css file. We can remove all the default styles and one important class or style we need to add. We need to provide the height of our slides. Otherwise our cursor component will be collapsed to a single row. So, let's add new class, let's provide height of 400 pixels.

A

Now we can navigate back to our react component and in the carousel component, we'll provide content, container styles and our class. Now, let's prepare our solution for the deployment first, we will need gulp cleantask to clean the solution. Then we will run gulp bundle task.

A

This will bundle all the assets into chunks and the last one is to run gulp package solution that will actually package the solution and, as you can see, I am not using the minus minus ship parameter in gold bundle and gulp package solution, because I want to be able to debug the solution from the local host and if you use minus minus ship in that case, the uh deployment or the solution will be ready for uh production.

A

So all the assets, all the scripts will be combined and placed in the sppkg file that later on, will be published to the app catalog and, let's also run gulp, serve minus minus no browser command to launch local server. It will help us to debug our solution with serving all the assets from our localhost from our local environment. Now, let's deploy our solution to the app catalog.

A

Let's check the checkbox make the solution available to all sites in the organization. In that case, our web part will be automatically available in any site collection on the tenant and also, as you can see, from this pop-up, our solution or our web part is running from localhost server.

A

And finally, let's look at the demo of our awesome web part. So here I am adding our pnp carousel. As you can see, by default, it's not configured. I can change the title of our web part. Then, if I click on configure the property pane is opened and we can select the site. The search is working for us and then we can select a list from this site, and here is our carousel. When we hover over it, we see the uh information additional information, our title description as well. We can click on next button.

A

If we click on the description, new tab is opened with the url from our document. Library metadata and here is the same web part on the sharepoint modern page same functionality. We can go to the next slide. We can hover over. If we click on the description, we will be redirected to other tab with some information from the url assigned in document library metadata.

A

As you saw from this session, it's pretty easy to create beautiful sharepoint framework web parts using pnp, reusable controls. You don't need to worry about the ui and you just need to think about your business logic. All the controls are easily referenced in the web part and react. You just need to import the controls from the library and provide needed required and optional properties.

A

Most of the controls have flexible configuration to fit different scenarios, for example carousel control. You can show or hide preference next button slide indicators you can disable or enable animation and so on so forth, and because all of the controls are based on fluent ui, they seamlessly fit in modern sharepoint user experience resources.

A

The first link is a sharepoint framework overview. The next one is a microsoft, 365 pnp entry point where you can find all the information. All the resources around microsoft, 365 pnp next to links are the links to bnp react, controls and pnp property controls, documentation respectively and the last one is a demo from this session that you can use. You can grab the code and reuse it in any of your solutions as well and, of course, uh any contributions are more than welcome.

A

So if you find any bugs in the controls or if you want to create a new control or improve existing control p, please feel free to go to github and either create an issue, an issue or submit a pull request. And please share your feedback about the conference.

A

Go to aka dot, msl pnpvc feedback submit the form, so we could improve for future conferences based on this feedback, and thank you very much for attending the session and have a great time bye.