Microsoft 365 Community Transform SharePoint Add-in model solutions to modern development patterns, 30 Mar 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Transforming existing add-in App Parts as modern SharePoint Framework Web Parts

Description

This module introduces you to the development of modern SharePoint Online Web Parts and how to transform your already existing SharePoint Add-in model classic App Parts into modern client-side Web Parts built with SharePoint Framework.

This video is part of a series in a playlist about "Transform SharePoint Add-in model solutions to modern development pattern": https://www.youtube.com/playlist?list=PLR9nK3mnD-OXJLA29Q0Xk7psbAUqzQZwe

➡️ Next video on this series - https://www.youtube.com/watch?v=OLN--qHnFDs&list=PLR9nK3mnD-OXJLA29Q0Xk7psbAUqzQZwe&index=2

#Microsoft365 #AppParts #WebParts #SharePointOnline

In this video, you will learn about

- How to build a modern client-side Web Part with SharePoint framework
- How to upgrade a classic App Part to a modern Web Part
- How to leverage React and Microsoft Graph Toolkit to build modern client-side Web Parts

📖 All guidance content including code samples can be found here: http://aka.ms/sp/add-in/modernize/samples

✨ Presenter
• Paolo Pialorsi (PiaSys.com)

📃 Agenda
0:00 Introduction
1:16 Transformation process
2:22 Demo
5:57 Creating SharePoint Framework solutions
11:22 The transformed modern Web Part in action

📝 Learn more
• YouTube playlist for this video series - https://www.youtube.com/playlist?list=PLR9nK3mnD-OXJLA29Q0Xk7psbAUqzQZwe
• Set up your SharePoint Framework development environment - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment
• Build your first SharePoint client-side web part (Hello World part 1) - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part
• Microsoft Graph Toolkit overview - https://learn.microsoft.com/en-us/graph/toolkit/overview
• File list component in Microsoft Graph Toolkit - https://learn.microsoft.com/en-us/graph/toolkit/components/file-list

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 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

Hi there and welcome to this video about how to upgrade from classical path built with the sharepointery model to Modern web Parts, built with SharePoint framework first of all, and to set the context you should keep into account the the SharePoint I didn't model apart are an old extensibility model for the classic UI of SharePoint online, and they are based on JavaScript on the JavaScript object model of SharePoint and eventually on jQuery, and they rely on HTML and CSS at low level. In the modern world.

A

The client side were part of SharePoint framework on the country are built using typescript and eventually react as the UI framework. They can rely on the fluent UI of Microsoft and on the micrograss toolkit to have a better and fully integrated user experience with the modern SharePoint online and teams UI.

A

Just for the sake of making an example. Imagine that we have an ad part to list the documents in a document library in SharePoint, and you want to upgrade it to a modern webpart built with SharePoint framework. As you can see in this couple of screenshots, how can you do that? Well, first of all, you need to keep into account that there is no conversion tool that you can use, so it is not possible to do something like right: click on your mouse button and upgrade to SharePoint framework.

A

These Technologies are different and the languages are different, so the modern world is really powerful, but you will have to create a fresh new web part in SharePoint framework, and you will eventually be able to reuse some of your code or logic, at least from an eye level point of view in the new implementation built with SharePoint framework.

A

Of course, on the other side, if you will move to SharePoint framework and the modern UI, you will find that a lot of libraries, Frameworks and tools which will heavily speed up your development process and as such, you will see that it will take just few moments to upgrade from the old, adding model to the new SharePoint framework and modern development model. So let me move to the demo environment and let me show you how you can do that in practice.

A

Let's assume we have a document library in a SharePoint online site collection and we want to transform an already existing a part built with the SharePoint Adin model into a SharePoint framework web part, which will list study documents in the library. So here you can see how the SharePoint Din model apart, looks like in the classic UI of SharePoint, and here you can see we have a list of all of the documents in the document library and we can click on them to open the actual document.

A

If we have a look at the implementation of the app part in the sharepointery model solution, we can see that we have a visual studio solution in which we have a client webpart element in a feature framework file and in this file we have the definition of a client web part which will Target our list document, webpart.spx page with some standard tokens in URL accordingly to the SharePoint at the model development model, and we have a set of properties for the web- part that you can use to configure the web part itself like, for example, search filter text that we can provide to filter the documents that the app part will show to the user.

A

Then we have the actual page in which we do the rendering of the app part in the air. Aside from some JavaScript client-side code to just set the UI of the page, we have a diva with the ID list documents and with the loading and three dots as a placeholder. While loading the document, the documents will be actually loaded in the list document.js file, which is the one we used to use in the sharepointed in model to implement the actual logic under the cover of an up part in this one.

A

