Microsoft 365 Community Development, 2 Apr 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft 365 PnP – General M365 Developer SIG community call – 2nd of April 2020

Description

April 2nd SIG call hosted by @VesaJuvonen, focuses on latest PnP news and dev tool updates. 2 demos: Create a Single Sign-on (SSO) Microsoft Teams tab and Building a no-code connected contextual page. This call renamed to General Microsoft 365 Dev SIG, previously General SharePoint Dev, focuses on products and integrations across the M365 platform. yo Teams section coordinated by Wictor Wilén has been added to call. Expect tool update releases across board on April 14. Roadmap for CSOM reviewed. Released (March 25) yo Teams 2.13.0-preview2, including SSO tab features demoed in this session. Full yo Teams release expected mid-April. Parker's Place is open, all tchotchke proceeds go to charity. Thank you demo presenters: @theChrisKent and @Wictor.

Q&A takes place in chat throughout the call.
• Demo: Building no-code solutions by connecting web parts based on list data | Chris Kent (DMI) | @theChrisKent
• Demo: Implementing a Single sign-on (SSO) Microsoft Teams tab using yo Teams | Wictor Wilen (Avanade) | @wictor

Additional details on topics covered during this call may be found in the SharePoint Developer Blog post for this call at: http://aka.ms/spdev-blog.

All previously recorded SharePoint Dev monthly community calls: https://www.youtube.com/playlist?list=PLR9nK3mnD-OVC4_ut9bUi6ffRXLVuF0_g

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

SharePoint PnP Developer Community channel on YouTube: https://aka.ms/spdev-videos

More information on SharePoint Framework library components is available at: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/library-component-overview.

You can download an invite for this bi-weekly community call at: http://aka.ms/spdev-sig-call.

For details around the open-source work being done by the SharePoint PnP Development Community, visit http://aka.ms/m365pnp.

A

Welcome everybody: this is general Microsoft, 365 development, special interest group, and this is the bi-weekly sink. It is April, 2nd 2020 and in this course we dis use to be the generalship on dev, but since we are more and more actually covering stuff across to Microsoft 365 or in other areas like the one tribe and teams and there's no point actually calling this course as a ship on course, because it's not just about your book. So that's why it's kind of a kidding now rebranded to be more generic from that perspective.

A

Now, what are we going to do today? Is few generate slides for Microsoft site, so I'm gonna actually talk about the first 5 to 10, minute, 5, minutes or 10 minutes, and then we'll coach, you again BMPs a some core, BMP PowerShell, modernization tooling, what's happening in Tim and there's actually some really nice development there or hints where we are heading and then latest ano teams, so yo teams is gonna, have its own recurrent place in this course. So Viktor is gonna.

A

Do a quick update on bi-weekly when possible and if he can actually make the goal than somebody else is doing that slide as well, then we had cool demos coming up, so Chris Kent has prepared us something which I do not know again what it is. So hopefully he remembers that this is a family show and it keeps the things in an understandable format. Just well people know people who know who's christendom his demos. They know that joke as well.

A

If you don't know you'll see and then, as a final topic, a victor villain is going to talk about how to implement the single sign-on Microsoft themes tabs using a yo team, so quite nice core and different areas of micro, 365 being covered and also including non development stuff. So this is really really cool and from that perspective, opportunities to participate in a community and if you're interested, let us know- and we want community to have a position or a spot in these goals.

A

So you can actually schedule a demos, a spot, 15 10 to 15-minute spotting these goals and demonstrate some of your let's say: solutions and structures or configurations. They don't have to be open source, but at the same time we don't want to transform this course to be a product selling call. So it's not about demonstrating your product. But if you build something for somebody like I think last week we had a really cool case from three will three wills: three: will it's the company?

A

They had built something really cool for their customer and they were unable to actually share it as an open source, at least yet, but they demonstrated the code and the solution and those are really really powerful. Because then we can understand what's possible within this platform, not just about the dev stuff, but also from a functionality perspective, and the second thing is so: you can contribute in github.

A

That will come back on that one a few times and during this call, if you, if you're intimidated by the Kitab, will help you there, we have initiatives helping on that one as well, so you can learn and use the channels what we have to learn how to power that contribute in github. What does it mean? What is github? Oh, my god. No, no! It's all good, we'll help you there and then the most important thing. Always please, please, please, for provide feedback, provide feedback, provide feedback. We are as a Microsoft.

A

We exist to serve our customers and partners and and the ecosystem. You are our customer. We want to make sure that whatever we are implementing is matching what you would like to use, if there's something which you don't like or something if you like as well, please give us feedback, so we know the areas where we should concentrate and also in the open source side of the house.

A

Please give us feedback on things which we should be adjusting, but also, please give us feedback on the positive feedback on people who are working and using their own time to help you to learn something else or something new now updated as it slide the dislocating fruit super super busy and they're super super busy or busier and busier all the time. But a game is mmm 365, BMB videos, all of them by the way. Also, all the urls are still working over there just being updated and rooted in the right ways.

A

We have kicked off in the open source. We have shared my framework, which can be used for extend Microsoft themes as well plenty of samples, those sample galleries, are really cool and we're looking at potentially to have a centralized sample gallery with pictures and filtering and all that pretty soon available, as well.

