Microsoft 365 Community SharePoint, 20 Apr 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Transforming your SharePoint Framework web part as a Microsoft Teams personal app

Description

In this 15-minute Developer-focused demo, Albert-Jan Schot shows how to easily extend Microsoft Teams by embedding client-side SPFx web parts or personal applications (not Teams applications) in Teams tabs. Requires running SPFx v1.8 or later and execution is in the context of the SPO site behind the Team. No coding, no hosting, no Azure registration, just package and deploy. Step through app creation using the SharePoint generator, create a Teams tab, and add tab to a Team. This PnP Community demo is taken from the Microsoft Teams community call – April 2021, recorded on April 20, 2021.

Demo Presenter - Albert-Jan Schot (Portiva) | @appieschot

Supporting materials:
• Samples - Samples by JavaScript Framework | https://pnp.github.io/sp-dev-fx-webparts/
• Documentation - Building Microsoft Teams Tabs using SharePoint Framework | https://docs.microsoft.com/en-us/sharepoint/dev/spfx/integrate-with-teams-introduction
• Documentation - Build a Me-experience in Microsoft Teams | https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-me-experience

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

Teams and shopping framework- let's let's get started so the first thing is: you have to be on sharpen framework 1.8. As of that version, you can actually host the web parts that you build as a team step. Now, if you do that, if you enable that, then what happens is that the tab will be executed in the context of the sharepoint site, that is behind a team. So every team that gets created gets a sharepoint site and what happens is that in that sharepoint in or in the sharepoint set?

A

In that context, there will actually be some magic in place. That makes sure that you can host or run that web part, meaning that if you build a web part using the sharepoint framework web parts, you can actually expose it as a team step. So it's not a teams application.

A

It's a teams, tab and a team step is not a full application in itself. If you want to do more, if you want to achieve different things, then it might make sense to build a actual team's application. So if you start considering building things, you either have to pick the sharepoint framework generator or the yo teams generator, and I think victor is still in the call uh weaker ability generator for teams really really awesome tooling.

A

But if you want to build more than just a tap, if you have want to have full control over the user experience or you want to have full control over your package, then definitely pick the generator for teams. So yo teams, if you want to do a web part, if you want to build something that can serve both as a web part or as a tap, then definitely stick with the sharepoint firmware generator, because that will allow you to do so now.

B

Or as a personal application, or as a personal application or as a.

A

B

Application. Sorry definitely.

A

Works as a personal application as well, but that's still a tap right um now. The advantages using the sharepoint framework generator.

B

A

That there's no need for you to host anything. So there's nothing. You need to worry about it. It's just uh run generator. Add some code where, if you want to add package your solution deploy it and it will work done you're good. Now, within sharepoint framework, you will have the teams sdk. So you can actually achieve things where you can check whether you're in teams, you can show specific messages or show a different set of content based on the location that you're running in now.

A

What happens under the covers is when you open a team step. What actually happens is it calls the teams logon page, so it does a call to the teams log on page that teams log on page actually does a authentication, url generation, so it picks a new url and it redirects you to that authentication url there on that authentication, url and there are some things that are happening from the oauth client. So what happens? Is it picks up a access token from the microsoft teams? Sdk?

A

Then it sets that access token and then redirects you to the final destination, which is actually a modern or classic page where your web part is running and because it did the authentication part for you. What you will actually get is team's context as well as that sharepoint context. Now the before we go into too many slides.

A

Let's, let's go to a demo and let's see what actually happens now, first things: first, basically, all you need to do is you'll need to run the generator so yo at microsoft, sharepoint and that will walk you through the generator. Now I'm not going to walk through the full generator. The only thing that you'll need to be aware of is, if you're running this, then the package you generate has to be a sharepoint online only package.

A

So if you do the version that you can run on sharepoint 2019, so on premises, then you won't be able to generate that tvs package that that's not something that will work. Now, I'm not going to wait for this. I came prepared. I already made a demo, so what I did is I created an empty, an empty project, so there's nothing in there now.

A

The first thing that you'll need to do is you'll need to run npmi to install stuff that you need, but after that, because it's an empty project, what you get as of sharepoint framework or 1.18. Is you actually get two images in the teams package? Those are two required images if you are creating a teams manifest if you're, creating new uh a new teams package. If you recall from the demo from rick, you can use the app studio to generate that structure, but you'll need two images. Those images are already there.

A

You can change them if you want, but those are there by default. Now, if you go to your source, what you will see is that you will get a web part and I generated a my first teams, hello, world sample, and if you go here, what you'll see is that there is online 15. There is something called supported hosts and in the supported host by default. It only shows the sharepoint web part and you can add either the teams tab or you can add.

A

If you want to add more, you can add the team's personal app so depending on what you want to do. If you want to do the team's personal app or the teams tab, you can add it and buy them. That's all you need to do or all you need to change in the code. After that, all you need to do to get it running or get it deployed. Is the gold bundle with the ship option and a gold package solutionship?

A

After that, you will have a spp kg file, the package, your sharepoint framework package, and you can deploy that and it will work in teams now this well, it's gonna take a few seconds, but once you've done this, what actually needs to happen is you'll need to add it to this location, and if you have a teams app if you've done that, you'll need to go to the files you need to do the sync to teams and by that it will be automatically pushed to the theme store.

A

