Microsoft 365 Community Community Demos, 6 Apr 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: A SharePoint document generator as Microsoft 365 app with SPFx

Description

In this 16-minute developer-focused demo, Markus Möller shows how with this Microsoft 365 SPFx app, you can generate template-based Offer documents with custom meta data from within Teams, Outlook, Office, and SharePoint. The “Offer Creation” app shows up in the Add Apps menu within M365 products because it was installed as a personal app in Microsoft Teams. Templates created from M365 apps are stored in the same “Offerings” document library. Review key code elements and configuration.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on April 6, 2023.

Demo Presenter
• Markus Möller (Avanade) | @Moeller2_0

Supporting materials
• Article – A SharePoint document generator as Microsoft 365 app II (SPFx) | https://mmsharepoint.wordpress.com/2022/12/28/a-sharepoint-document-generator-as-microsoft-365-app-ii-spfx/
• Article – A user configured Teams personal app with SPFx web part | https://mmsharepoint.wordpress.com/2023/01/02/a-user-configured-teams-personal-app-with-spfx-web-part/
• Sample - Offer Creation | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-office-offer-creation
• Documentation - Extend Outlook and Office with the SharePoint Framework | https://learn.microsoft.com/sharepoint/dev/spfx/office/overview
• Demo - Extend Microsoft Teams apps across Microsoft 365 (Outlook and Office) - Markus Möller (Avanade) | @Moeller2_0

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

Document generator realized as a full, complete Microsoft, 365 app based on SharePoint framework, but first a small introduction about me. My name is Marcus Miller I'm, a Microsoft 365, developer expert I work for avanade in Germany and I'm, a Microsoft MVP for Microsoft 365 development. So it's right- and this is directly hand over to my topic, because today I want to show you something about real Microsoft, 365 development and, as usual, let's directly jump in to My Demo.

A

So what I want to do is I want to generate a template based offer document with some custom metadata in various Microsoft 365 products, starting with the teams app.

A

Pick off my teams app get a nice little form enter some data.

A

Pick up date, let's pick a price.

A

Also manipulate it here if we want select the vat head and.

A

Let's enter some text: okay, the part the typos doesn't really matter today, kick it off, and once we find a link to the document right here, you can directly also show the result should be in my offerings Library and there we are. We can also see already some metadata in the in The View.

A

We can also see something here we just entered. We can open that file. Unfortunately, the problem is this regularly opens in office web app and office web app is not able to support directly showing up some custom metadata.

A

Therefore, we need Microsoft Word s desktop application and there we are yeah a simple document. Template opened with our metadata and that's it now we can continue. Of course, we can correct something here. We can continue to work. I also have an Outlook about something to review, but this is another story not today. That's uh the document created here from a teams. Application realized with SharePoint framework.

A

In that way, we can nevertheless also switch over to our next application. For instance, we can go to Outlook there. If you didn't realize. We also have an add button and we have write the same application available here just because we installed it as a personal app in Microsoft teams.

A

We can open it yet as well and two exactly the same thing. Don't want to bother you too long. Therefore, I make it quite short.

A

Read that offer directly refresh there. We have our second demo.

A

The third option we have is I'm doing it from here is Microsoft 365 or former Office 365 platform, where we also have apps available and to our surprise here the same app offer creation realized with SP of x is available as well. If you want me, I think we have some time. We can do it once again.

A

Make it a different.

A

A

Works like a charm as well. Where was my diary already there? Now you might wonder how uh do I know that I have to write all the documents to exactly this document library in my offerings, SharePoint site?

A

This is the part. I will switch back to teams here. This is about the configuration configuration. Of course you can do in in your app host uh in your app settings, whatever you do, but you can also do it personally so for each individual personal application- and this is realized with a second simple SharePoint framework web part- which you find here on the settings- and here is my set URL to um to the site, which I just showed you with the content.

A

How is this realized? This is realized with the so-called personal app configuration via OneDrive and therefore I created the graph endpoint I created a storage location in the apps folder. Here we have the application name and in case of SharePoint framework, it's always the SharePoint online client extensibility web application principle, because this is the app ID or the Enterprise application behind the MS graph client in SharePoint framework.

A

Beyond that, we have the possibility and I took that um to create a custom, folder or even the custom folder structure, if we want I choose create offer here- and here is my settings Json, which I stored here from the settings file- and here you have the final configuration file that boss everything from today from My Demo front. Now, let's illustrate how this works.

A

The bad thing is, which kind of possible scenarios do we have for those kind of Microsoft 365 across apps. You have seen a personal teams, application realized with SharePoint framework, and this is also available a bit different, but as I have a web part already in place, I could also I did not show this, but I could also render this, of course, in SharePoint as a web part on a page or as a single page, application would work the same way.

A

So in fact, it's available on four different products on teams Outlook and offers respectively, Microsoft 365, as shown and in SharePoint S1. You can achieve the same with the table's native application. I already showed a sample I think the first day before Christmas and I will have another one, but come to that later and additionally, in that combination, you can also use search-based messaging extensions out of those teams apps. It is not possible in SharePoint framework right now, um and this is why I couldn't show it today.

