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 SharePoint hosted add-ins to SharePoint Framework solutions

Description

This module introduces you to the development of SharePoint Online client-side solutions with SharePoint Framework as a modern replacement for SharePoint Add-In model SharePoint hosted apps.

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=YFUt3pp6C1I&list=PLR9nK3mnD-OXJLA29Q0Xk7psbAUqzQZwe&index=1
⬅️ Previous video on this series - https://www.youtube.com/watch?v=qbQ5QkzQOgQ&list=PLR9nK3mnD-OXJLA29Q0Xk7psbAUqzQZwe&index=3

#Microsoft365 #SharePointFramework #SPFx #SharePointOnline

In this video, you will learn about

- Migrating from SharePoint Add-in model SharePoint hosted apps to SharePoint Framework solutions
- Building modern client-side solutions
- Consuming SharePoint Online data in SharePoint Framework

📖 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:51 Transforming SharePoint hosted apps into SharePoint Framework solutions
2:30 Demo
4:50 Consuming SharePoint Online data in SharePoint Framework

📝 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
• PnPjs - https://pnp.github.io/pnpjs/

💡 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

Hosted applications to client-side applications for SharePoint online model. We used to create SharePoint Orthodox, which were Solutions based on client-side code, so JavaScript code in JavaScript object model code running on a dedicated SharePoint site, hosted under a domain related to the SharePoint adding model in such kind of solution. We used to consume data in the SharePoint app site, as well as in the SharePoint host side, which is the site that we use to extend using the SharePoint Adina in the new modern development world of SharePoint online.

A

We can easily create client-side, Solutions or applications simply using the SharePoint framework and creating SharePoint framework web parts. For example, the UI will be fully integrated with the out of the box modern UI of SharePoint online, and we can easily consume the SharePoint online data of the site where we are running our extension. Our client-side solution, as well as Services, provided by any of the Microsoft 35 workloads using the Microsoft graph API, and eventually you can also consume custom apis of your own.

A

You don't need to do anything special in your client-side solution to do that, because all of the planning is provided out of the box by SharePoint framework and you don't even need the necessary need to register an Azure active directory application to being able to consume micrograph or any other API from a transformation process. Point of view. There is no conversion tool to upgrade a SharePoint hosted application of the sharepointly model to a SharePoint framework solution.

A

You will simply need to create a new spfx solution and to create a new web part or a new extensions with SharePoint framework. Then you can start consuming SharePoint online and Microsoft graph using the sphttp client or the MS graph. Client objects provided out of the box by SharePoint framework. So let me move to the demo environment and let me show you how to do that in practice.

A

Let's assume that you want to read a list of documents in a document Library using a modern client-side solution built with SharePoint framework. So this is the document Library you want to read, and this is the what part a client-side web part that you want to build in order to list the documents inside the document Library. How can you do that? Well, using the console window, you can start the human generator for SharePoint, so you'll add Microsoft Leisure point. You will have to provide a name for your solution and this one is totally fine.

A

You can select to create a web part. You should provide a name for your webpart, which could be, for example, consume HBO, client side and, for example, you can decide to use react as the UI framework for building the UI of the solution. Then diska folding tool will start generating all the code for you and importing all of the npm packages that will be needed by the solution it takes a while, so I will fade out and fade in when it's ready and now the client-side solution is fully scaffolded.

A

So we can start Visual Studio code and see what we have got generated so code Dot, and here we are. We have got a SRC folder in a solution where we have a web part folder and in there we have the consumer SPO client. Sideward part. This web part extends from base client-side web part and inside the render method is relying on a react component that we can find under the components. Folder of the word part. The rear component will have a set of properties to configure its settings and then in the actual TSX component.

A

So the react component here you can see this one extends react. component of T, where T is the type of the properties and eventually right now we don't have any state, but the real component could have a custom, State interface definition in the render method. We will provide implementation, the actual implementation of our web part.

A

Now let me switch to a solution that I have prepared for you, where you can see how you can easily consume SharePoint online data from such kind of inside solution, so here I still have a web part to consume SPO client side as like as before. Now this white part is slightly different compared with the auto generated one. In fact, I added an import for the HP, HTTP client type from add Microsoft sp-, http and I created a variable, a private variable of type sphttp client in my webpart class, then in the on init method.

A

I simply save the value of the context.sp HTTP client of this, which is the web part in the private variable that I have and I use the this dot context.pagecontext.web dot absoluteurl to get the whole URL absolute URL of the website in which I am and they provide those two information. So the sphttp client instance and the absolute URL on the website as input configuration properties for the react component as such in the components.

A

Folder I slightly updated the properties interface, adding a reference, an import for the HP HTTP client and defining the two additional properties in the props interface.

A

I also created a state interface in which I want to keep track of an array of I document items where every single I document is made of an ID and the title so that in btsx component. So in the actual react component, I can say that, while in the Constructor I simply want to initialize the document with an empty array, then in the component did moment, asynchronously I want to load the documents from SharePoint online and in the load documents a synchronous function. I simply rely on the HP.

A

Http client object that I've got as a property as an input property for my react component. So here under the cover I'm relying on the context of SharePoint framework and I, make an HTTP get request using the rest apis of SharePoint online, targeting the URL, the absolute URL of the web, where I am and then using the rest, API URL, syntax, High, Target, underscore API, slash web slash lists, slash get by title documents.

A

Of course you can make it configurable in a real world part slash items to get all of the items in the document library. With the title documents once I will make this request.

A

I will get back a response which can be converted from string into a Json object which will be made of a unique property called value which will be an array of all of the items inside the document library and as such I will make it as an array of I document, so that I will extract only the ID and the title and I can set that array as the content of the document property of my state in the react component, so that, in the render method of my real component, I can get the documents from the state and in the return of the content of the render method, I can simply say that I want to have an unordered list in HTML and for every document in the documents are rated.

A

I have in the state. I want to map it to a list item with key equal to the ID and content text, content equal to the title as long as I have a title. Otherwise I will simply skip it and that's it. This is a very simple scenario where you can easily consume a SharePoint online data client side from a SharePoint framework solution.

A

Here you can find additional links if you want to dig into the topics we covered and like always thank you for watching this video foreign.