Microsoft 365 Community SharePoint, 18 Jul 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Extend SPFx apps across Microsoft 365 - Contoso Retail scenario

Description

In this 17-minute Maker/Developer focused demo, Paolo Pialorsi shows an end-to-end Microsoft Teams personal app with web parts and widgets created with SharePoint Framework. Solution uses SPFx (v1.17). The Dashboard can be rendered in SharePoint Online, Teams, Microsoft 365 Portal, and Outlook.com. Secured Azure functions in back-end. Solution is deployed in tenant’s app catalog. Thoughts on architecture. Step through code and manifest to understand how solution was built. The addition of an ACE extension will be subject of a subsequent demo.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on June 6, 2023.

Demo Presenter
• Paolo Pialorsi (PiaSys) | @PaoloPia

Supporting materials
• Documentation – PnP/PnPjs home | https://pnp.github.io/pnpjs/
• Sample - Contoso Retail Dashboard | https://adoption.microsoft.com/sample-solution-gallery/sample/pnp-spfx-reference-scenarios-samples-react-retail-dashboard/
• Article - How to use SPFx powered Microsoft Teams apps in Outlook and Office | https://pnp.github.io/blog/post/spfx-08-spfx-powered-teams-solutions-outlook-office/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

A

A

You a few things about a demo that we shared a few weeks ago in Las Vegas and then in the European collaboration Summit. That's me so I want to save time. I just want to say you follow me on Twitter.

A

If you like, And, subscribe to my YouTube channel everything else, you can read it by yourself and let's move to the actual content of this demo, so just to set the context of what we want to share with you and show you is a demo of a dashboard for an hypothetical contoso retail company which works in the fashion Market, because what else I'm From Italy.

A

So what else and well the idea is that contoso retailer wants to have a dashboard to do monitoring of sales revenues and returns of products as well as they want to be able to access some of this information from a mobile device.

A

So we created a a full demo solution where you can have a teams based UI through a personal app in teams as well as you will shortly see that we can also see this solution running in auto.com and in the Metro 55 portal.

A

As well as with an extension for Microsoft Viva, which will recover in one of the future Demos in these calls so from a technological scenario, we are using SharePoint framework in this solution and we are using spfx just because nowadays and since version 117.x of SharePoint framework, we can really easily host uh spfx web Parts, not only SharePoint online and in teams, but also in the Microsoft specified portal and in outlook.com and I said that this solution is a full solution that you can inspiration from and in fact, at the end of this presentation, you will also see and have a link to download the source code of this demo from GitHub and in this sample solution.

A

You can also find a back-end infrastructure based on an Azure function that you can host or whatever you like, and you will be able to see how you can define a proper architecture for a shuffle framework solution to consume such a backhand API. So stop talking and let's move to the actual Demo First of all. Let me share with you how the demo looks like in the end user experience. So this is the contoso retail dashboard running in teams.

A

As you can see, this is a nice looking UI with a bunch of reports and graphics and charts to let people evaluate how the retail company is performing and you can switch across different tabs in this personal application of teams. So in fact you can see here we have an icon to activate our personal and we can go through all of the tabs that we created and we can browse through the products that we have in our product inventory.

A

It is interesting to notice also that this is a SharePoint framework solution, but it is multi-tab as like as any other team solution, and I will explain you how we did it and you can also make it configurable, even if it is a personal Apple.

A

In fact, we made it possible to click on a setting our gear icon and configure the app to work either with a set of mock data just to speed up your learning process when you want just to play with this demo without any external dependency, or you can eventually disable the mock data and consume an external API which will be the rest API hosted on in Azure function. That I was talking about before.

A

What is interesting is that this dashboard can also be used inside outlook.com and in fact nowadays, if you click on the more apps button, you can find additional applications, including your custom applications, and here you can see the contoso retail dashboard running inside the outlook.com application. So this is I, think really powerful, because your end users can use your application wherever they are more comfortable to work with and in fact the same happen if they are in the office portal or in the micro 65 important.

A

So if they go to www.com365 sorry.com and they click on the apps right here, they can still find the same application and they will be able to see inside the wireframe of the max35 portal, the same app running with exactly the same set of functionalities. So this is really really powerful. So now last thing I want to show you through the browser and then I will switch to visual studio code. As you can see, this demo is deployed in the app catalog of my tenant.

A

As you can see right here, this is the application and from here from the modern and new UI on web catalog, we can easily see that this application can be executed on SharePoint on teams and does also have an extension for Viva connections which I will not cover in this demo, but eventually in a Future theme, so switch to visual studio code. Then, let's start talking about how we created this solution, but first of all it is a regular SharePoint framework solution.

A

So you simply do yo at Microsoft SharePoint, and you do this scaffolding of your Solutions. Once we have done that, you can create as many web part as you like in your solution, for example, and let me briefly switch back to the UI you can see here. We have three tabs at the home, the dashboard and the inventory, and here we have precisely three web Parts, the retail dashboard retail home and retail inventory, which are the three tabs that we see in the team's solution or in the Outlook or office portal solution.

A

Let's focus on one of them, because it's all the same story for all of them, for example the home one in the home web part. We just have a really regular SharePoint framework or part, and inside this web part we render a react component which will do the actual rendering of the UI of our tab inside of the personal app.

A

What is interesting, however, is that in the Manifest we declare that we supported hosts are not only the SharePoint or Park hosting model, but also the team's personal Alpha and the team stub and okay in this one. We also have the SharePoint full page. But what really matters for our damage that we are going to support the hosting of this webpart inside Microsoft teams as a team's personal app, then inside the themes folder that you get scaffolded in every SharePoint framework solution that you create with the human generator for SharePoint framework.

A

