Microsoft 365 Community SharePoint, 14 May 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building Microsoft Teams solutions with yo Teams which are exposed in SharePoint

Description

Need hosted or server-side processing for your app? Creating a Teams app and you want also to deploy it to SharePoint Online as a web part or as a full-page app? In this 18-minute demo, Wictor Wilén, steps viewers the creation/simple configuration of a Microsoft Teams tab (app) using the latest yo Teams generator, publishing the app in Teams and SharePoint Online app catalogs and finally adding the app to a Teams tab and to SharePoint pages as a web part and as a full page app. Usage scenarios are discussed briefly at the end of this demo.

This PnP Community demo is taken from the bi-weekly Microsoft 365 – General M365 development Special Interest Group (SIG) community call recorded on May 14, 2020.

Demo Presenter: Wictor Wilén (Avanade) | @wictor

Supporting materials:
• http://aka.ms/yoteams
• Community Demo – Implementing a Single sign-on (SSO) Microsoft Teams tab using yo Teams | https://www.youtube.com/watch?v=zc9S270c-Dg
• Community Demo - Getting started on using yo Teams for building your Microsoft Teams solutions | https://www.youtube.com/watch?v=w0OrFkzNC10

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/m365pnp.

A

What we're gonna look at today is sort of how to bring that provider hosted app experience back to shopping online. That is, there are scenarios when you want to build an application or sharpen online that requires, for instance, server site hosting new. You need to do background processing, you might be uploading documents or integrated to other systems and which you can't do sort of in JavaScript.

A

Only, and so in those cases you need to have server-side rendering, for instance, there might be the scenarios when you want to hide your IP, you might have business processes or logic, etc that you don't want to share in JavaScript, because it's fairly easy obfuscate, so SharePoint framework isn't enough for that.

A

Of course, you can sort of build upon use your own framework and build api's and those kind of things, but sometimes server-side rendering makes sense, and also, if you're, already invested in building a web application or something you can bundle that into a Marshall team stuff, fairly easy, but also thanks to the integration between teams, tabs and sharp online.

A

You can also take teams tab and make that as a chef on full page application or as a SharePoint web part, it has some disadvantages, of course, since sharpen framework is highly responsive, it's all clients, eyelid, cetera, et cetera, but there's I said lot of advantages as well. Specifically, if you want to do super high performance stuff, can we server-side rendering and caching in those count things and in Huston sort of low bandwidth situation, etc. But let's take a look at how we can sort of create an application using your teams or whatever other generator.

A

You prefer to generate your applications with the Joe team's. Has everything built into it? So it's sort of the next next finish to have everything up and running and to be create the team's tap out of that and then I'll show you how to deploy that team's tab into to SharePoint Online and how to use a full page application as a web part, but also if we have time we take a look at some behind the scenes or that's actually happening, and then how does these application works and what's the drawbacks, etc?

A

The first kind of thing you want to do is, of course, go to an aka and academics beeps download the team's generator. Then you fire up, come on prompt and essentially type yo teams to follow the the the wizard and get up and running, and it will ask you a couple of questions.

A

I of course, I prepared a demo that particular cut, but I'll walk you through this as well, so just to give you a solution: name folder company name and those kind of things, and here's one of the things that I highlighted, so that the new thing with 2.14 is that we support the 1.6 schema. If you want to use that for this demo, however, doesn't really matter what version you're using it has to be higher than 1.4 I. Think, though, then you essentially choose to build a tab and also one of the advantages.

A

If you're building a bot Fritz doesn't know you're already building tabs, it's a trend, it's asbestos, so the whole idea is, we want to reuse stuff, and so, if you're already building for teams- and it's fairly easy to extend it to actually have your application being in supporting shop and online as well. But for now we just use a tab. We have to choose somewhere to host it and skip the indicator. Here we skip the testing framework and we skip app insights.

A

I need to give it a the tab name and that it will also be the web name of the web. Part choose a configurable one, and these are the team settings and we'd skip single sign-on. But now we come to the more interesting question here. So do you want this tab to be available in shopping online and if I choose yes here, they can also can choose between.

