Microsoft 365 Community SharePoint, 23 May 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: A SharePoint document generator as Microsoft 365 app as Microsoft Teams native app

Description

In this 13-minute developer-focused demo, Markus Möller focuses on Option B - use a single app to generate, publish and review template-based documents from any Microsoft 365 product - Teams, Outlook, Microsoft 365, SharePoint, with ONE Teams solution. Last week, Option A generated a document using SPFx. This week, Option B uses yoteams (native app) not only for generation, but also enables publish & review (using search-based messaging extensions). The Option’s evaluation criteria considers hosting, authentication, and privacy.

This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on April 13, 2023.

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

Community Call Conversation
• aka.ms/Apr13-Demo1

Supporting materials
• Article - SharePoint document review in Outlook or Teams | https://mmsharepoint.wordpress.com/2023/02/07/sharepoint-document-review-in-outlook-or-teams/
• Article - A SharePoint document generator as Microsoft 365 app I (yoteams) | https://mmsharepoint.wordpress.com/2022/12/28/a-sharepoint-document-generator-as-microsoft-365-app-i-yoteams/
• Sample - Offer Creation (yoteams) - Microsoft Teams App | https://github.com/pnp/teams-dev-samples/tree/main/samples/tab-office-offer-creation
• Documentation - Extend Teams apps across Microsoft 365 | https://learn.microsoft.com/microsoftteams/platform/m365-apps/overview
• Demo (Option A) – A SharePoint document generator as Microsoft 365 app with SPFx – 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

B

Document generator. This is the second time because last week, I was already presenting a similar app in the SharePoint framework version. But today we are talking about a real teams application, but it's still usable across various mem365 products, and we have some additional capabilities.

B

Of course, today, quick intro about me, my name is Marcus Miller I'm, a Microsoft 365 developer expert for abernard in Germany I'm, a Microsoft MVP since 2021, and you can reach me on Twitter or via my blog and quick ratio, and also an introduction into the different scenarios for those Microsoft 365 across apps. We can render the same app or slightly different on various products, but it's only hosted once and we can do this. For instance, with a personal app and last week, I showed you how to do this with spfx and today.

B

I want to show you how to do this with a team's native, app I call it this way, because it could be either yo teams app or teams toolkit app. And additionally, what I can show you today and I there I will concentrate on is that we also have the capability of search based messaging extensions to enrich our compose box in either teams or Outlook, and this is where I will introduce to the document generation review process.

B

So let's kick the demo off and only very quick I will show you uh something similar and last week last week, I was presenting you, the spfx office generator today, I show you this one in teams, it's slightly different, because here I'm, using the out of the box available fluent UI react not star controls instead of the normal, fluent UI controls last week, and then I quickly enter some dates here.

B

Come on, but also Enterprise same lag here. You can also manipulate it. That way, we have a vit and we have a description. We don't make it too long today, because we want to quickly rush through here. Kick this off document is generated, a link is there. I can already also directly jump over and show you that guy here, it's our pnp4 demo, um not yet visible in word, but we can see our metadata here. We can also quickly open it here.

B

Are the web access does not show the metadata and I'm skipping today open it in word um value in what desktop app, you will directly see the metadata included as well.

B

We can render the same app in Microsoft Outlook there we have an app button. We have our offer creation, your team's version- and here we have this same app and I skipped to add another document, but I will quickly show you the third option.

B

This is in Microsoft 365 there. We also have apps, and we also have our personal apps here- the spfx version from last week and the offer creation new teams from this week- and this is the document generator now, let's jump and therefore we can close this um now, let's jump to the second capability, the search based messaging extensions. So when we have installed the app and also added the app to a specific team, we have a search based messaging extension here or in fact they are they're.

B

Even too we have the review and the publish one. Let's start with the review thing and let's maybe pick a document from last week.

B

You can pick it and we have it here as an Adaptive card with jumping over a bit.

B

And this is already no. This was the review dock. Sorry I picked the wrong one. Let's simply do it again come on.

B

Let's check that one from today we have to send the message. First, then we could this in a reviewed state and with universal action model of adaptive cards, it's directly updating and showing up the review date. We can also quickly check uh the metadata here that we have also our review date, which was just ended um during this process, the same Works in Outlook in Outlook. We jump back to our mails, and here we can create this in a new mail. So we have in our compose box.

B

