Microsoft 365 Community Community Demos, 1 Oct 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Community demo - Creating Microsoft Teams tab with SharePoint Framework, React.js and Material-UI

Description

This community call demo is taken from the SharePoint Framework community call recording on on 26th of September 2019. In this video, George Tymvios (Bernhard Schulte Shipmanagement) is showing how to create a Microsoft Teams tab with SharePoint Framework, React.js and Meterial-UI.

Presenter - George Tymvios (Bernhard Schulte Shipmanagement) @theMediumGiant

You can find more details around SharePoint Framework can be found from following location - http://aka.ms/spfx

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

A

I'm George I worked as a Solutions Architect for burn shield to shape management. We working for his SharePoint framework for the past 25 years, three years and SharePoint 2013 before that. So today we'll be seeing how to create a team staff. We are using SPF X react, yes, San Mateo UI with a little bit of Google Maps, so just closing the image here, and this is a solution working within teams.

A

So what we have here, this is a normal, normal team, nothing special about it. Just we have this this web part here it loads from a SharePoint list and it gets all the different locations and then it displays it here on on the right and obviously it allows the admin to see this manage Tweenies button. If we look through another users perspective, that is not an admin, the button is not there just what you get an idea and yeah I can just show you how we get about doing this going with the script.

A

So you start off normally using the PNP SP FX sort of because you for material UI. You need to have typescript 3 and up so I'm using 3.5 in this case.

A

The first things that you need to do is you go into what once obviously it's definitely stunt scaffolding and provision. So on hey, George, sorry to interrupt you, could you increase your font size? Could you zoom in just it's it'll, show up a little bit better in the video there.

B

A

All right, thank you cool, so yeah you go into the the manifest.json file. First, things first for a team stuff to be supported is in here just adding this team's tab will make it allowed to be installed on on teams the rest of the information just stays as it is.

A

Nothing nothing more special to this page, then. The other thing that we need to set up going into the typescript file is. We need to install to import this this here.

A

The Microsoft teams Jas component, because this gives us the context- and this comes in very handy when it comes to know what team you're on and what permissions are there, which is used now for my managing trainees button and yes, so adding this, you know you need to have the just define it here, push it in and make sure that you're giving it for the react file to to read the data and then going to the typescript, the yeah, the javis.

A

They react file, sorry just uh I'm importing in my my material UI and the Google Maps I'm, just using Google Maps in this case and the material UI just using the button and the way styles, obviously material. You I need some themeing IQ abilities here and yeah. So what I'm doing is I do have my area, my own init function here that says that defines the setup of the page right now.

A

I have the I'm putting in manually the the team that I wanted to fetch the information from because the list is City one on a SharePoint team, so I'm putting it here directly, but it could have taken it from the properties or it to make it a reusable component or it could take the current page of that. The team is working on.

A

If this was a let's say that, like the documents that always exists on on a SharePoint site, it could have taken that out directly instead of me putting the string here so I'm just fetching the other mob and just some go mops things here. Obviously the API- and this is the part as well that gives us the the user role. So this is basically checking to see from the team context which is given by the props and first is checking if it exists and once it exists.

A

If, then, it shows the user role and if the user role is an admin which is zero, then it shows the button and obviously then, if she's about- and it just blows a function that would then load the admin page and I realize that I forgot to show that part so jumping back onto browser. If I am an admin and I click, this button, it will take me to the side. It's very easy to write now is provision to be used through SharePoint lists. It doesn't have to be this way you could put.

A

The entire crud within the teams is just a third for this example. We'll just keep it like this I'll just put a trainee, a lad.

A

And I just use the location, so I'll just Cyprus the sake of it. If I go back on my teams and refresh it.

A

And this is here, as you can see, and if I click on the pin here it shows as well and let's see if I wanna the trainee change location are just ready for my list here. Just drop down, select, grease and it's saved, and if I go back on my team here and yep grantees move here, that's how the list gets updated. So next part is we want to package the solution and to package it. There is from the Microsoft documentation. There is a way to sample for this manifest file.

A

This is needed in order for teams to be well I, get to have a deployed on teams. So there's a sample of this manifest file. I just need to pick attention you're on put a G, a new Qi ID here make sure it like the version is still the same as the packages will run and what is important here is the configuration URL, which is basically taking it from a specific team, and obviously some icons here need to happen and.

A

So yeah that's for the manifest file, so you do run a normal cope, build bundle, package, solution and so on. It does give you an SP SP package file and if I just bring this up.

A

It does give you the and I didn't build this one anyway, sorry, so it does give you a package file, sharepoint package file, and then you do bring it here as normal.

A

You uploaded, but the first time you do it it'll ask you to deploy you'll, deploy it as a SharePoint application and then to make it available for teams. You need to press this button. You then allow you to to see it within teams to install it onto your team and the second time you do it. It will say, fail to deploy, but it does it.

A

It only needs one time to do it and the other thing you need to be a tenant admin for this being just a SharePoint out mean, does not allow you to to install it properly.

A

It's a little thing to know and then afterwards, once all those steps are done, we can find it here if I browse for more ups, you can see here build for SP shark, which is the tenant I'm working on right now, and you can find it here once you install it, add it to a team and well if the team, if I, had an extra team here, it would show oh there. It is so if I want to install it there, I can set up a team.

A

Yes, however, one more thing in order to for the application to work, you need to have it installed on the site as well.

A

You need to have your own teams on your SharePoint site here. Otherwise, teams will try to load the application and you'll say I, don't have anything to read, because the information is not here, you go normally and so on up and then select it and get it here. And if you are updating your application, you need to again do the same thing: change it within the the apps check it in go into the site contents of the team and then click the details and get the latest version.

A

And this will update the web part within teams, and here, if you had any reusable controls that you wanted to use here, you could just put it here. Obviously the description field I'm not using it for anything, but you could have had like a list that you want the data to come from or I don't know like other files were importing the users from here. Perhaps it's entirely up to you, but the capabilities are here: you do get. You do have access to the properties.

A

And I think that's it sing the time as well. Do we have any questions thanks.

B

Church just comment on the on the on the installing the the requirement of the installing and everything else does few different options over there. So if you do deploy in the web part as a tenant scope deployed web part, then you don't need to explicitly that to be installed on the side. So there's a few different options here, but you're absolutely correct.

B

If you, if you want to have the web part only exposed to these teams and and then you have to explicitly install this to the site and then it wouldn't be available and visible on other area, so few things and I would I will need to definitely double check our documentation that it's 100% up to date on their different options and and scenarios, but cool-looking a thing just out of curiosity and just obviously because I have a Microsoft guy. Why did you choose to use Google that they're styling? Why not.

A

Material UI, good question I have been using it before and I kind of, like the being alternative, sometimes on some like giving a different look, because if people look something like something and it looks like SharePoint, they might not like it, but if it looks a little bit different. Oh you did something here and.

B

A

That seems to be the culture of my company yeah.

B

I, don't think you're the only one, so it makes perfect sense but and I and it this actually, the demo demonstrates nicely that it doesn't matter what react components or things who want to use everything worse than in the context of she opens Famer so up to you, how do we want to implement things? Absolutely.