So this is going to take a few seconds. There is some delay on it. Now we're not going to wait for it. I'm just going to show you. There is already the my first team step. You can pick whether to add it to a specific team. So I'm going to say: okay, I'm going to add it to my dev team. Just to show you what happens, then it will redirect you to that team. It will show you the configuration page there's not that much to configure. It explains.

A

Okay, this is sharepoint framework and it will start setting everything up now. I didn't write any code, yet I didn't change anything yet. I just enter my first team step and I can do some configuration it's a demo web part. I just pulled in the hello world, hello, world demo, world, whatever you like and you can see you can change, you can add configuration, and here you can see some context now. If you would go to the code.

A

What we actually did is I put in some demo code, I'm going to zoom out a little bit minus there. We go as you can see. There is some code in here, but one of the things that is important is we just want to make sure whether we are running in the correct context. So what context are we running and you can see that we're running any microsoft teams, then we're doing the welcome to microsoft themes or we do the welcome to microsoft sharepoint.

A

This is basically all you need to know to get started or get working now to show you that it is really that easy. What I did is I downloaded or I pulled in from getup, I pulled in all the client-side web parts samples. So all the samples are on my machine and you can either fill a filter by shaping framework version. You can just pick one that you liked and I picked one. I think I picked the directory directory one, let's see if we can find it quickly directory, that's not the search.

A

I was looking for we're gonna, not search for it. Now, if you go to that directory webpart, what you'll see is that we have a manifest there as well, and that manifest is slightly bigger. It contains some other components. It contains some other information, but here you can see that we have the supported hosts as well, and this one is actually allowed to be used on sharepoint pages, it's for the shop on full page and you can use it as a team step.

A

What I can do is, I can just say: okay, I'm gonna, add it as a team's personal app and I'm gonna run whatever I like to run in this case. What I need to do is I need to do the go bundle ship.

A

Let me do that. It's gonna take a second to load. Then I'm gonna do the gulp package solution and I'm gonna sync it to t. So it's gonna take me probably a minute, maybe to just to get it deployed if everything is working as expected, demo demo demo.

A

Let me quickly skip this. One um yeah still gonna wait for this really really slow demo effect. I'm not gonna, not gonna. Wait for that! That's gonna! Take too long, I'm gonna go to my explorer because I already pre-populated everything.

A

So let me grab my code.

A

There we go so within my pnp folder.

A

There should be the uh web parts. There should be samples. There should be the react directory there. We go react scrolling down scrolling down vx directory. Now because I already did a package, I have a solution. I have a react directory sppkg file and what I can do is I can drag and drop it here. It's going to take a second I'm going to make sure that it's available in all sites, I'm going to click deploy and once it's there. Let me refresh the page then here we've got that search directory.

A

I can click on sync to teams, and once you press the button, it's going to take one, maybe two minutes to show up in teams, at least if it says successfully synced to themes. If it's not saying successfully sync to teams, it won't show up, but if it's successfully it will show up in teams and what you then can do, is you can go to all the apps? You can click on more apps. You will get the actual app it's already here.

A

It's been cached, I'm not sure if I can add it directly now, but because I added it, I or I changed this web part to be available both as a personal app as well as a teamster. I can pick either click add as my personal app or add to team. If I want to add it to the team, but let's do add and we go personal app, it's showing the web part it's showing all persons and just as a reminder, I didn't write any code. Just I I just pulled in a github repository.

A

All I did is I changed it to be available and I have a search directory available and well. There are some users in my tenant, not that many, but you can see it's really really easy without too much code you can just get it to work in your in your environment.

A

Now, just a final remark: if you are ever in the case that you want to do anything with with web parts on your machine, um if you want to do a actual teams application, if you say okay, I've got a few web parts. I've got a solution, maybe three or four web parts. You can actually generate a team's manifest and put that team's manifest into the team store. So you can use the app studio to generate that.

A

But if you want to do that, you need to be aware of the the urls that you need to use so for static tabs. What you'll need to do is you'll need to make sure that there's a content url and that that content url, that that redirects to the teams, logon aspx page and within that teams, logon aspx page, if it's a static tab, you'll need to do the personal it's highlighted in in purple and you'll need to add the component id where the component id is the good of the application.

A

So your sharepoint framework web part always has a manifest. It has a component id in there as well. If that matches, then it will work, so you can use this manifestation to do static. Tabs, configurable, tabs and you'll need to make sure that the valid domains are in there as well. If they're not in there, then it won't work so that way, you can actually do this. uh Do this yourself now what's next, if you want to get started yourself there is this really interesting, blog post that explains in detail how to integrate within teams?

A

And there is this really cool sample of building a me experience where, in the experience you can see several samples where it all comes together, such as sharepoint page, where you can just show, or you can show your organization, it's kind of like a pre-processor to the fifa connections part but built as a personal, personal application, so really really cool scenario, and that's it one minute late, so not too bad. I guess.

B

Not too bad. Thank you abby on that. One. Just to recap before you stop sharing, is that the really the key power of spf x here is that nothing was actually required to set up in azure. This solution is ready to be used in production, as it's deployed into app catalog, so everything is automatically hosted now. The real thing which we need to remember that spfx is good on a ux.

B

If you need to create a bot or a backend, then you should be looking into your teams or any other azure functions integrations, and all of that so sharepoint framework is really for the ux layer for the teams as well and you'll, see more and more investments and and integration between teams and spfx. Also in the future.