A

Well, pretty soon, but we're working on it, and although it has to issue a list, if you're running into any issues well in general in SharePoint development, please let us know we are able to hopefully help with that now coming back on the key top topic quickly. If you are feeling intimidated on github I, don't know how to get started. I, don't know how to edit the stuff and all of that stuff we do have.

A

A chemist sharing is caring initiative, which is basically run by David Warner and Hugo Bernier, and they helped you to learn how to contribute. So it is really targeted from the basics. How do I register myself as a kid hub user, and how do I do my first pull request and what does it mean? What what did? What does pull request mean, and it's completely understandable that if you haven't been in the open source world you're, not aware what is the key table and what does this all means?

A

But if you're interested on helping us join these sessions- and they are really good questions to help you to learn what is a gator? How does it work? How would you contribute and how would you consume the existing examples as well? The other thing what I wanted to call out just a reminder: the latest BMP weekly went live race Church day on Tuesday so day before yesterday, and that's what we tweaked or betrayed, but a lot about to Microsoft 365 platform opportunities from a Microsoft team's perspective.

A

What does it mean for a let's say, an older sharepoint person which is moving from sharepoint to this new world and what are the opportunities for the partners and so is vs and system integrators around the ecosystem, so really cool setup. You can find this one from our YouTube channel or as a podcast at BMV weekly dot. What being don't call me address over there now, if you write something which we should call out in the BMV weekly, please please, please use the hashtag B&B weekly, so we will know about it.

A

One of the key problems. What we keep on, having is that people write awesome stuff to their pork or their medium or whatever the the platform. What they're using but other people, can't find that and we're trying to help with that with the B&B weekly, we call out these articles. We call out to people and we promote, and there they're basically deliverables or their writings and articles in this course in this podcast and in this video blog as well. So please use the hashtag B&B weekly with your links, so we know what you have done.

A

So thank you for that one advance. Now this is really cool as well. It's not precisely related on Microsoft or Microsoft doesn't run this business, but it's related on the on the community side of the house, so Parker's Parker's place is now open. It's the DB Parker place dot shop. This is basically a a centralized location if you're looking into having cool-cool p.m. based Mac. Well, somebody might not like that. These are cool. Somebody might like them that they're really cool, but the player location is now open.

A

All profits of this tour goes to charity, so anything what this is actually getting from them. Let's say what about ever: you're paying it all goes to charity, and it really impress is the sharing, is caring mentality as well, and one of the things what we talked about with David on this one David Warner is that maybe sooner or later, we'll have community designs and ideas.

A

What people can actually share with us and we can actually put them in place to be sold in here and then get the profits again to the charity, for other people to benefit so I think it's a really great idea and it's a great initiative and helping other people in a different way, but again in a powerful way as well, and it's good to say, Parker, logos and pocket pictures and their essay is one of the options in the hoodies and and there's marks and other things as well.

A

But let's actually go to a quick round of a recap on what's happening within the open source project. So, let's start with the MPCA. Some core and I saw a bird on the call, quick update on that one yep.

B

Quick update, maybe slightly longer it today. First, the near future April 2020 list coming up in two weeks, Mallis. So what will be there? We have to ensure I've got like a sync extension method. There's some really cool method that ensures just at catalogs. So if you tell them to stuff an app catalog, well configure it for you, we'll get it up and running and it would be there and you will be ready to deploy your applications. So that's something that we that we missed when working with the provisioning service cause.

B

Sometimes people look and I may have to ask them to create the front, etc. So lots of hassle. Now. Furthermore, Paulo and an urban worked on being able to create modern team sites using an app access token. So we could create a communication site using a pony but not team site, because the SharePoint API is not doing that. Now we actually create the group of 55 group and from there on the SharePoint site, creation will be triggered.

B

So we have an app only support there and that's being built in side score and impartial as well and there's one several fixes done, but one fix that I want to kind of mention. When you use special characters in your passwords, then the OAuth credential flow was failing, which was kind of annoying, but that's fixed now. So that should all be good. Now now the key thing for this one for a call. Every.

C

B

Let's say h1 future: where are we looking systems? Make steps big next steps and maybe yeah you might have some folks might have told like yeah, it's pretty quiet over there, there's not so much happening as in the past, and- and there is a reason for that. The reason is because we actually also in parallel working on some new projects, and one of them is what we call internal for now, a graph first library. So this will be a new dotnet library, focused graph and rest SharePoint as well.

B

Now, why do we are we doing this for folks that have been around for a while the current P and besides Calliope's, we started building that first I think around seven years ago. Wallace them act with something.

A

B

First pieces were written I'm, it isn't that code sure. But if you look at what the five is around the corner, this will be released this year. I would not go. It is quite outdated. It's there's also a tough over it, so we want to start from scratch, build a lightweight new, modern library that uses graph or rests, but then leaves you with a an object model.

B

So you get a model from us where you can kind of navigate the data structures and up my actions on the data, but you as developer, don't have to worry anymore about how to actually make a call, because the library will decide whether there's a graph call a rest call. So now, where are we today with that?

B

We are prototyping it and we have we're aiming at getting an early preview out, probably available for you guys to play around with in the tests around end of the month, so three to four weeks still to go, but then we actually opening up for you to play.