We click apps. We find our your teams generator and now I show you also. Maybe you haven't seen this so often. I was also not aware of that. This is possible. Till I checked it out. Here we have the possibility to even have two search base or more search based messaging extensions, so we can switch here from the review one to the publisher one and for this process, I directly classified my documents as review, and this is currently in public preview. So I have to send it.

B

Unfortunately, to myself, because I'm the only developer preview user sent the message to myself.

B

Go to occur, my inbox yeah, then I can click on publish this takes a bit longer because publish is not only at metadata modification. Normally, this should work in a way that it's uh updating the file, also as a PDF on the ring. What gets wrong here, at least we have a submit date here. We have an offering submitter and what might get wrong here.

B

What I, also try to do is no that's also fine, so I wonder where the error message comes, but this is also what I wanted to achieve that I not only set the document to publish in terms of metadata I also want to have the final PDF document, and here you can also see the metadata inside I'm using a simple Office document template here.

B

Of course, this can be done much prettier than I did these were the capabilities to show you today and here the additional ones in terms of adaptive card and Publishing, which is not possible that way with SharePoint framework, so I couldn't show last week, but now, let's flip and quickly, introduce you how this gets realized. The first thing once again, is uh the SSO part for the tab. Application um I already showed this slide a while ago, but I want to stress this once again when you achieve SSO in a teams.

B

Tab, please please do everything you can in the backends OR server side. So the only thing what you should do client-side is get a bootstrap token, which is only the identity token and then shift it to the server together with the information. What you want to do, and finally only retrieve the final result- and this is what I'm doing in my tab application so like generating the dock here.

B

So once again, do not do anything else, client-side what I'm additionally doing here I'm using behind the scenes, because I'm coming from the SharePoint framework sample as well I'm using behind the scenes most of the things I'm using SharePoint, rest API, and it's simple it's it's quite easy, also available that you use teamstop SSO with the SharePoint rest API instead of Microsoft graph, and what I'm doing here is I'm, simply retrieving the site domain from my context and then I'm constructing from the site domain, the scope.

B

So I do not have a graph microsoft.com default or something like that. I have a yeah, Marcus, Miller sharepoint.com, all Sites right, something like that scope and then I directly get a token which I can use against the SharePoint rest API.

B

The second part is um the the SSO for the bot, which is lies under the messaging extension, and here I want to quickly introduce you what happens um for the sign in the sign in is handled with the bot together. Therefore, you need to establish a graph connection which you see on the right side in your Bot there. You have your client secret, your client, ID and aor token exchange well, which is the the endpoint URI and also the tenant ID, is necessary in this. Here.

B

I use a graph scope for this by the way- and this is a connection which you establish in your Bot configuration and in code, you try to receive a token response, and if you do not have one, then you send back is simple window which looks like this, that the user has to sign in and consent this app, and this happens most of the time this happened.

B

Only the First on first usage, what's important to achieve those teams, applications and then extend them as Microsoft 360 pipes, apps I cannot stress this enough is we need to have a teams manifest version, 1.13 or above and then in the first part. Here we have our simple static. Personal tab called offer creation. This is the document generator I showed in the beginning, and additionally, we have our compose extensions, which is here in terms. This is search based messaging extension, which is, on the one hand, of a review part and on the right.

B

It's the offer published part and those are search based, messaging extensions. It's um yeah, you can notice this by the type which is query here last, not least as I showed.

B

Two demos now today and last week and to compare this a bit some general considerations on this- why we would this or that one, um especially um for the front-end part, of course, SharePoint framework is simplified in terms of in terms of Hosting, but it's client-side runtime only so you do not have a backend and it's also simplified in terms of authentication, but it can be a problem because the authentication is more or less owned by Microsoft, because you have to use a service principle which comes from Microsoft and not every tenant administrator or not every company, especially zero trust scenarios.

B

This is a problem. Do not allow this at all. They have Azure ID policies which prevent this sometimes, and then you need to switch to a back-end version where you have your own application, registration and use, and there the teams apps are much better and much more comfortable. But when you use this backend to switch back to the hosting, of course you need to take care for hosting. You need to establish an Azure, app Service, uh something like list.

B

You need to take much more care for deployment processes and so on, and these are considerations that I would take into concern when deciding which way to go When developing those kinds of apps. Last, not least, my resources.

B

It was a longer series but mentioned here, two blog posts out of my series on that app, um the GitHub sample in the PMP repository also available since a while already and the general Microsoft documentation, as always on Microsoft, 365, apps and starting with the overview, and that was for my site. Thank you.

A

Awesome Mark is very well done. I know this is a fast demo, but really hit it home. So thank you very, very much.