You also have the teams folder in which you can create a manifest file for teams. That's what we did here so here, I'm using version 1.16 of the team smile investor and in this one aside from the definition of the icons that I want to use and the description and name for my custom teams.

A

Application I also have the static tabs section and in this one I have the three tabs, which represents the home, the dashboard and the inventory yeah tabs of my personal app and, as you can see right here, every single static tab does have a URL which is dynamic based on the hosting tenant. But at the very end in the right part of the URL.

A

There will be a component ID, which will be provided as a query string parameter to the teams.spfx SPX file, and this ID is nothing more than the GUI that we have in the web path.

A

For example, let's still focus on the home one here we have the unique ID of my web part, so basically, in this manifest file, I'm simply declaring that every single tab with its own entity ID, which is the part we see right here when we browse to any of the tabs in my personal application, I want to render one web part or the other or yet another one. So that's really simple: once you create such kind of manifest.json file, you can create a zip file, including the two icons and the Manifest.

A

You can call it teams spfxapp.zipple and when you will do the bundle and package of your sharpen framework solution and then you will upload it into the app catalog. The server side infrastructure of SharePoint framework will be able to understand that there is a custom zip file with the custom manifest and we'll use it to do the actual provisioning of the team's application inside the team's catalog of apps to make your application available in teams and also and automatically in outlook.com and office.com. So the whole process is I, think really straightforward.

A

You simply create your work part you configure a manually defined manifest. You create the zip file you deploy and package the solution and upload it to the app catalog and when you will do that, you simply say: okay make it available in teams which means in the app catalog. When you select any of these, you can do the other two teams, or you can simply select to sync the application to teams when you upload it the first time into the app catalog.

A

So that's the very basic story and I think it is a really powerful story. Now. That said, let me dig into the demo a little bit more and let me explain you why uh something like five minutes ago I said that this is a solution that you should take inspiration from, and the reason why is that this is not just.

A

Let me say, fake demo, that you can use just to show that you can do something nice, you know, but it is actually a real demo of something that you can do in your real production environment with a proper architecture.

A

Definition in fact go back to visual studio code and let me dig again into the home web path now, with a little bit more of details, for example in the on init of my what part I rely on a pattern that we have in SharePoint framework, which allows us to have a set of service classes that we want to use to consume external services or functionalities, and in this solution you will find the services folder in which you can see.

A

We have an abstract definition of a setting service which we can use to load and save the settings for our personal application.

A

Maybe you know, maybe not but I'm, going to tell you that when you create a static tab in teams that static tab is not by default configurable, and that's the reason why, in teams we have the configurable tabs, which are those that you use in a chat or in a channel, and then we have these static tabs, which are those that are by default, not configurable.

A

However, in this demo you can see how you can still make it configurable and in fact, as I showed you, you have a gear icon, that you can press and you can configure some settings whether you are in teams or in Outlook or wherever else you are hosting Your solution. How do we do that?

A

Well, we have a an abstract setting service and we have a concrete implementation of the setting service where we use pmpjs, which is uh like always really useful and powerful, and with p and PJs, we simply rely on the storage entities that we have at the tenant level so that we store inside the tenant these settings for our personal application, which also means that we have in this sample the experience of an administrator who can configure the personal app with the settings which will be shared across all of the users.

A

What I mean is that in administrator, like I, am right now will have the gear icon and will be able to configure the personal app any other user who is not an administrator, will simply get the personal article properly configured with these settings defined by the administrator, and to do that, we use an external service.

A

This one, this setting service, which will simply rely on the service scope pattern of Sharpie framework so that in the web path we can say please dear spfx, context here, because we are friends, the RSP effect context through the service scope. Please let me consume the setting service. I will get back an instance of the settings. Service and I will use it to load or to save the settings, and the same happens for the service that we use to load the actual data that we show.

A

So, for example, we can say if we want to use mock data. So in the settings we Define to use mock data, we rely on a fake retail data service instance or if we want to use real data, we use the retail data service, which will rely on an actual rest API, which we are going to consume from our application.

A

But we don't have any of the complexities of consuming the rest API inside the web part, but actually inside an external service that we rely on, and this is a better architecture, if you think about that, because you can share this kind of service across multiple web Parts. It's like as we doing right here, where we share the same services in the dashboard in the inventory and in the home. So this is just to give you an idea of how you should Define and structure the architecture of your solution.

A

Then, in the retail home react component, which is the one in charge of rendering the actual UI of our Home tab. We use the dashboard component, which is provided by PMP in the EMP react controls for SP effects, and this dashboard control gives you all the plumbing out of the box, ready to be used to create a dashboard so that you can simply focus on implementing every single widget. That makes up your dashboard. So, in my demo again, this is the return. Volume is a widget.

A

The current inventory is another widget, and so on so forth, every single widget is just based on a dedicated react component that we can share across multiple tabs if needed. So again, we have a modular architecture based on a bunch of react components in a hierarchy of components and what we do whenever we create.

A

Any of these components is to provide them the actual instances of the data service and of the settings service so that they know how to do and what to do with those services in order to read and write data and to render data in our render. So this was just to give you an idea of what you can do when you want to create a real solution in SharePoint framework with a proper architecture.

A

You can find the solution on the samples gallery that we were talking about at the beginning of this meeting and in the next slide that I'm going to show you before closing. You can also find a QR code if you want to go straight there without writing the URL. So in the upper link you have the demo source code in the lower link.

A

You have a blog post that was written by Visa a few months ago, which explains you the details about what we have just seen from a hosting perspective or a SharePoint framework web part in teams, outlook.com and office.com and I think that's all for vs. Well, so thank you and back to you, Visa.

A

Excellent excellent good to see the crowd going wild as well.