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 classic SharePoint add-in notifications to SPFx Application Customizers

Description

This module introduces you to the development of SharePoint Online notifications using the SharePoint Framework Application Customizers and the Fluent UI React components.

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

#Microsoft365 #AzureAD #MicrosoftGraph #ApplicationCustomizer #SharePointOnline

In this video, you will learn about

- Upgrading classic notification code to SharePoint Framework Application Customizers
- Using Fluent UI controls
- Extending the modern UI of SharePoint Online

📖 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:12 Upgrading from SP.UI.* to SPFx Extensions
2:03 Demo
4:30 The initial Application Customizer implementation
5:32 The real Application Customizer implementation

📝 Learn more
• YouTube playlist for this video series - https://www.youtube.com/playlist?list=PLR9nK3mnD-OXJLA29Q0Xk7psbAUqzQZwe
• Build your first SharePoint Framework Extension (Hello World part 1) - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/build-a-hello-world-extension
• Use page placeholders from Application Customizer (Hello World part 2) - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions

💡 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

From classic SharePoint notifications to the modern SharePoint framework application customizers just to set the context that in the SharePoint edit model, we use to rely on the sp.ui, dot, notify or sp.ui dot status set of types which allowed us to create dialog, Windows notifications and status bar messages in the classic UI of SharePoint, on-premises or SharePoint online.

A

It was a model based on JavaScript and JavaScript object model, and it is nowadays a kind of an old development model. In the new SharePoint framework which targets the modern UI of SharePoint online, you can easily rely on the SharePoint framework application, customizer extensions, as well as on typescript and eventually on react to build, really powerful, Solutions and really integrated solution integrated with the modern UI of SharePoint online.

A

So if you want to do that, there is no conversion tool, so you cannot simply convert your already existing and all the sharepointed in model solutions to the new modern development technique of sharpen framework. But you will have to create a new SharePoint framework component. It can be a web part or an extension, and typically, if you want to replace the notification or the status area, it will be an extension of type application.

A

Customizer you can choose to rely on react to have a better experience and you can eventually also rely on the Microsoft graph toolkit, which will give you a really nice and fully integrated experience for your end users. So let me move to the demo environment and let me show you how you can transition from the status bar and notifications of the classic Model to the SharePoint framework application customizers.

A

So imagine that you want to create a notification message in the modern UI of SharePoint online. The final effect will be something like the following message: that you can see right here, where you can click on the close button and hide the message. So how can we do that with SharePoint framework and the modern UI? First of all, you need to create a SharePoint framework solution, so you need to run your ad my access to Leisure point and you have to provide a name for your solution. You have to choose to create an extension.

A

The extension will be of type application customizer, which are the extension that are located in area in the top or lower part of the screen, like we just seen in the demo. So it would be an application customizer and then it could be notification header just for the sake of making an example by running diska, folding tool, all the code will be automatically generated and the npm packages will be installed in your Solutions. It will take a while, so I will fade out and fade in just to speed up the recording of this video.

A

Now that the solution has been scaffolded and all the npm packages have been installed in the Target solution, we can start working on our actual implementation. So first of all, I want to rely on react in the development of my solution. So I'm going to install the npm packages of reactor, so I will say: npm install react and react Dom, that's the save to save the packages in the package.json file and then I will do the same for the types of react. So I will also execute the npm install of add types of react.

A

The same for react, Dom and save Dash Dev to save those packages in the developer dependencies. In my package.json file of the project. Now we can run Visual Studio code and see what we have got generated so go code Dot and the this is the solution generated in Visual Studio code. We can see in the source folder that we have an extension subfolder where we have the notification header subfolder in this one. We have a typescript file which defines our extension.

A

First of all, you can see that in this file we have a class called notification- header application customizer, so the name that we choose for our extension, followed by application customizer, which extends the base application customizer of T, where this T is this interface, which defines any optional settings configuration settings for the extension and then in the on init method of the extension. We simply have a very basic implementation, which is visca folded by the human generator tool, and here we simply have a dialog alert.

A

So there will be a dialog window showing that we are in the application customizer in which we are. Moreover, we have a Json file, a manifest file for the extension, which defines that we have our extension of type application, customizer and few more settings about the application customizer itself.

A

Now we need to create the real solution and in order to do that, we are going to rely on a component called message bar, which is provided by the fluent UI of Microsoft, so by the rich set of components, react components that we can reuse in our Solutions. So in order to do that, let me switch to a solution that I have already prepared, and in this solution we are going to see how you can Implement such an extension.

A

So, first of all, I created a components subfolder in the notification, header and I created a notification subfolder for a notification react component. You see this notification.tsx file that I created. This is a file which extends react.component and which does have an interface to define the properties and the state in the properties. We have a show message: Boolean, which will instruct the rear component to sure not to show the message in the status bar, and then there will be the actual message. As a string Plus in this state.

A

We still have the show message which will be used to dynamically update the status of the notification message in the UI, then using the message bar the message bar button about message bar button type taken from the fluent UI reactly. But here we have in the Constructor of our component that we initialize the show message with the value provided by the initial setting of the layout component for the properties and then in the render method.

A

If we need to show the message, then we render a message bar control of fluent UI, where we Define as the text the message that we find in the properties of the react component and which will also have in the actions a message bar button which will simply on click, change the status of the show message bar. So it will make it false so that it will make the message to disappear, and this is the close button and simply the show message bar will set this data to the new value provided as the input argument.

A

Then, once you have done that in the application customizer, which has been slightly reviewed, you will have to import the notification component and the interface for its properties, as well as in the on init method. Rather than just showing a dialog window like the auto generated code, does we actually have a render placeholders method that we implemented? This is a sequence method which will return just a promise of void, and in this one we can start trying to get a reference to the placeholder that we want to replace with our custom, UI element.

A

So using the context of SharePoint framework, you can talk with the placeholder provider, which is a component available in the context which will give you the try, create content method and the try create content will allow you to provide if you want to get a placeholder for the top area of the screen or for the bottom area of the screen, and also to Define what to do on disposal of the custom component that you will eventually Implement and provide in the top or bottom area of the screen.

A

So the result of this method will be if in it, because it is a try, create content. If any will be an instance of the placeholder reference right here in a variable that I defined in my component as a placeholder content, then, if I don't have a placeholder content, it means that we are not in a context of being able to render the application customizer. Otherwise we can simply create an instance of our notification component and we can render through react Dom that component inside the Dom element of the placeholder.

A

So simple, as that and in the handle this pose, we will simply do the amount of the component rendered in the placeholder and just for the sake of logging, something we log that we did the disposal. So this is a quite simple solution through which you can easily Implement a notification message in the UI of a modern page in SharePoint online.

A

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