A

Do you want to have this full page application and or as a web part, and that you choose both here and just for the demo and your application will be created? I'll cancel out here, so we don't have to see all the NPM package packages being installed, but let instead go to my demo application that I've already created.

A

So this is followed the same procedure as I just did a couple of hours ago, but I also added some server-side api's to this so very simple and way for us to do some background processing to showcase why you would like to use it. I provided hosted app instead of just JavaScript, but the key thing here is when we generate that manifest and the generator asked us if you want this or share bone online in the manifest file with the manifest is what defines your team's application. You will have the configurable tab.

A

You would have everything just as normal, but there are two new attributes in here. So the SharePoint preview images share supported, SharePoint hosts and that's essentially what we had to fill in. So we can choose here manually and modify existing manifest itself as well. If you want to add SharePoint support, but this is the only thing we need to do. We need to support, show the pre preview image and, as you can see, it has a specific size 1024 by 768, and then you can choose between the SharePoint, full page or SharePoint web part.

A

There's nothing more. Do you have to do in your team's application, essentially to get up and running? So let me demo the application in teams and then we'll see how we can deploy it into the SharePoint Online see if I go over to my web browser. Why are you here? If I go over here and upload my my application to market teams? First I load it into this team I have here so, let's upload a custom hat and then we need to find it's under code, 10, moles, P and P.

A

That's the one I package! So let's upload my application in here and it's just a tab- I prove that one so now I'm just side loading it into Microsoft teams into this specific channel can add the tab up here and it's called: where do we have it? Team is + shopping online. That's the name of my tab in this case. That's not this time and we this configuration I'm, not using it. So we just type hello world here but remember, what's happening now when I do this in team, so we type hello world.

A

We save, will actually see this printed out here. Once it's loaded, see it's printing out my configuration setting here, that's just for for testing, but remember that we may take a look at the same time thing you showed up online as well.

A

What I've done here is that we an option to upload image so I can, with the pictures and upload the picture of Parker click on upload upload and do some background processing and then finally, in a few seconds, we will see an image here and I did self posterizing on the on the actual image, so change to change it to 3, colors, essentially stuff. You could do server-side, I'm, pretty sure Stefan Bauer could do this in JavaScript as well or CSS.

A

Only but that's the whole kind of point you want to do some heavy lifting and which you can't do with JavaScript normally. So that's why we did server-side so I want this web part or tab to be available in sure from online and all I need to do is be a SharePoint admin. I need to go to the App Catalog of my tenant and then click on apps for SharePoint. Then, essentially, the only thing I need to do here. This is where I deploy all my SharePoint framework stuff and everything.

A

I click on upload and I'll choose the same package.

A

Sit by that we uploaded two teams a couple of minutes ago: demos, P and P, and let's get the package against the same zip file, which contains the manifest and the two images, and in this case, do you trust teams, plus SPO the same kind of experience you get when you upload SharePoint framework. We make it available to the whole organization, click deploy and that's all you need to do so. You just dragged it and drop the same kind of zip file that you uploaded or siloed ring to match the teams.

A

Then we can go to any SharePoint site, go to the same one here we play it, create a new page and let's start with a blank page break page, and let's call it demo and we can add video talent text. We had some web part in here and search for teams. Now we should see here teams plus SPO. So this is the one, and this is first kind of thing.

A

If you follow the guidelines for push up on on for marks of teams and how to design those icons, you should have that I outline icon, which should be white on parent and unfortunately, the same icon doesn't really work that well in Shepard online, but that you have to live with that or you break the rules for deploying your teams to their application to teams or you create actually it's a separate, dedicated package just for for shopping online, which has the right or for black, going on on the transparent, for instance, for icon.

A

If we had that one, we get the same kind of configuration dialog here and we type hello, not camps, hello worlds. We have the exact same experience as with in teams, we click on save and we will have our war. Our tab here running on the page, see I, can click publish, so the first thing you should notice is instead of getting hello world here, I actually am getting the URL of my tab, which is a little bit weird that's reported by, and hopefully we get that fixed.