A

B

Also, to provide feedback and to create be ours to help extend it to help, draw it and I. Don't.

A

Think we could just really reiterate what you are saying so and the whole point again on this one is that the craf API surface is all the time evolving and we want to use Microsoft graph, because that is absolutely brilliant.

A

There are, however, certain gaps here and there for SharePoint, especially because your point has to like uh say, API surface so whenever, if you use this library, it will take care of the the mapping between is that capability available in craft or not in craft automatically, and then, whenever it will be introduced in craft, it will also start using the graph side of the house behind the scenes. So it is really there to help you to make your development, as is as possible, use.

B

Developer, don't have to understand anymore whether there is a graph API or not. You use the model.

A

Of Samara yeah, exactly or.

B

And we populate the model and we ensure, when you write something back, that we write things back in in the most optimal way. For example, it it's fully leverages batches, so everything is matched, so it's really clever library that tries to be as performant as possible, but iqs developer having to really understand all the details. So now that being said, that's the new thing. Now. Currently we have two pieces. Go we've been powershell massively used products. Are we abandon those no model? So there will be a major new release of both avi for Easter.

B

They were at Version three and in that v4 for sites go home. Powershell. We want to stop shipping, see some. You see some folder that standard. So at that point the library will run everywhere almost everywhere. I would say so this one of the big things that we want the ship, then Plus will do some cleanup some refactoring.

B

We will probably get rid of some very old stuff in there, so there will be some minor cleanup, but it's essentially stays the same, but then it will run using standard on any platform and there will still be on premises. Support the new library will only be for online, but this one so we'll have fun Bram, so kind of keep working on both sides and eventually, if the new library is getting feature-rich enough, it will start to replace some of the besides core. But that's we'll see how things play out in the future.

B

We'll have time and kind of so everything's will evolve together. Yeah.

A

And immediately when it's let's say mature enough, it will be open source so that everybody can contribute in both sides. Absolutely.

B

Yeah as soon as possible, open source and we'll really ask you to contribute and provide feedback care, absolutely yeah.

A

Cool, let's actually go to the BMP PowerShell side. Then urban. Are you on the core I'm here? Well.

B

Something we mentioned last time already, but the repository has removed. Just like the majority of the other repositories. We moved to the new organization, nothing will change there. We have quite some little small changes in the next release. We will introduce a very interesting command, I think, which will allow you to very easily set up an azure ad application with certificates for app only access to SharePoint, it's a single command lit that does all the work for you. So it generates the self signed certificate. It creates the azure ad app.

B

It will register the certificate with the azure ad app. It will add the certificates to your to your certificate store in Windows. If you have one so otherwise, you can also save their certificates to your file system and it will set up the correct permission scopes and it will ask you to consent to them all in one commandment, so that will be very easy for you to set up and thing and the cool thing of the command for these you're effectively. Don't have to use the PBE PowerShell because it just creates Aradia.

B

So, wherever you need an idea, you could use that single commandlets to define it very simple, as Matt already mentioned, motor team sites now would upon the access tokens will work as of the next release. That's quite cool and Inverlochy will have a bunch of commandlets also released for teams, but that we may see machine I'm, not promising that. Yet that's why there's also no bullet here, but that is in the pipeline and we're getting pretty close with that.

B

So that's on the way to so you will be able, for instance, to create a team and add a channel and add a tap or remove it that if you don't like the wiki tab, which many people don't like you can remove it very commanded. That's pretty cool cool.

A

Moving on on the projects, a quick sec on the modernization, tooling yeah.

B

I can do this really quick. This.

A

B

I've coming April release main thing is that we do a ga of the term wrapping supposed to be tuned to Houston in the March release and a bug fix around handling.

C

B

List columns, so you won't have metadata on side pages. We we have some cases where this comes from a fully supported in the mapping which will fix for the April release, then looking a bit more forward to the future, each one, maybe even hh2. It's like this, we're looking at the defining a model that you can provide input to pay transformation from other sources. So today, patient summation reads: classic pages classic SharePoint pages increase model page great. Now what? If, if you were some legacy portal solution or a legacy wiki tool?

B

There might be other types of sources that you want to kind of migrate into SharePoint and that's what we are looking at defining like what would be.

C

The model for that and implement.

B

That and then for the scanner Tenace out, currently no immediate plans to release to point l11, so nothing special over there in Confessor and.

A

Then we have the new recurrent visitor on this course as well, so Victor, your team's quick update on on what's happening at your team side. Just.

C

So last week we released the new preview version of the 2.13, which is the version which contains a couple of bug fixes, but most importantly, they're single sign-on tabs, which we will have a demo of lost in this hour as well, and quite a few new downloads, but also new newly generated applications. I think is about thousand applications each month generated by the Joe team's generator. So that's cool.

C

We are also increasing the number of tests, both the sort of the unit tests for the generator, but also full integration tests to be verified that everything actually works and that the build actually works with different kind of scenarios and there's a quite a few new suggestions that we've been received, some of which are good first issue. So I'm looking forward to some more contributions, we had some new people and chiming in in the hellacious list, with both with with the feature requests, but also things that they want to fix, etcetera.

C

So please go ahead, suggest new features, but also take take advantage of being part of the community and contribute them and pick up an item or two in there. Thanks.