When the document is ready using a bit of jQuery, we get the host URL, the app URL and the search filter, as it will be. A query string parameter in the URL of the page that we are rendering. Then we use the JavaScript object model to get a reference to the client context and to get a reference to the host of the app that we are running through the SharePoint ID model, so that once we have got a reference to the host web, we can list the document based on a search filter.

A

That's the one we get from the query string and in the list document function, JavaScript function, we simply get by title using the JavaScript object model, the documents, library with name documents and then, if any filter is provided by the user, we build the camel collaborative application, markup language query, to filter the items and if not, we just build on the fly, a camel query which will give back to us all of the documents in the library and then we render the output in the div, which will hold the list of items.

A

In fact, when we are done with the retrieval of our content on list document succeeded when we do the execute query: sync, we will simply empty the list of documents and for every single document we will render in an ordered list with a list item for every single document and, of course, in case of any failure, we will render the failure in the UI of the app part. That's the old sharepointed in model implementation. Now, let's say that we want to create the same solution using the SharePoint framework.

A

Well, first of all, foreign, we should trigger the creation of a SharePoint framework solution using the Yeoman generator for uh Microsoft SharePoint framework and so you'll add Microsoft SharePoint. By running this command, we will start disk folding tool which will provide us some questions. This could be the name of the solution we are going to create. We want to create a web part.

A

We will have to provide a name for a web path which can be, for example, list documents, and this will become the name of our web part, and it will be a web part based on react, for example, for the rendering of the UI, so that using the react framework, we will have a better user experience for our end users by doing that, disk folding tool will start creating a bunch of source files, and we start installing a bunch of npm packages on the solution that it it is going to create.

A

It will take a while and that's why I already created the solution for you, so that we can speed up the video and, as such, let me move to this solution that I already created for you, and here you can see how the solution got scaffolded by the human generator, and we can notice that we have an SRC folder in which we have all of the web path and specifically our list documents. Web part.

A

The web part in SharePoint framework is nothing more than a class which extends the Baseline side web part and which also accepts a generic type, which would be the type of the input properties configuration properties of the web part.

A

In our scenario, the configuration properties will be based on the search filter string that we also had in the SharePoint adding model solution, but now it will be a slightly different in the SharePoint framework context, so we create a web bar class which inherits from the base type and we configure the configuration properties for the web part as such in the get uh sorry get property paying configuration method.

A

We have to configure that we want to make our search filter property available in the property pane of the web part, so that it will be configurable by the user. Moreover, in the render method, which is a fundamental method of a SharePoint framework, we part we render the output of our part and right here we rely on react in order to load a react component which will do the actual rendering of our web part.

A

In order to do that, we provide a set of input arguments to the react component that we will dig into really shortly from now and I provide here the search filter argument configured by the user.

A

If any, and then we also provide the tenant naming which we are the site ID and the web ID, so that the react component will know from where the documents should be loaded from and the Tenant name, the site ID and the web ID are information that you can retrieve through the context product 30 of these, which is the web part and, generally speaking in SharePoint framework, you can always access the context property of these component.

A

You are working on and through that you can access, for example, the page context to get the site URL or you can get a reference to the web or to the site in which you are now in order to render our web part. We rely on a react component which is defined in the components subfolder of my solution.

A

Here we have a TSX file, which is the actual react component, and in fact here we have a list document class which extends react.component, which still does have a list of custom properties defined in this typescript file, and here we can see all of the properties that we were providing before in the render method of the web part. Now. What is really interesting is that in this solution to have a better user experience, we decided to install an npm package.

A

If you go to the package.json file of the solution, you can see that we have a couple of packages, the MGT react and the mgtspfx component. By installing these two components, and in the article Associated to this video, you can find detailed guidance about how to do that.

A

You can then leverage really useful and Powerful controls for rendering the UI of your web path and that's why, in the rear component to list the documents we get, a reference to the file list react component of the ngt react package and as such, in the render method of our yard component, which is by the way, the only method that we have in this component.

A

We simply retrieve all of the settings from these properties, which represents the properties, object that we provided right here in the render method of the web part and right after that, we build the query to retrieve the document, which will be a Microsoft graph query and then we simply say using a bunch of HTML code that right here we want to render the file list react component of MGT with a specific file list, query which will do the actual query using micrograph toward the document library that we want to use as the source for our document and we'll and which will render the documents in the output of the web part.

A

Your part is already running in my environment, so I can switch to the modern UI of SharePoint online and to the workbench, which is a page. You have in any SharePoint online site to test a web part and by adding clicking on this plus button, adding the list document to a part. We can see that this is the rendering of our new web part with the nice UI of the ngt control.

A

Here you can find additional links if you want to dig into the topics that we covered in this video and, like always, thank you.