A

But the idea is that you can actually into that URL, eventually, post your settings etc and then parse that out. If you wanted stuff to work, we can do the second counting. Here we can upload a file, let's get a picture and let's get this one instead upload it so uploading it. In the background you will. We have some server side where and processing now, and then we get our image.

A

One thing you notice here is: this: is the tab tab in teams is an iframe and a tab in sharp on online is an iframe as well. So you will actually get scroll bar here. So that's one of the things you need to think about when designing applications. You, if you do a web part like we done here, you will get a scroll bar. So that's something you need to take into your design.

A

If you do the other thing where we go in here, we create a new page and we create a full page application and, as you can see, we have templates up here and we also have apps since I deployed it as a full page application. We have the absorption and I can choose here: teams plus SPO, but use that one we get the preview image. The one I showed mentioned should be 1024 by 768. It should probably be something better than you here is something that actually describes or is a screenshot of your application.

A

And it's not if you do a full page application with your own framework. You get some nice preview like you do in here live preview, but you don't get that with the team stops and fortunately you click on create page and when we do that, we get the same experience just as previously.

A

Hopefully, yes, loading and we get an option to say hello world. Then we click on save. Then we need to name our page demo, one two three and say there we are now we have a full page application with our themes, tab. We can upload an image again and show you how the scroll bar works when we do it in the full-page experience since that- and it will take a few seconds- and you can see here now- we get. This is much more useful to scenario to actually work with full-page applications and themes tabs.

A

So this is where how I should typically deploy themes tab unless it's very small and very small and limited functionality, or you do something about that scroll bar. So that's how we work with the reusing team's tabs as shared on online web parts and food pinch applications that is, we are having provide the hosted applications back. The the caveat of this, of course, is that sort of when you have few billions upon framework you're very comfortable if you sing the HTTP clients, a graph clients and those kind of things you cannot do that in here.

A

This is, as I mentioned, an iframe, so it will be hosted in your iframe and still on your domain, so you need to use your own methods of talking to the graph or your API or or other single sign-on options in here. If you wanted to talk to security is, of course you can use the single sign-on tab experience as well, but the thing I wanted to highlight is: is that it's exactly the same code?

A

If you want to debug it, you can do it here and, as you can see, this is hosted here on my domain. It's I frame. If I highlight highlight it like this, you will see the iframe here, whereas terrace so that's everything, you're running is assign items. You can't talk back and forth normally between there's no thing such a connected web portion and thing yet here, but this is a good way of getting your stuff up and running in Shepard on online I.

A

Think that's it for the demos and I haven't been able to check the chat. If there's any questions in there, so.

B

Thank You Victor said there was a few questions, not a massive amount. So our is is pointing out it's like a part in add-ins, and that is correct.

B

So it's it is basically a modern, adding part so two sides, and and like provide a host at adding experience at least worth exactly the same way: yeah Thank, You, Victor, great demo, really really cool stuff and also, hopefully, that kind of opens up some opportunities and new ideas for the audience as well, because I, it seems to be the people, are not that much aware that you can actually do this with Microsoft teams tabs as well.

B

So you can actually serve as your existing web application, also in teams using the same model and again just recapping what we said. So we do have two different options. You can implement your own web application, which is hosted in tertiary and then so if I start as a teams, tab or a business application or as a as an iframe or a bit part in in ship one or you can implement the stuff using SharePoint framework. So what would be the design factors?

B

Well, if you have an existing site, the existing experience already running in a web site in a sure obvious. Are you going to surface done now? If you would need to implement something small and convenient, maybe for enterprise consumption usage?

B

Maybe it's easier to actually implement that and faster to implement which ship and framework because we take care of the hosting for you, you don't have to spin up and as your website, you don't have to worry about permissions and operations and CDN and all of that stuff, because that is automatically done for you, and so that's it. That's kind of the design decision factors here.