A

Excellent and then going to the demos. Let's blame me for taking slightly extra time on on the interest. Christiane's is having a surprise demo, which I have no idea either. Is it about horses and submarines? Are we finally getting down.

D

You can see, oh sorry, take it away, so everybody I'm Chris. Let's talk about some cool stuff. You can do alright. So if we go over to our classic warrior horses side here, all right, so our horses, they care about training they care about the proper use of equipment. Of course, as we all do, and so they've tried to make all the manuals that they get for their equipment available, all right, so they've created this manuals document library and it's alright right. It's got the document here which you can see.

D

You know how to read: it they've even provided a few little details, and then we've got these other pieces here which I'm going to get back to which are some resources. They want you to kind of take a look at when you're looking at these things- and this is okay, but it becomes a lot more powerful. We start using something like this with the document library webpart on a modern page. Now we did something similar.

D

What I'm gonna show back in Thanksgiving, so November 28th in this past year, 2019 we've got a whole video on that I. Don't know how to do this with the list. We're gonna take a little further today and show you how to do with the document library, so I'll reference that video a little later, if you guys want to follow along for there, but for now let's go and create a new page, we'll go back home to the death here.

D

We're gonna create a new page where we're gonna hold all of our exciting manuals and give this a little more context right. So it's great page I want to call this thing equipment that sounds exciting right. If we edit that we'll know a little tools, destruction, probably like this little fancy. Here there we go. Okay, that sounds good and then let's change that image back there right, let's add an image. Let's do any cool recent ones. Now we'll do a search, real, quick, it'll, say worse equipment. That sounds good. What could be bad with that?

D

Always gonna do live being searches, there's one right, so we'll grab this a nice horse equipment background. These are all Creative. Commons I will change the focus beautiful stuff here. So now we've got a nice thing here, we'll move my name now start working with this page right. So the first thing I want to do is we're gonna, kill that guy and let's make this into a two columns and we're gonna, add a nice document.

D

Library web part here so we'll just type that in vacuum library and we're gonna grab our manuals list and now those that lovely same thing we saw before shows up here. So that's great I'm gonna hide that command bar, because that's annoying to me well I will get rid of that one of the things we showed you is the way you can connect these to other web parts very kind of miniature applications here. So in this case we're going to take advantage of one called the list properties we're in at the connect button over here.

D

This is three little dots when I click that I'm gonna connect the source. In this case, I'm gonna pick manuals all right and now I can start to see other stuff. Here now I've got us a little bit of delay and how that's showing up. But if we pick one say laser eyeballs, there was all our details right. Well, maybe we don't want to show everything all right, so we're gonna go back in here and we're gonna say you don't know for this one. Let's just show the details all right.

D

We also notice there's something here, though, like the title coming from the actual document is a little more descriptive we'd want that instead, so let's come back and take a look at what we can do to make that even easier. So let's go ahead and save that again. The list properties takes a little bit to update. Sometimes what's one to show, there's just details all right. We gonna add another web part here, my where's my little web part selector there.

D

It is, and this one we're gonna, do the File Viewer we're gonna, build something here and then we're gonna format it so for the file viewer, we're not gonna, actually pick a document right. You could pick a standard doc. You want on that page or even better. You can do that same kind of connection here, so we're gonna connect a source again. We're gonna pick manuals, and so the idea is whenever we select something over here in our document library. We're gonna actually show that file directly on the page when provide the details about it.

D

So that's pretty cool right, so that's alright, but now we can go even further and add something else here. So let's add ourselves a new section all right, so we got a section here, another couple column section and for distinction, we're gonna go to my section background who's, so pretty in this case we're gonna, add an embed all right now with embeds.

D

We've shown this before you can actually so if you're gonna want to bed from YouTube or something you could set this up, and you can put special kind of characters in here right in this embed box and that's pretty awesome in this case. We're gonna do that as well, but instead of just a portion of the piece, we're gonna grab our source manuals and you'll notice here in the list to go back to our list. We have these in bed 1 and embed 2, and we've got just the full-on iframe code I'm.

D

What all we did was we went to like you, we said, share and grab that it that embed code- and we just pasted it right in there. So in this case we can reference that the same way we reference columns in our view, when we're trying to view or list formatting with this square bracket, dollar sign and then the name of our internal column right. So in this case were saying.

D

Bed 1 will leave that it's gonna go ahead and grab that YouTube video that we've got there and we gonna have another one here and grab another embed. In this case we can we're gonna connect it to manuals, doing quite a few connections here very exciting. What I do in dollar sign embed, so you'll notice that I started being prompted for some of those if you're not familiar with your internal names, but that works and I've got another link. This one actress happens to be from Vimeo, because we've got that full iframe in there.

D

We can have all sorts of different sources here. So that's cool right. So now, if we publish this guy will take a look at it. We've got a little miniature application. It's it's alright! Alright, we can come in here we can can choose like laser eyeballs. Writing we're gonna, give that nice PowerPoint view here in just a minute, we'll come down here. We actually have a sway. That's embedded right. We've got a power app, that's embedded, that's cool! We come down the area to reptile tanks, something similar, I see the word document.

D