A

What do we need to realize this? The first thing is, we always come from a teams application and therefore we need a teams manifest and in detail a manifest version, 1.13 or above and what's also already highlighted here. Although it's only an icon is what's necessary, is the webpack ID which you can find in the webpod Manifest file?

A

We have two static tabs here, as shown, we have the offer creation itself. This was the form where I entered my data and we have the settings.

A

um This is the second static tab here, and this is realized by a hidden web part, because the setting makes settings web part makes no sense on its own. It makes only sense in combination with this teams, application.

A

Asset from the URL, which is quite quite long here in the content, URL, so I put it here a bit uh a bit broader needs to contain those web part ID, and the webpart ID, as you can see at the bottom, is originally included in the back part manifest file.

A

The second thing- and this is a bit outdated slide here as we've just seen- that SharePoint framework 1.17 is available. This sample currently is realized based on 1.16, which did not support manifest files, automatically of version 1.13 or above even so I had to package and deploy that stuff manually, and this team's application always consists. The two icons and the Manifest file, where I was showing you an extraction on the previous slide. So what I'm doing is I, zip, those three things and upload it.

A

It's always good to know how this works manually, but I think I did not check it, because it's only available since two days, but I think this should now already be possible with a synchronized to teams button you might know which is available from the SharePoint app catalog, so we've seen manifest. Five of our teams is important, but what's also important most of the time in those Microsoft 365 across apps. This is teams JS SDK version 2., because with version 2, we are able to use the context and some specific things in a formal sample.

A

Yeah I did not do that. I did not show you that apps can also look different based on the host yeah, so it can look a bit different in Outlook than in teams than in Microsoft. 365 I did not realize this year, but this would be possible and I showed this in a previous sample when you want to Google it for that it was uh I.

A

Think from from the last day before Christmas, but I'm doing here is first in SharePoint framework context, I'm checking if I have a Microsoft teams, SDK available and then I know I'm running in teams, office or Outlook.

A

Otherwise, and you see this at the bottom, is I would run in SharePoint directly, so I could act different here and point out also SharePoint. The second thing: what I'm using here come on?

A

Yes, here, I use this whole called team site domain and the team site domain is only the domain name of my SharePoint tenant and this I need to know to get, for instance, to get to the app catalog and when I need the app catalog to further continue with the graph endpoint I was showing you about the custom configuration.

A

Another quick point out is the URL I'm, using behind the scenes by the way I'm using SharePoint rest API and here I point out how to get the template. That I was using, so I was simply using a standard. Word template uploading it uh via um yeah, while you can upload it via UI. You can also achieve this with pinp provisioning.

A

um I was showing also this in the blog post, the blog post. You will later reach out from my resources, and this is the API I'm using here, because this is the template is stored in the hidden folder called slash, underscore CTS and then based on my site and my list. Last, not least, how does the shown Personnel app folder configuration work, the endpoint you can see on top and the endpoint consists of several things. First, we have the link to the personal user's OneDrive.

A

Then we have a special app folder and then my in my case, it's a special approach. This is the endpoint and this results in the subfolder apps and this folder name of the application ID, which is in our case this long SharePoint, online client, extensibility blah blah the next part. The third one is my custom. Folder I choose to identify, because this is my application, the real name of the application, which is smart, because, of course, I could have many many SharePoint applications. It was a shame, application principle and last not least, file name.

A

This is the settings Json and below your occupancy directly. The content that I was using this for explanation of the current solution here. Finally, some resources- I wrote two blog posts about this. Specifically the third one is also about the mentioned PNP provisioning of this template folder, it's linked in both of them as a series.

A

The sample code is also available in the PNP Repository and last, not least, the Microsoft documentation on SharePoint framework applications as Microsoft 365 apps. So normally, this kind of resources is always my last slide, but today is a bit different. I want to try something new, so I have a small Cliffhanger for you, because, as I have shown you, there are many more options on Microsoft 365, e-cross apps. So I want to point out for you.

A

The next Thursday in the general Dev application call I will show you the exact same app realized as a yo team solution, looks slightly different because here I'm, using the out of the box available from your teams at least fluent UI react Northstar controls, but it looks quite the same, but would be a bit boring to only show you exactly the same. So I will additionally show you some additional capabilities.

A

So I also realized a search based messaging extension there who will review and publish those created documents, so I have some metadata manipulation based on adaptive cards and then last one is of course I will compare both approaches. What are the pros and cons of working with SharePoint framework? Well, this team's native applications, like your teams or teams, toolkit I, hope you will join me once again and yeah normally I'm a bit of kind of an understatement, but maybe it's pointed out with a yeah blinking eye.

A

um It's not really the best our reasons you use your illusion one and two, but I hope it's a good one. Thank you for the listening. Thank you Marcus. Thank you and great demo. Like always,.