Microsoft 365 Community Microsoft Teams, 30 Jan 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Low-code SharePoint web part to provision Teams structures as personal apps

Description

This PnP community demo is taken from the bi-weekly SharePoint Developer Community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded on January 30, 2020.

In this 8-minute video, Bob German - Partner technical architect at Microsoft, presents a low code solution for surfacing personal/private SharePoint applications in Teams and Group Chats. The SPFx solution is an easily configurable SharePoint Tabs web part – that allows users to add a tab in the top nav of their Teams site that links to a targeted SharePoint page/application. Up until this point, the options have been: Users can add a link to an application in their personal Teams sidebar – "Status tabs" or to pull in a custom solution. Site Administrators can easily add the web part to the Teams app gallery.

Presenter:
• Bob German (Microsoft) | @Bob1German

Supporting materials:
• Blog article: Building Microsoft Teams apps with SharePoint Pages – Part 1, Get Started - https://bob1german.com/2020/01/06/teams-apps-with-sharepoint1/ | Bob German (Microsoft) | @Bob1German
• Blog article: Building Microsoft Teams apps with SharePoint Pages – Part 2, Build your Own - https://bob1german.com/2020/01/07/teams-apps-with-sharepoint2/ | Bob German (Microsoft) | @Bob1German

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/sppnp.

A

My name is Bob Sherman I work with partners a lot here: I'm a partner, Technical Architect at Microsoft, and so I'm all I've been working a lot on teams, applications lately and a lot of the partners. I work with don't have a lot of developers and so they're. Looking for those low code, kinds of solutions and I was kind of inspired into this whole direction by at the team's airlift. Seeing kara, wanna gotta move show this feature, which is it's just a link here in the team sidebar that opens up the learning pathways SharePoint site.

A

So this is just an amazing training capability and you know a lot of great work that went into this, but the it's a SharePoint site that gets provisioned by the SharePoint provisioning engine and here's how it works inside of teams. So what she did here is actually really pretty simple right teams has a manifest just like SharePoint framework, and you can see here that it's this. This particular solution has some static tabs in it right and then we're just taking those static tabs we're installing this going into the team's administration portal and I guess I'm.

A

Maybe I'll take the time to show this or not, but actually coming in here to app policies and painting that up there for everybody and I'll go back to that if I have time but I'm just gonna stay quick couple, other examples, though it's like well, why couldn't you use this for any SharePoint page so that everybody who knows how to build SharePoint pages, could use this kind of technique? It works great for SharePoint framework, which is which we love but is not friendly for the Loko developers right. What?

A

If I wanted to do this without look well outlook? Integration is coming, but here's a here's, a quick and dirty version of it. What if I wanted to use this with a power app I'm, not a power apps person? Can you tell this is a really the may be the ugliest power ever but notice that it's working inside here and I can just pin this to my UI or I? Could actually publish this out using ant policies to everybody, so this all works pretty well at, just as it is, but notice that these are static.

A

Tabs static tabs are only visible in what they call personal view, which is these things that are on your toolbar on your sidebar or here in the little pop-up, and if you wanted to put a tab inside of a a team or or a group chat right and and here's here's another example, by the way, just a SharePoint homepage right anything a list could be useful in this context right and sort of make an app out of it. Maybe I want to actually add that to 18.

A

So the problem is that if you want to go into what's called a configurable tab or if you want to go into a group chat or a team rather than just this one on one user kind of personal view, you need to create something called a configurable tab and that configurable tab requires a configuration page which requires code.

A

So let me show you an example: if I go here into well, actually let me show you a little open source sample so in order to open this up to loco developers, who maybe aren't going to want to write the configuration code to do this. I created this little sample web part, and you can put this web part on any modern, SharePoint page and turn the SharePoint page into a configuration page that works in teams. So it's it's really simple.

A

You could go quite a bit fancier than this, but right now it just gives a set of choices of what do I want to show. So here I've got two choices. One per line: each tab needs to have a unique ID called an entity ID and each one has a URL. I.

A

Also have this little feature here, which is to redirect pages tabs back through this page, which means whenever anybody clicks on one of those tabs, rather than go directly to this URL, it will go back to this page with a web part on it, which will send it along its way and give me the ability to change the URL later on down the road if I want to.

A

So what I can now do is take this URL here of the configuration page that I've just created and this time I'm going to instead of manually editing me the team's manifest I'm going to use a tool called app studio, team's app studio and here's here's a little SharePoint tabs app and inside of there I've just pasted this URL to that configuration page right. So I've got a couple personal tabs here. These really don't have anything to do with my demo that they would they actually work here.

A

Underneath of this personal experience, but I want to show the the configure about configuration tabs so I've got my wet part set up on a page. I've got the page URL as my team tab. Now, if I go to test and distribute this I can install it from here and I can put this into a team or into a group chat. So let me pick a team and I'll just go ahead and put this into the amazing project. Team set up the tab and what will happen?

A

Is teams will open up the configuration page and as it does it, it's actually going to show my web part here on that little page. So I can pick. Let's look at the autonomous vehicles we'll put that in there as a tab and save that- and this is really only like five lines of code inside that does the configuration most of the code and there's not a lot of code.

A

Most of the code is just giving the user the choices and stuff, but even that's not very much note that I can also come back here now and change the settings on this tab and I go back to that same configuration experience. No I really want the research page on here. Please and that changes the page, but not the name of the tab, is just kind of that's a different function here, so I can do that manually.

A

So that's really it I mean there's not a lot there, except for I feel like this could be extremely powerful for loco developers. I've written a couple of blog articles on this on how to get started with all the details of how to set up a learning pathways and then how to use this new configurable web part to build these kinds of solutions into group, chats and teams. So that's it and maybe I took less than 10 minutes, giving the other demos more time. I knew this would be a simple one. Great. Thank you.

A

Thank you. Thank you very much very informative. Sometimes in this in this world of SharePoint, you find yourself writing these little pieces of glue code right, and this is a perfect example. It's just this little piece of glue code that opens up a whole set of scenarios for people who don't who don't want to open up start coding in SharePoint framework boom, settle and.

B

I have to say this I hear from my sign that that's that's a great example of the simplicity of surfacing SharePoint, specific capabilities as an application in teams, because teams isn't kind of an application host, and this this shows how simple it is actually to serve ace, individual applications and functionalities. There, plus the fact that now, after a Kani 2019, we we support the private apps and, and you can easily make those things happen as well, so really really cool stuff yeah thanks.