We can read it here on the page. We can actually take a form right and embed that here and then we've got something from a TED talk, alright, so we're providing a lot more context. This is pretty neat if someone actually wants to edit that, but you know that document they can and that actually brings us to another kind of issue here. We've got this really nice page, but then we, this incredibly ugly, looking web part right.

D

It's a Excel spreadsheet here with all the section information, because we need this information as part of our view in order to have that is for these connections right. But what, if we wanted to? You know clean that up a little bit. Well, we're gonna! That's exciting. The other thing is people oftentimes. Instead of hitting this little selection button, they're gonna sit here.

D

They're gonna click that it's gonna open up a word and they're gonna lose all that context and everything we're trying to get to do, which is use this thing as a kind of connected contextual page. So horses are pretty smart, so they come back to their list and they remember we can do all that formatting stuff, so we're gonna form out our current view, I'm going to start with something that was very similar to a sample. It already exists and hit Advanced Mode, so I can edit the JSON directly.

D

We have this generic video button sample, which is what I talked about where we made kind of a quick video browser for YouTube and again that is a video we did previously. You can check that out, but I'm going to start with that sample code. I'm gonna go ahead and copy that, where I've only edited one little thing, which is where I've set that text content instead of title I set it to file leaf ref all right.

D

So that's how we reference this file name, which is okay but you'll, see you know, I got these manuals directly from the site and it's got this horrible name right. It's got the version. It's got it dating. Nobody really wants to select from that all right. We've got a little icon and that's okay, that's not quite what we want to do. So, let's change this up a little bit. So the first thing we're to do is we need to rid of that icon so see.

D

If I can zoom this a little bit, make it a little easier to see. Okay whoa there we go so instead of a span with the icon, we're gonna make this an image alright and so an icon name. Now we're gonna have a source right. We're gonna provide that now. We've got this nice little app thumbnail.

D

We get here and we can say our size, I'm, gonna, say small, and when I do that, you'll notice now I'm getting that that gets rendered automatically that's pretty right and if I wanted to control, you see I've got a little bit of the sizing here. We're gonna skip that for now, but if you wanted to kind of constraint all that you've got all that power to do that as well doing thaw that line up for this, though, finally for us.

D

Okay, as we mentioned some of these documents right, we actually set the title property in office and that transferred over to our SharePoint list, we'd like to reference that right. So you would think we could just say title give you that, and you cannot so unlike list, you can't reference title at all times we're doing formatting in document libraries. They actually have to be part of the view. So let's go ahead and let's copy this, so I don't lose it I'm gonna cancel! For now. This we get back are kind of our standard interface.

D

Here, one of the strange things is, though, I go into my show/hide columns. You'll, see title is not an option for me here. So what I'm gonna do is I'm gonna go back to our old school I'm gonna edit. The current view and it'll give the second and I come down here and now. I can check title I, so I can add that, to the view, that's all I need to change. I'm hit. Ok, now titles are part of the view. So now I can reference it in my format.

D

So if I go back in I'm, gonna go documents, format current view. They got me to advanced, so I can go ahead. Jason I'm gonna paste. What we've done before I previewed that now now I can say: I've got title, but now I've got a problem. Not every document has a title all right. So now we're gonna write just a really quick. If statement. So let's take this and get rid of that guy I'll actually leave it in here. We're gonna, say equals or say yes, the length remember this isn't the actual length of title.

D

It's gonna be one if it has any content and it's gonna be zero. If it's blank in this case, so I'm gonna, say if length title, then let's use the title alright, but if not, let's use that file deep breath alright. So at least we can see something those are fun to see here. Maybe that and that's okay. Alright, that's a significantly better, but now we just still got this dot docx like that's important to anyone. That's trying to browse a little portal here, so we're gonna.

D

Do a quick substring on this, our file deep breath. What a substring does right! It looks. It gets just the characters starting at zero, so we're going to start at the very beginning and we want to go up to, and in this case we actually want to find that period right. So we're gonna, say index of now we're gonna actually look inside again the file leaf, wrap and when I look inside it I'm gonna be looking for a period. That's all I.

D

Do there know if I preview that that's just gonna strip that off now we've got ourselves a nice little navigational piece, so I'm gonna save that, and now we go back to our exciting new page here. Equipment alright, so show now zoom didn't quite a bit. Let's zoom back out. Okay and let's refresh this, and we should see because we applied that to our because of you now, we've got ourselves a much easier way to view this right. So now, when we go here, we can, you know, click our strapless grenade launchers.

D

We can read the document right here. We can let them even open it if they still want to I, want to read a full screen, but they have all the context with the specific videos or other embeds we wanted them to have. We've got additional details, we're providing it to the list properties that we don't want to always show, because we've got a lot of documents here. We want to show when they click on it right. So now you can start to see.

D

There's real power here, I've created a single page, but by using a list and Thrones have formatted on there. So it doesn't look like an excel sheet. I've now created a miniature application in just a few minutes, and I can go a lot further with this. If you know what I want to do right, I can create this. One. Nice thing I've I've often done is because the document library web part you can specify specific folders. You can create whole pages that are dedicated to the same document library, but have different folders.

D

