Microsoft 365 Community Microsoft Graph, 5 Dec 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft Teams channel and tabs web part

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 December 5, 2019.

In this 11-minute video, Federico Porceddu, Senior Developer at Avanade, Italy, walks through the React Teams Tabs web part that allows users to access a Microsoft Teams channel and Teams tabs within channels on a Modern SharePoint site without having to open the Teams app or Teams Web app. The web part shows all Teams channels/tabs linked to the Modern website. The Teams channel information is accessed via Microsoft Graph API.

Presenter: Federico Porceddu (Avanade) | @FedericoSPDev

Supporting materials:
• Blog Post: https://www.federicoporceddu.com/2019/10/31/react-teams-tabs-pnpjs-show-channels-and-tabs-from-a-modern-team-site-connected-to-ms-teams/
• Sample: https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-teams-tabs-pnpjs

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

Our body, my name, is Federico porchetto nice to meet you buddy I'm, a senior developer in Avenel Italy Italian visit in Cali in Sardinia at the Alvin Advanced Technology Center. You here you can find my email contacts. If you what to talk with him, let's start today, I'll show you an SPF expert, Lu user uses to show directly on the side the arrow key of channels and tabs on all the team connected to their appointment inside.

A

Let's sit together, general needs journalist is to enable people to access themes, tab without necessarily having to open master Mac, so teams up our web application. There were the first serving the step or having to find the team and as I'll chana the result is a fast track to towards the team stops. So access is having quickly. Surely this sample is more interesting for now learning and study point of view, because I wanted to learn more understand the power of p MPG gas fabric.

A

You are integration with Microsoft, obviously in a client-side solution, but it could also be user to offer an alternative browsing experience that integrates the model team sites and microsomes. Let's see what the spatters are should be obviously landing into the on page. The Weber will show the list of channel of the multi site, link teams and nested inside journalist. You will find top link.

A

One wintry Society sample is that the web per count as far as yourself on the current site, going to retire formation through the Microsoft graph graph API without feature in the sample. The web participate fully concept on top of a shopping framework, for instance the use of a PMP graph teams picket how to configure point online tenants, PV and SPF fix solution, todo, Marco, subgraph call course, and finally, the fabric you INF component, that is simple and nice to use.

A

This is a short dive and our model team site are connected to Microsystems. There is basically a property back now name it Group D inside sure, point inside you can easily file using a traineeship point on to model powershell or sharepoint online client browser. So what is group ID goobidy is the unique ID of the outlook trees. If a group associated to the short point modem team sites- and they also represent the market teams ID, we will use it to make our course to Microsoft I, retrieve all information. We need okay. What about the solution?

A

We always say that the web per contest was itself on the current team, but what about micro so graph API, because they are rapid from the PMP package the PPG has peak is because internally, they use to specific calls to graph get all channel from from a team using group ID this one and get two tabs from a channel. Okay, obviously we need a pretty school, obviously before I being able to make.

A

This goes to Micah so graph from super framework, it's necessary to assign the court permission in API manager, section of SharePoint Online administration portal. In our case, we need to add two scoops to scope. Group read all or group read write all.

A

Let's see web port in action, I.

A

This be good here we are so we can start from a team. The contoso finance team. There are a lot of channel and for every channel, some tabs with like wiki budget planning tool is a link or all tab. You want to add in your channel the web part is this: one I can al from any page and start search. My web part James this one.

A

Ok, perfect, so publish perfect. So, as you can see, I this, the contours of finest website, SharePoint site link it to the contours of finance market teams, and this were to retire. All channel include the general obviously and for every channel. This is the count of the tabs that are linking to these particular channel.

A

This is a really simple and easy, but when you click in one of the this link, for instance fiscal year budget, ok, so there is a navigation and you can open directly without waiting with our search inside the team's. Ok, here you can find a small number of teams, part in a real scenario.

A

We know use teams. There are a lot of things, a lot or channel, and a lot of team stops. So if you are working on this show go beside it. It could be useful. Have this link directly for this webpart? Let's get let's get ants in Endicott this webpart, okay, the star from generic helper and I, realize using EGS. There is its missile guide group ID that get all properties, so property back and drive group with the property.

A

There are also two methods: good channels and get tabs from training us that use internally graph teams, get PI, D and channels get or graph teams get pity. China's get MIDI the drive all tabs from China I love, P mpg-us, because it's pretty easy and clean make cause. We ^ react and ties with Thai script, so this is the alper and they use these out /.

A

Obviously, in the component, this one of the purport component is really a simple ism genetic message and the now I use just the group's property and set the state and in the component, is mount, haven't or making the complaint. I start maker sequel in order to get all channels.

A

First of all, the group ID sorry I can never time I, Omega, PT, all channels and obviously all tabs from each channels. Then I push inside on an array and the BBQ I component nav use this property, so if, for first level, linked I use only key and sorry only only name and links are generic array and for internal link, so tabs use a key name and URL, and obviously the the target about the countess's just count of the length of the array.

A

Another trick that I use in this web part is to sort in a different way, because the de Graaff epi return to me a result and with a different sorting compared to the graph. Sorry to the teams. Jenny Jenny recorder, so there are gel, is always the first.

A

The first channel at the end of the channel are in you know, alphabetic order, so what it is just make up. Custom, sorter and I manage the general tab, but pay attention is different from every language word about permission. This is in the package solution.

A

Okay, we have a permission. I just specified the resource is micrograph and the scope group read write all so. With this setting I wanted the problem of a part: I can go to the sharepoint online admin center and in the api, my husband. I need to trust so approve or rejected permission because approve in order to make this call and trust cora tree graph. Api amigos from I should point framework whiteboard, so from a side is a zone. Thank you. A lot for your attention, great demo, exciting to see that I think yeah.

A

Maybe you have a few questions there in the window.