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

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Transform SharePoint add-in dialogs to SharePoint Framework Dialogs

Description

This module explains you how to transform you code from classic SP.UI components to render dialog windows to the modern SharePoint Framework Dialog Framework, in order to build modern dialogs fully integrated with the modern UI of SharePoint Online.

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=ipqQiJ_MbNM&list=PLR9nK3mnD-OXJLA29Q0Xk7psbAUqzQZwe&index=10
⬅️ Previous video on this series - https://www.youtube.com/watch?v=-pivUEMMZVg&list=PLR9nK3mnD-OXJLA29Q0Xk7psbAUqzQZwe&index=8

#Microsoft365 #DialogFramework #SPFx #SharePointFramework #SharePointOnline

In this video, you will learn about

- Transforming classic dialogs to modern dialogs
- Using React to build the UI of dialogs
- Using the Microsoft Fluent UI to easily build the UI of dialogs

📖 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
0:56 Upgrading from classic to modern dialogs
1:40 Demo
3:40 Understanding the modern dialog code

📝 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
• Microsoft Fluent UI - https://developer.microsoft.com/en-us/fluentui
• Use custom dialog boxes with SharePoint Framework Extensions - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/extensions/guidance/using-custom-dialogs-with-spfx

💡 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 upgrading from classic dialogues to Modern SharePoint framework dialogue framework. Just to set the context initial pointerly model you were able to create dialog Windows using the sp.ui.model dialog or using the sp.ui.star types in the modern development world.

A

With SharePoint framework, you can rely on the SharePoint framework dialog framework, which is based on react, components that you can customize and create of your own and which allows you to create also nested dialogues with the parent child relationship, and it will allow you to rely on the out of the box. Fluent UI and micrograph toolkit react components provided by Microsoft.

A

In order to upgrade from the classic dialogues to the modern dialogues of SharePoint framework, you will have to create a new solution and you will have to rely on a new web part or extension in that modern solution. Then you will also need to add a reference to the npn pack package of the SharePoint framework dialogue framework, which is called add, Microsoft SP dialog.

A

Once you have imported that package in your solution, you can simply Implement a react component to provide the actual implementation of your dialog window, and then you can show it on the screen. Just to give you an idea, let me move to the demo environment and let me show you how to do that in practice.

A

Imagine that you want to create a dialog inside the SharePoint framework solution. Here you can see a sample, a part that you can use to test the behavior I'm talking about. So we have a button. We can click on the button and we see a dialog window through which we can provide some information like a description for an hypothetical task that we want to create and a date and time that the task will be due to so we can click on the create task and we will get back a feedback about what the user selected.

A

So, let's see how we can Implement such kind of solution with SharePoint framework. First of all, you need to create a SharePoint framework solution, and in order to do that, you can find detailed information in the article associated with this video Once. You will ask a full edition.

A

You will need the to install the npm package of add Microsoft SP dialog, which is the one that includes all of the artifacts and all of the types to work with the SharePoint framework dialog framework, once you have done that, you can, for example, rely on react like I'm doing in this web part. So here I have a web part a very basic one and in the render method of this web part, we create an instance of a show.

A

Dialog react component that we have in our solution and that, of course, you will find associated with the article and the video you're watching in the show dialog the SX component, which is just area component. In the render method, we have a primary button of fluent UI, which is the one that will show the actual dialog through the create task function in the underscore create task function, which is in asynchronous partner.

A

We simply create a new instance of a task dialog providing some information, some settings through the Constructor to dialog, and then we say show, which is a method provided by the dialog that we have implemented. The task dialog is the actual interesting part of this video. In fact, the text dialog is yet another react component, as you can see from the dot TSX extension, and we have a task dialog, which extends the base dialog type provided by the SharePoint frame or diagonal framework.

A

In this one, we have a Constructor where we configure what to do on Save and what to do on close without saving as well as we set through the super Constructor that this will be a blocking dialog. Then, in the render method of this dialog, we simply render the task dialog content component, which is still defined within the same source code file, and we have additional functions defined in these task dialog component.

A

In order to handle the save and the close events in the save, we will call the close method provided by the user, creating the dialog with us dialog control, and then we say on Save, while on close, we still close the dialog, and then we say on close to notify the rear component about the closing of the diet book. What is really interesting now is to see how the test dialog content is defined. Well, the task dialog content is just a simple react component with the set of custom properties and state in the custom properties.

A

We simply have the definition of the on Save and on closed method in the unsave. For the sake of making an example, we have the description and the due date selected by the user in the on close.

A

We don't have any input argument and in this data we simply keep track of the information provided by the user through the UI so that in the Constructor we of the task dialog content, we initialize the state, then in the render method, we use a dialog content component, which is provided by fluent UI, and this component allows us to define a title and what to do on this missile of the dialog content.

A

Then we have the actual body of the dialog content and we have a dialog footer, which is still and again a fluent UI component, which will Define the rendering of the lower part of the dialog window. In the lower part, we will have the default button to cancel and the primary button to save, to create the task on cancel. We will trigger the on closed property of the dialog content component.

A

While on clicking on the primary button, we will trigger asynchronously the on Save method, providing the selected description and due date selected by the user in the body of the dialogue content. We just have some fluent UI components like the text field and the date picker field to build the UI that you have just seen in the SharePoint online UI.

A

By doing that, and thanks to the fact that the base dialog type already provides methods to show or to hide the dialog, we can really easily render a dialog and show a dialogue in blocking one in this scenario, through the UI of SharePoint framework in our modern solution.

A

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

A