We're using the same view, you can have multiple views here, really really cool stuff. Okay, alright, so take advantage of that, let's go back and review real quick, so the whole idea is there are several web parts to support these connections? I? Couldn't that list properties we took that looked at File, Viewer embed there are more coming, but there's also full support when you make your own using SharePoint framework. We've got several examples of that in our webparts sample library, or you can see how dynamic data is using there.

D

So if you want to embed and grab some of those same time to properties and provide your own custom displays to create these kind of applications or let your users write, you deploy small pieces here and let them build complex applications using a combination of first-party webparts and your webparts. You could do all that you can drive all that using some nice formats on either your list or your library webparts, all right. So that's about it check out the full documentation.

D

If you check out this, if you go here, that's going to go to that video. Where we've done a video portal using the same kind of concepts using a list and then, of course, we've got the couple of samples here, the generic video button and the document navigator, which is the one I just put together here today. Alright, that's what I got thanks. Everybody thanks Chris.

A

For that one I think a victor. Your.

C

Screen see, let's start sharing my screen thanks, we assigned Chris as usual for an amazing demo, nerd, so I'm not gonna, have any warrior horses in this one. It's gonna be plain old, ABS, typescript and some Asher ad stuff, mostly Austrailia. Actually that's what we spend more time. So what we want to do today is sort of use, a new feature which is in preview. So what we want to do is create create a tab which uses the single sign-on features in Marshall teams.

C

It's always been sort of a problem or or not a problem, but but you had to do quite a lot of work to get single sign-on to work, to actually verify that the user is signed in when you're creating a team's tab. If you using sharp on framework, you get all of that for free, but assuming you're building an external application, you're converting one of your existing web applications, for instance, into the team's tab, or you want to do that provided host way of building applications both for sharepoint and teams.

C

You you need to set up single sign-on four to four tabs and that's a new feature, that's available in Developer Preview right now, and it requires you to do some configuration in the natural ad and create an application. Then use the yo team's generative scaffold out the project, and then that will show you all the code that is required for you.

C

But it will also discuss some of the issues that Mike rice once you start when once you've done this and want to do more with it essentially, which are someone on the some our limitations right now. Some of it are limitations in Azure ad and the service itself. But let's get started so I have a team's, the talent, hair and with teams and and the creative team, and we want to create a simple tab here, but we can verify that we actually signed in so that we're gonna do all that.

C

But to do that, the first thing we need to do. We need to host this application somewhere and, as you know, the team's tab is sort of an iframe to somewhere else and to do this, I actually prepared by using an grok, so I can host it locally. Here we need a public address of all the URLs I'm using Hank rock and I set up a reserve in the name here, for this demo called tab, demo and rock pile.

C

So this is the URL I need to have and there's a couple of this is super important that you decide this beforehand. Of course you can change it later, but it will affect some of the decisions that you do. The second thing you cannot use as your websites I'll stay. That say that already here, I come back to that's. Why it's so later, so don't use anything my application, natashawehbe size, dot, nuts, you need something else, but we'll come back to that one. The next step you do.

C

Is you go to ad hoc portal that I forgot coms, you log into your Astra 80, and you go to client app registrations and create a new application?

C

Let's see and we'll, let's create a new one, so I create click on new registration, P and B tab, and so demo then I choose that I want to use this for any organization of directory sort of a multi-tenant solution, then I'll be don't have to do anything more than this I don't have to specify the redirect URI here, click register that will create my application and then there's a couple of other things.

C

We need to do with this one, which you typically what you done is you used API permissions and then and granted permissions to this one we'll do that as well. But the first thing we need to do is that we need to expose an API here. Of course, I need to save the application ID. So let's actually do that. So we have it. Let's open up a notepad and save it for later.

C

Let's move that we know over here and say it like that: I want my hat by day, we'll need this one. In a second like that, then we go to the expulsion API as I mentioned, and what we need to do here is the first thing is to define an application. Id URI, that's the small thing you see up here: I click on set. What would happen is, of course a tradie is great, will suggest, suggest a name for us an enormous circumstances. This will work perfectly fine. We can tweak.

C

You didn't have something else here, but when it comes to teams as cell tabs, when you need to do something differently in between here, so let's zoom in here in between API colon, slash slash in between here, we need to add our DNS or the URL of our site. So what I'll do is add: tab demo and grok dot, io /, let's zoom in again, and take a look at that. So what I did here, I, let the API starts b assists I, let the goo-goo it here, which is my app ID BSS.

C

But what I did is that I actually add my URL in here and thus- and this is super important, because teams will actually use this at runtime to verify that the application ID URI for the application using and the tab. You want to show that those URLs are the same for security reasons. So I'll take this one click Save and go back here and paste it in here. Just so, we have it for later. So that's the second step. You need to do after register in your heart and so a couple of things.

C

As I mentioned, you can't use Asha website stuff, not here for security reasons, and that is sort of a natural editing right now they consider a sure the websites, dotnet, insecure and rock dot IO is not considered insecure.

C

In this case, you are not allowed to use multiple application, ID or eyes here, which might be an issue if you have a test devastating environment, which means that you need to setup multiple applications, and you need to have a lot in your build pipeline whatever when you, when you're, actually scaffolding out your applications later, but that is sort of an extra addition. You can do some Friday night and exercise on that.

C

