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 add-in UI Extensions to SharePoint Framework List View Command Sets

Description

This module introduces you to the development of SharePoint Framework Extensions of type List View Command Set as a replacement for classic UI Extensions.

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

#Microsoft365 #SharePointFramework #SPFx #Extensions #SharePointOnline

In this video, you will learn about

- Creating SharePoint Framework Extensions
- Building List View Command Set with SPFx
- Using the SharePoint Framework Dialog 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:23 Transforming classic UI Extensions to SharePoint Framework Extensions
2:10 Demo
4:32 Understanding the SPFx generated code
7:02 Digging into the SPFx UI Extension for List View Command Set

📝 Learn more
• YouTube playlist for this video series - https://www.youtube.com/playlist?list=PLR9nK3mnD-OXJLA29Q0Xk7psbAUqzQZwe
• Build your first ListView Command Set extension - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api
• 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

Model UI extensions to the new and modern SharePoint framework extensions, just to set the context that in the sharepointally model we used to create the so-called UI extensions, which were useful to add additional commands to the common bar of a list or of a library in SharePoint, as well as to extend the ECB or edit control block menu with custom items again for a list item or a document in a document library with SharePoint framework.

A

Nowadays in the modern UI, we can create extensions of type list view Command Center, which are really powerful and can rely on react on the fluent UI and on the micrograph toolkit. Just to give you an idea. This is a use case of an extension. A UI extensions are built in the classic UI on the left side, and on top of it you can say how it behaves a list view command set built with sharpen framework with MGT and react.

A

As you can see, the UI is really smaller and better if compared to the classic One. How can you do that in your own Solutions? Well, there is no conversion tool, so you will have to create a new SharePoint framework solution of type extension, and you will have to choose to create a list view common set.

A

Then you will need to replace the client-side code built with JavaScript that you created in your old sharepointed in model extension with new typescript code, which will rely on the SharePoint framework development model and eventually we rely on the SharePoint framework dialog framework and on fluent UI and micrograph toolkit to build a better looking UI experience for your end users. So let me move to the environment, and let me show you how you can do this transition in practice.

A

Let's say that you want to implement a custom command for a document or a list item in a library or a list. So, for example, you want the user to being able to select a Target item, click on a comment in the comment bar and see a dialog with some custom information like, for example, right here we see details about the selected document. How can you implement such kind of functionality using SharePoint framework and the modern development?

A

Well, first of all, you will need like always to use the human generator for SharePoint framework in order to create a SharePoint framework solution. The name of the solution could be whatever you like. It will have to be an extension and the extension will need to be a list view common set type of extension.

A

As the name of the extension you could use, for example, document details. It will start this scaffolding of the solution. It will take a while and it will create all of the source code reference files as well as it will import all the npm packages needed by the solution and just to save some time, I will fade out and fade in waiting for the packages to install.

A

And their resolution is a fully scaffolded now, before opening with Visual Studio code, the source code of the solution, we need to add some additional npm packages. For example, I am going to use reactor and the Microsoft graph toolkit as a set of react components, so I'm going to install MGT for SharePoint framework as well as MGT for react and the react and react. Dom components I'm also going to save those packages in the package.json file of the solution once they will be installed.

A

I will also install the types for react and react: Dom saving the packages in the packages and file under the dev dependencies section, and now that the packages are ready. Let me install also the types for those packages and once I've done, that we are ready to open the solution in Visual Studio code, and here we are so code Dot and let's see what we have got generated by diska folding tool.

A

Well, first of all, we have on the source folder the extension subfolder and the document details subfolder, which implements the actual extension. We want to dig into if I open the typescript file. For the extension, we can see that we have a file which defines a Class A document details, common set, which inherit from base list view command set of T. Verti is the type of the interface defining the configuration settings for the common set in the on init method of the common set.

A

We simply have the logic to try to get one sample command in the common bar or in the extended ECB menu of the selected item and to hide it as well as we have the registration of an event in case of any changes in the Target list.

A

This common one key that we see right here is defined in the Manifest of the common setup, where we can see that this extension is an extension of type list view common set and we have a list of items which will Define all of the commands that we want to make available to the end user for each command.

A

We can have a title which will be the string users will see in the UI, as well as an icon, which can be an explicit file or can be an encoded base64 of an image just to avoid having a dependency on a file, and this one is always common. So back to the source code. Here we say that on list view, State changed so whenever the user will interact with the list View and will select something, we will simply see if we need to activate or deactivate or enable or disable one of the commons.

A

So here we try to get our common one and eventually we will make it visible. If the number of selected item is just one, then, when the user will click on any of the selected command, the on execute function will be triggered, and in there we will get an event object in the item.

A

Id of the event, we will be able to see what the command selected by the user is, and we will be able to do our custom logic to implement our own custom logic to handle the event now in a real solution which I have already created. We can do something like that. So let me switch to the solution that I showed you before here. We still have the extension as like as before, but in the Manifest file. We just have one item the doc details item.

A

This is the description and the label that the user will see in the UI, and this is the base64 encoded PNG of the icon. That I want to use for my command and then in the comment sector. I have the same logic as before in the on init. I have the logic to disable the dog details by default, but I also have the initialization code of the Microsoft graph toolkit.

A

If you don't know about MGT, you can find in the links in this video additional details about how to dig into developing solution with MGT micrograph toolkit here, I simply register ngt to use SharePoint. So that it will rely on the SharePoint security context to access Microsoft graph under the cover, then I have the same logic as before. On the on this views. They changed and unless you stay changed. If a one item is selected, I will enable a button, then in the doc details when on execute of the doc details.

A

I will simply retrieve from the context of sharpen framework some information about the selected item and about the site and the tenant in which I am so that later on, I can create a react component which will actually render the dialog on the window and I can simply show that dialog window. In fact, I rely on a custom function that I created, show document details. Dialog I provide all of the information about the selected item and, as you can see here, I can get through the event the selected rows.

A

I can get the selected item in the array of selected rows. It's an array in case you have multiple selected items and I can then get information about the item. Url about the item ID and stuff, like that, so the show document details dialog, will simply create a new instance of a document. Dialog react component and show it on the screen. There is an article in this series of articles about how to create dialogue, windows with SharePoint framework, but just for the sake of completeness, the dialogue itself is inheriting from the base.

A

Dialog of the SharePoint framework dialog framework in the Constructor I get all of the settings about the selected document and then I render a document details.

A

Dialog content, which is a rear component defined right here, as you can see, it extends react.component and in the render method of this react component I simply render a dialog content from Office y Fabric or fluent UI, and here I render me file control from MGT, so that this control with the site ID and the drive ID and the item id will do the actual rendering of the information panel about the selected file.

A

If you want to run the solution, gulp server, you will be brought to browser and from there you will be able to play with it 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 for watching this video foreign.