Next step we need to do here is to add a scope: I need to create a custom scope for the AP I'm exposing here, so let and it has to be called access, as you, sir, so access underscore s underscore user, then I need to choose that consent. Here, both admin users should be able to consent. This and I need to write some consent stuff here for admin, just this lorem ipsum.

C

This is, of course you should have pretty descriptions in here, so that I'd mean that the user concerned screens looks good, and why do they need consent? This and, of course it has to be enabled. Then we click add scope. So that means we we have. We have added the scope here, as you can see, it's enabled for that app, ID, URI and and if we scroll back all the way here, you can see we have that by the your I, slash our scope. Name axis underscore s underscore user.

C

The next thing I need to do is that I need to authorize to client applications and the tools to client applications is the team's a desktop and mobile application and the team's web application. There are two actually two different apps radio applications so and I have the goods somewhere. Here. Let's see these are, of course, in official documentation, but the first one is this one that you could. If you quick, you can remember that one until you do this, but yes, it's in the documentation, it will be in this recording.

C

So that's what you have in here and I would need to connect that, to my scope, that I just created so do add application and, yes, there's no good sort of lookup. So you know what client this is you essentially need to look into. The documentation at Doc's are calm for those two, and then we have the other one, which is not a good here, and this one and I connected to that scope as well and click add application.

C

So that was sort of the third step. I need to do. First, we created up the case we create generated up by DRI.

C

We generated the scope, we added the authorized, client applications, and now the finest that we need to do is grant some permissions, and this sound sounds like if you are familiar with what you sort of deal with when you're, creating an ad normal. Our ad application and whatnot is you're going here and a sign sort of mail that read and those kind of things. Unfortunately, you cannot do that with teams tabs in SSO.

C

The only thing you can add and master is that you go click, Add, permission, click, my suit growth and delegate the permissions, and you had email, offline access, open, ID to profile. Those four, including the user doctrine, is all that you actually can have for in the tab.

C

That there's a couple of the reasons we'll show that in the demo later and come back to that how we can get access to the other stuff, but the whole idea with the tabs SSO is actually very fining verifying that the user is signed in not granting access token to other resources. But this this was required for for the whole process to work and of course you can grant consent and everything in here, so we grant consent directly to my whole tenant. So we don't have to worry about those kind of things now.

C

My application is set up and I should jump over to my team's generator and what I have is I. Have the latest preview of the young Monti steam generator, so I type yo teams I will actually have pre count this, and so we don't have to wait for the NPM packages so I'd skip there. I need to create the director for a Soria demo demo like that perfect. Then your teams I do skip installs.

C

We don't have to look at the NPM that it is installing and let that start and what will happen now is we go through the wizard and we looked at it in and then a couple weeks ago as well, but when we will choose yes, when we're being asked about the tab and using this as Oh, so this takes another few minutes.

C

Its total to start here in the lake in the afternoon been working too hard today and also we make sure sure to share the URL to the documentation where you find those goods for the web, client and and the mobile client. Yes yeah. So here you see I'm using 213, not 0 preview. I just will follow the whistle here hope not to do anything special use. The current folder and title of my project name version. This doesn't really matter.

C

Oh, it has to be 1.5 and above of course, but I mentioned sort of that this is in Developer Preview, but that has nothing to do with the manifest version rather than it has to be 1.5 or DPP. You choose that one skip that one and the only thing we're gonna add here, is to add a tab, and just you can't care- and here is where I need to type my a URL that we created the first so tab, demo, dot n drop that I'll skip test, fit testing framework.

C

We skip up insides demo, tab conflict that a configurable one should be available, vaulting teams, channels and group chats. Then we have the magic kind of thing here which says: do you require a do single sign-on support for the tab? And we choose yes here and then we actually get getting asked for the two values that we created in the azure ad portal, the first one being the the application ID.

C

So we pasted up one cat and the second one is application, Heidi or I and as you can see, since we already inserted the URL up here and we inserted app ID, we assume I mean- or we know that this is gonna- be the the URL, the app ID URI you have to do so. We just need to take into her unless you type something or scripted previously.

C

We skip the sharepoint online integration here and click enter, and this will actually create all the files that you need for this, and I said in order to save some time. I've already created the project, so let's go into tab so demo open operation steal your code and meanwhile that is noting and we'll take a look at that one in a second, let's start the application in the background, which means that we'll use gulp, no I can't do that. Yet I need to do one thing, since we created a new application just here.

C

So what we have in the German generated project- let's zoom in here a bit as well- is that we all do these kind of parameters you entered. We put them in the dot n file here, so I need to copy the cop them from the other project into this freakin demo here and the only pre coming with this demo is essentially the rather we already executed npm install. So we don't have to wait for those packages.

C

I haven't changed a single line of code in here, but now we have there the one we created together perfect. Let's start the server, this is a actually, as I said. It's a web application hosted on the using Angra core host my local machine and exposed publicly through angles to do and rock slash serve.

C

We can skip limiting here, so we save some time and compiling and let's see if that works, and then we go take a look at the code and what's actually make this all this magic happen and was taken second or two as I said, yeah there we are and rocks are starting and rock in the background we compile and generate the manifest and all of that.

C

So as you see we have these kind of, we have the ID here that by the uriah as well under source, we have the manifest, which is the JSON file, that it defines your application. And what happens when we add this SSL tab.

C

It's a normal configurable tab with the config file here, but at the bottom of this page we would actually get something called web application info and this would have a reference to your ID and the application, ID or I, and that will during runtime or the compile time actually replace with those variables we had in there. But this is sort of the magic thing that will make the single sign-on work in our application.

C

We have some a client-side script for the tab, building react, and this is just the default scaffolding I haven't done anything about it, but what it will do once it's initialized, it will get the context and finally, with you will use a method called get auth token of the team's JavaScript SDK and that's nothing you need to pass in here or configure in here essentially more than three parameters. So the first one is the success callback. What will happen when we get the token?

C

The second one is to failure callback, and that is if an error happens, and then you need to pass resources, and this is actually not documented. If you run it in JavaScript, you don't need this, but if you you do it using typescript, that is actually a part of the types you need to have something in there or you can essentially put whatever you want in here, but my guest right now haven't been yet verified. Yet is that you need to use that part by the URI that you have?

C

Hopefully that's how it's supposed to work, but I said: there's no documentation or anything about that this so far, but this works. So that's good thing and what I do here if we get a successful token here, so I'm doing a simple Java code of the the code of this one and get the username.

C

So, let's see if our application has started. Yes, it's up and running, let's go to make sure teams and hide the tab and see if it works. So what I do here if I want to add a new application? I click on manage team choose apps and in the lower right corner, do is site loading and of course, I can upload to my talent, but I prefer to do it. This way, and then we should actually be we already have it in here. I can just remove it.

C

So you show everything when I start so tested this one before I put a custom hat come on: let's go to C code, demos PMP.

C

There we are on the package, we have tabs so demo, that's it and, as you can see here, it contains the tab. I can click Add and it will be uploaded to teams or the manifest will be uploaded and we can go back to our channels and try to have this application. We click on plus here and we will have tab SSO demo, which is my tab. As I said, this is all generated by default by the generators and there's no code changes or anything.

C

The only thing we did here was sort of fixed at those two IDs and we can have just a dummy value in the configuration the tab will be configured added in here, and hopefully you can see here. This is hello undefined, but now it's a cell, hello Victor. So it's actually a little bit the delay the first time you do this and the code yeah. We have you're right for right now, it's just undefined there, but you can add whatever you want in there. So if I didn't know this much faster, it's cached etc.

C

The thing I want to show you is sort of. If we do, let's see if we can get in here and the breakpoint, hopefully the developer, is loading I want to show you that your token here for some of you who wants to access the graph- and this is where where it doesn't really work, as you expect so I have a breakpoint in here so in a bit essentially in that code in the success callback method is, if you loaded reload the page and we're at the tab.

C

No, it didn't stick so that yeah there it is so yeah. If we get out this. Take this token here and copy this one and then open that up rocketing, jort m/s see if you can get it there. I just got a part of it. Sorry about that! Just try to get the full on.

C

This is how it is when it's zoomed in there it is, but I want to show you what this. Your token is that it doesn't really look like the normal ones. You have yeah, oh it's a normal you're talking, but not the one. You expect when you get from the grant from the graph. So what's happened here. Is that the audience is my application, 90, of course, but I don't have any scope more than the one that I'd requested or the crate the one I created.

C

So I can't use this one to to get the information from the Microsoft crop right now, but the guidance from from the team's team on how to do this. It's essentially used on behalf of hello. So what you need to do is essentially send this token back to the server side, then using the server side, implementation and, on behalf on down the hall flow, get in a new access token, which can access the graph and then send that back to the client, and then the client can use that to go to the graph.

C

Yes, it's not optimal, but that's the way it works. The thing you need to do that you need to do, implement your own pre concerned or the consent dialog and those kind of things in that scenario as well, but that's sort of that the big caveat right now. The only thing you can essentially do with this as tab as so is verify that the user is actually signed in and you can get the username, the preferred username and essentially that the tenant ID and those kind of things.

C

So this is a data you can work with. So hopefully we can go back in the future and talking about how you do that server-side on behalf of flow to actually get to the graph permissions and and or we actually considering, adding that to the part of the generator as well. So it scaffolds out. Oh, oh, that's code for you, because there is, unfortunately a little bit of work for you to do.

C

Thanks I almost used up all the time there yep.

A

They're really well used time, so let me share my screen and and we're gonna close up as well. So thank you Victor on that. One really really useful demo for understanding how things work and- and that also knows your ad authenticated process and and everything got sorted out. There was a one question related on that, but I think the question game just before you showed what you were doing. So if you see that in two chance- but that was all we kind of covered today- is that that was christened and Victor.

A

Thank you for the awesome demos. The recording will be out in the YouTube channel within 24 hours and the demo slightly later than next week as an individual videos as well. So you can easily find them in the future on, unfortunately, no time for Q&A today, next Microsoft 365, developer, special interest group meeting is in April 16th and then the next year bond framework. Special interest group meeting is a week from now on, Thursday at 9th of April. But that's all what we're going to do today and so learn a reuse share.

A

We can update some of the URLs and landing pages pretty soon or not arresting the name changes, but that's it for now have a great Thursday stay safe and hopefully we'll see you next week as well. Thank you, bye, bye,.