Microsoft 365 Community Viva Connections & SharePoint Framework, 27 Feb 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: SharePoint PnP - SPFx & JavaScript SIG community call – 27th of February 2020

Description

Recording of the SharePoint - SPFx and JavaScript (client-side) development Special Interest Group community call from February 27, 2020.

Updates on SharePoint Community resources and activity and from Microsoft SharePoint engineering. PnPjs v2.0.3 was released on Feb 14th, PnP Office 365 CLI - preview v2.7 released, and a capability coming soon in the CLI is SPFx Doctor. React Controls - Beta v1.17 available, PnP SPFx generator v1.12 is also available.

Two demos are delivered in this session. 1) Building Outlook Web Apps using SharePoint Framework and Microsoft Graph. This demo delivered by Markus Möller, focuses on a web part that enables the user to select a folder on a OneDrive, in a Group, or in a Microsoft Team in which to store an e-mail. Behind the scenes, the web part delivers the necessary methods to move large and small mails through Graph – MimeStream to their destination. 2) Office 365 group management solution built with SharePoint Framework and Microsoft Graph – Nanddeep Nachan walks viewers through a multi-functional SPFx web part/sample that’s effectively a single front-end for all things related to Office 365 group management. The web part uses Graph to access basic information about public and private groups. The user is then able to join or leave groups (and in the case of joining a private group, a Power Automate flow that can be triggered requesting Group Admin approval), manage group administrators, browse Microsoft Teams associated with a selected group, and finally to set up a new group.

This call was hosted by Vesa Juvonen (Microsoft).

• Demo: Building Outlook Web Apps using SharePoint Framework and Microsoft Graph | Markus Möller (Avanade) | @Moeller2_0
• Demo: Office 365 group management solution built with SharePoint Framework and Microsoft Graph | Nanddeep Nachan | @NanddeepNachan

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 SPFx & JS Dev SIG community calls: https://www.youtube.com/playlist?list=PLR9nK3mnD-OXdcwfcHGsGr78nHWLRsv1x

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

A

Welcome everybody: this is chiffon framework and JavaScript special interest group. This is the bi-weekly sync. It is February 27th one day to go still in and this month, isn't it or is it actually 29th a special 29th day? Actually, isn't it it's in Saturday, actually, 29th I can't remember anyway, it is 2020 and it is typical. Yes, two days, thank you. It is to be called by. We click over. We talk about everything around client-side development in the context of SharePoint, but also actually nowadays more on the context of teams and also in office pattern.

A

So as part of all of this transition and I'm gonna ramble here slightly here and the start, we are gradually moving into the reposition, the sharepoint B&B back to its original name, which was actually office, 365, developer patterns and practices. But now the office 365 is getting renamed, so we're kind of a crutch we'll be moving into the. Moreover, our community will be renamed. Community activities will be remain, renamed, there's a Microsoft 365 patterns and practices, and not just div but also the other stuff as well.

A

So just letting you know there as we're moving along on this journey now is also in this case. Sharepoint framework is potentially getting renamed or sooner or later, potentially we will see what's going to happen there. So we're looking into all of these name change is happening because shipments framework- it's not just about SharePoint anymore, and it makes sense, potentially debris made that anyway, let's go move forward on today's call and if there's any immediate, critical questions, let me know on the chat.

A

I can see that on one of the screens, so today's agenda, we can talk about quick updates on the SharePoint framework. Nothing too dramatic, all actually there, so not too much updates right. Now we're kind of a setting up our scene for the spring conference season, which is built on sharepoint conference coming up in May and also the kind of our big announcement days next time now we'll do a quick of plates on our open source project, so PHAs officer, 365, CLI, SPFs, reusable conscience and EMP yeoman generator.

A

It might be that's in in future, we'll cover also yeoman generator for teams here, just a setting you the scene on the future, just and also the demos we originally were intended to have tree demos. Today, unfortunately, Martin hatch had to cancel, do an unexpected situation from his timing or from his timing. Restrictive. So we'll have two demos, and after that, potentially time for Q&A, but Marcus and non deep in this case doesn't have to rush.

A

They can actually concentrate on a demo and hopefully we'll still have time for Q&A in the end, we'll see how the day goes. It really depends on how many questions are also adding on the chat.

A

Now, if you recap on a free kept slides for everybody, just making sure that everybody is aware of these things, because there is new persons. Turning on this community call as well. That's already noted on the chance. So, first of all- and there are opportunities for you to participate in our community and in this community course as well, so you can definitely request a demos, but in this call we actually value tremendously our community to do this demo. So it we don't have to build as a Microsoft or an NDE to do that.

A

Rather you as a person who write something for the real world, customers or real world end users.

A

It would be awesome to say those things and those learnings as well, and so that could be anything around SharePoint framework with port application, customizer Microsoft themes, extensibility related on SharePoint, same work or client-side, develop the nor and so on, and and if you're interested just being us and we'll set you a thing over, so you can demo something of relied on PHAs office, 365, CLI or SPF X, reusable controls and the government generator more than welcome to us as well, because we always learn so much from this community demos.

A

Contributing github is also more than welcome. So we do have multiple different kids of activities. We are doing again: small adjustments on the github repos and their movement, we're trying to kind of a centralized all of our open source repositories and projects to the B&B Kidz hub organizations, just to make sure that people are kind of a consider. What is an open source and community treatment versus what is actually Microsoft, litt and Microsoft documentation, and so on?

A

So you will see pretty soon some of the open source projects getting moved from office dev our in the from the SharePoint organization, the PNP organization and github. So we're just kind of centralizing things so making it hopefully easier for your different things, but regardless of those movements and by the way the movements are completely seamless, they do not impact you, even though you would have have a local copy in your computer. Github is a smart enough to actually deal with move ends as well. We do welcome pull requests.

A

We do welcome issues if you find something we're trying to also do some plenty of pain up on the issue list. We do know that some of the issues I start getting out of control, so we need to do some cleaning there and then the most important thing I provide feedback.

A

So we know what is skewed to what is not good and also positive feedback is more than encouraged, so we're living in this super HR and Ana super active world nowadays and people tend to always provide negative feedback for open source assets and open source projects. When something isn't working, you hear about those things, and it's completely fine to remind that. These people who are actually spending their own time for the benefit of you for free that they are actually doing something useful. So, let's try to kind of embrace the culture of positivity as well.

A

So not only the negative thing is because then that balances out nicely on the community cute now quick recap on the resources ship on their docks. They came assess the detox videos again assess the videos again: okay, missus PDF issues is to issue list and then open sources in a github that comes a SharePoint and Kate comes to us.

A

Bmp, like said we're centralizing a lot of the open source projects now on the PMPA side, just make sure, because they're not really specific to sharepoint or they're, not specific to teams and they're open source community driven projects. They will be moved to the BMP organization. You can buy the way, also see around the naming chances.

A

You can also see that in this beta videos section, our YouTube channel has been pretty reason to renamed as the Microsoft 365 and SharePoint community, a YouTube channel where we play have plenty of the community videos as well cute, quick update on the SharePoint framework first and then we move into the open source project, other open source project and then demos of today we are starting from markers. So quick updates.

A

This is actually a reminder from the last time we for us to personal applications, which open framework is a massive deal, and we really really want people to actually consider this as an option to implement accessibility in teams as a personal apps or as a web as a si tab in Microsoft themes, channels and because it is so easy to do, and we do have a nice tutorials available on this one.

A

And there is a specific video pretty recently added on the YouTube channel, which is really around the fact that okay, how would I create or take an existing web part and share one framework paper and expose that as a personal application? Technically, it's nothing more than one attribute in the manifest.

A

So it's critical that it's so simple that you can just target your extensibility in themes or in SharePoint or in future in office settings as well, and also in this case, you can actually say that you can easily pin the left navigation and the direct application in the left navigation of Mike's of teams, and you can actually force that to be there for the your employees of your company as well using the application policies.

A

So it's pretty cool set up which is available with Microsoft themes and thank you by the way David on the link around that one now. The second thing, what I actually shared in social media like one hour ago, is that we we did pretty recently do a refresh on all of our main getting started tutorials, and this includes all of the the basic shape on frameworks.

A

Tutorials like set up your office racist for tenon, including how to get one tenant for free, which will renew automatically how to set up your development environment gets getting started and extensions, and all of that. So all of these tutorials have been refreshed either in well actually latest in. In early February, but we never actually told that they're being refreshed, so just making sure that everybody is up-to-date, that they are updated.

A

The videos have been updated and they're all using SharePoint framework 1.10, which is the latest version available, so making sure that if you follow up on the step on the on the video or in written form on, you will achieve the end result, which is basically learning how do how to create these things in practice, and if something is missing by the way on this tutorials.

A

Please please, please do let us know we're highly interested in knowing what do you need to be able to successful in your work, because we want to help you on that journey. So, if every now and then we hear about well, why doesn't Microsoft actually understand that I need x and y and z? Tell us tell us what you need and we can help you.

A

That's really the key in all of this discussion and that's why this call actually exists and we are tracking what's happening in the chat window and if you have any any requests. Please please please let us know. That's super super important now on the road web side of the house, what's happening after the 1.10 release, 1.10 released, what's already like a month ago already, and we haven't yet scheduled the 1.11 release. It will come this spring. We are kind of aligning our work.

A

There's active work being done on the store front, so we're looking into the store policies and how what does it actually mean that SharePoint framework is going to be supported in SharePoint in the store in the app source, we're also looking into having that unified tool chain in Microsoft rate 65?

A

So what does it mean to create a application which is using a fluid framework behind off the scenes, and then the application can select where it's being surfaced, it's being surfaced in teams or in SharePoint or in office settings or as an office tenant, so basically really I'm. Investing on that interent, unified tool, chain scenario and ativ support framework, which is pretty cool, uber Safari framework has to be released before you can actually do that. Fluid framework is currently in preview.

A

By the way, it is a critical set up faster, inner loop means that we are targeting monthly releases. I can't promise when, if that happens, and then more extensions means that we need add, do more capabilities in a SharePoint portals to support your visits to be added on the Left navigation navigation, the header footer, a Content footer on all of that, and we absolutely understand that that's a priority, but we're looking into when we can actually invest on that. At the same time, we are also investing heavily on the under general.

A

Let's say improvements in the SharePoint Online like the performance improvements and producing debates loads times, and all of that which is a high-priority thing as well, so making sure that everybody's have their own those things now p.m. PJs and clients at libraries, quick update on this one. The latest version two point two point: zero three and we were to say small patch version on 2.0 version that was released on the 14th of faith, it's kind of a Valentine's Day gift and- and that was basically the last thing.

A

What Patrick really wanted to do before he went now on a family leave, so he is he's potentially getting a additional family member and he can tell what happens and where happens when he is back, but he's now right now on the on the family leave and he is slow on the responses in the Kitab, because then his obviously prioritizing the time with family there's also two few videos that there's new videos. There is related on PM, hsv-2 usage, so introduction to PM PJs v2 by david owner and deep dive on selective import.

A

So with v2 you can selectively import what's relevant for you in the PM theatres, rather than always bundle in the whole package and that's a really really cool feature and david is walking through that in two videos. In the background no, like said patrick, is now on the family leave. It doesn't mean that if nothing is happening, if there's any critical, things will obviously work on those things. But technically the 2.0 we're not aware of any critical things. We're not aware of any massive gaps.

A

It seems to be working really well, there's no further issues known issues which we need to jump in to keep on pushing pull requests and issues. If there's any, there might be small delays on processing them now, moving on things office, traces to our CLI new preview version of 2.7, the commands for comment, completion and power, shells of data integration, power, adding teams tabs using the CLI retrieving, asha, ad actual assignments and so understanding.

A

What are those settings in Azure ad reporting office, traces to a content usage listing deleted site collections are removing sharepoint organization, as that library is, there is already a capability of creating them now. This additional command will then support our so removing them also what's really cool and what has been being built by walt again and and many many others is the SPF x, dr command, which is basically verifying that your setup is ready to go for your target environment. So this is basically gonna address, one of the classic requests.

A

What what we're getting from you, which says: hey, I'm, building stuff for Chevron, 2016 or I'm, building stuff for Chapman 2019? What should I actually install is my environment ready to go? Is it now fine or do I? Should I do something else and SPF X, dr. Command is basically targeted for that one. So that should be super super useful and and reducing them to questions on pay and my stuff. My environment isn't working. What's wrong, you'll run the command.

A

It will tell you what's wrong, that's really the objective of that one, so really cool stuff, now on reusable components and control site and not much here happening so Elia who's. The lead here has been quite busy on the on the conference conference right right now, but he is actively looking into the pro-- requests and there's a beta version. 1.17 version available on the react controls where we are apparently getting much more much more submissions as well. So these are SPF X controls and react controls which are using office.

A

Ui fabric react, but they are context aware. So as an example, if you use a list beaker, you don't actually need to define where the lists are coming from. You can just with the properties say that I wanna have lists from the sides which are not hidden and then all of the HDD, because behind, if the same stuff automatically done so, it's kind of a wrapper and an abstraction layer on top of the office UI fabric react making your life easier.

A

You and definitely we recommend you to have a look on that on the react, property control side- and this has not actually had that much redevelopment recently. But it's not that we wouldn't be interested it's actually because it seems to be quite feature complete, so to say, and there's always room for improvements, but we haven't seen that many new submissions and asks related on new features on the property, pain and probably the control side.

A

So if there's anything please do let us know on the issue is so we understand what should be added as a functionality, because that's again super important. We want to do stuff for you and benefit your objectives rather than building something for the sake of building something.

A

That's not a smart thing to do, and then the final piece before we go to the markers mirrors, dimmer DMBS, VFX generator and since the Greek updates on that one 1.12 is out around that one, and that has a native support now for aralia IO, so you're able to basically target your solutions not to be created using react or angular or view rather just targeted them using over alia.

A

So if you prefer or Rayleigh as the chosen JavaScript framework, which you want to build, we in SharePoint framework, obviously, and in a shipment online, we support any framework. So you can use the the BMPs by FX generator. Then, to give you the scaffold starting point of building those web parts using the over a layer style and that's pretty cool as well. Now there is a work ongoing here related on angular 9. So if you are interested on the on helping here, angular 9 is out I.

A

Think it's out and Stephan power is looking into any assistance there to making sure that we can actually incorporate angular 9 support in this open source generator as well, because that will be definitely beneficial for those partners and customers. Who've chosen angular as their chosen framework for the development now there's a question from Rolf related on a replace or considered as a framework. Yes, we've been having. Actually we have had discussion with Hanselman in the ESB C, so India and Prague pretty recently.

A

That was actually in December that we should start doing a proof of concept related on Placer right now. The place where bundle sizes are pretty big and it has a slightly different perspective than and then actually having individual, let's say web parts or what we touch in the UI loaded separately. But again, we're looking into that. We're highly interested in are seeing how we can actually make that sort of thing happened and making some things well. First of all start with a proof of concept and then move forward from there.

A

But let's see how that goes, and if somebody actually has a proof of concept on that. We were highly interested in hearing your your let's say, testing any but around that as well, but now, let's actually go to the demo section and if I'm guessing I our situation right, Marcus you're on the call I am.

B

Yes, so um yeah, why come from my site? What I want to show you today is the new capability, how to create an Outlook, add-in, Outlook, Web Access, with SharePoint framework and I'm heavily using as well in Microsoft graph here for my demo case, but first for those of you who might not know me, my name is Marcus Mara I work for a Vinod in Germany. You can find me on Twitter as well as on my blog post.

B

I, do not present the first time here, but the second only- and luckily we found this lot today, because I'm also having a hurt. Your family live in two weeks or so, but see you something in my demo on that, as well, so about the story. What I'm going to show arm would like to introduce. You is what do you like to against the intro is to start complete mates to onedrive and or Microsoft teams? What we have to do for this story is to rest get the outlook context from the current man.

B

Then we have to browse our targets, onedrive groups or teams for us to find a position where to store it, and then we have to grab the full mail as a Mike as a mine stream with Microsoft graph and finally store it and in storing you have two options with Microsoft graph, the first. This one is for smaller files, smaller in four megabyte, and this is a quite simple story and for big files greater than four megabyte. You have to do it a bit more complex.

B

What I will show you in the demo exactly um in terms of code as well. The first thing that third and the fourth thing routing targets is a bit complex to show to demonstrate- and this is why I will skip this, and there are also other great stories out there that you can use. So when we go to verge of studio code for a wire to show the solution for an outlook at end, we first need two things. We need a manifest file.

B

This is in the office at in folder, and here, for instance, we can give the display name or a description of our add in the second thing and the first part of the demonstration is in a web part. We first need to retrieve the context, and this is shown here so would we retrieve the context and the mayor and the item ID and the subject? And finally, in a controller, we have some methods to save our mate Shivam a- and this is the API for that with graph.

B

So get the message: get the mail ID, which we retrieved and the value, and once we retrieve that we can check the size and either save it in a normal way or in a big way. The normal way is quite easy, simply stored away and the big mayor. We have to open up an upload stream first and then we will upload the may and slices until we have no portions left.

B

How does this look like in action.

B

We first have a small major demo made for my daughter expected to be born in two weeks around. She just want to introduce herself right now. In the context of this mayor. We have our I caught it in this very copy to SharePoint outlook Eden, which we can open up and once this is running, we first hit here our context. We have our mail and we see that this may as an item ID and a subject the subject we will only use later for the file name of the storage.

B

Now we have our onedrive, our teams and our groups entry points. For instance, we can start to browse in onedrive. Here takes a while, but here we have our folder structure and we can move mouse to our folder structure. Quite the same like thought of the Box capability from SharePoint, for instance, and then, for instance, we can move to a subfolder and we can save it here and now we have four small mail. You see this is only a text mayor and here on the response links you can clearly see.

B

This is a really small mail, so we will only jump in our normal may if I normal, safe method, and we can only save it away. This doesn't take long. We will return a success message here. That's all we did so far and that's done now the same, but how does it look like when we have a much bigger male? This male is around 12 megabyte in size, because this is a high-resolution photo, and what we can do here is that same.

B

Have again our mail item in our subject? Now: let's go to teams, for instance, you will see lots of teams and pick one can browse through the documents. Library again we have some folders here and save it again.

B

This takes some time now you can see, because now what he's doing is he's retrieving the mail from graph, so this 12 megabyte in size at the mine stream and there we are- and here we see the response length- is much much bigger than our seismic and when we jump in we we are going to our big mail sailings.

B

Once we move forward, you can see again here that we are here in our upload maze. We already created an upstream above. This is quite simple: you can see from the code, but when you later check the code or my or post on this, but here what I want to show is the upload mail slices. So we are separating this in portions of 320. Kilobytes multiplied was 5, but you always have to use 320 kilobytes in size, so what he does now after every slice, he checks. If the response contains an ID.

B

This is currently undefined, and this takes several times now, but not that much and there we are done now. This is how the savings of big files and Microsoft graph work, and now, let's quickly jump to the results again yeah and my onedrive and attachments for the one subfolder one- and you know it was our mail and once we open this, a normal May, it's easily, it can be opened fully in preview mode.

B

Even but when we go to our teams and check the big one in team number 14 in the files, it was for that one I think and I think it was subfolder one there we have the big mail. This does not really have a preview, because that's two big teams cannot handle that, but we can download it.

B

And we can open that as well and there it is.

B

That's all from my demo side, some things what I would like to do in the future on this new topic is what I showed you. It's the only way in terms of debugging what I currently found as a solution, so you can upload the app with build, not a ship mode, but in the normal, deep art mode, and then you can load it from I'm doing here.

B

I can show you here that I'm having a card in the background which is serving that so this works, and then you can debug it inside your browser, but I would like to have a better capability here and also as a hint a visa. You said this on the documentation. This is not quite occu mended. At the moment, yeah I would like to find out the better way for that. I would like to experiment more with the outlook manifest because, of course, you can also change the logo.

B

You can try to arrange later groups with that actions, also in a ribbon once this is available, and this is the final thing once this is available or the office applications as well, and then I would like to see new ones on this idea to store something or also create totally new ideas to work with PowerPoint Word Excel as well. Finally, just for the recording also as well in my resources, I have a blog series on that topic and also an Aspie of example, and that was from my side. Thank you.

A

Don't stop, don't stop staring, don't assume that people always want to run away. Can we come back on the solution? So let's have this opportunity because we have some extra time because market.

B

A

Here and can I just in point for those who are not aware how what aware did we ask the permissions on the crafts just to recap that and what kind of permissions are we using in this case that.

B

Was in the country package package solution, yeah.

A

B

I have to add this, because maybe someone is thinking when he goes to my blog serious, maybe I can as well I published this blog serious I. Think only four days after this capability with SPF X and our evidence went life. But honestly, 80% of this code would also work in a web part, so I have to admit: I already wrote it in last summer and was just waiting for the publication of this capability and slightly adapt this or this just as a hint.

B

Maybe you also have done this already reused components from SharePoint web parts to team's applications. Also, you can do the same if you have the same idea same working functionality from web parts to look at it in sand for something so long time ago. That I came across this. But indeed you need quite a lot here, and this depends on my solution. So you need group, write or read all because I am retrieving all the groups the user could have. If you don't need that you can skip it, but I think it's the same!

B

For teams you need user read, you need files, read and write rewrite, of course, and you need married because you need to retrieve the mail yeah and finally, the site's read write all I think this is not necessary, because I think I dropped out for a while the capability to start to sharpen sites as well. But this could work the same way. Couch.

A

And then also the maybe the one thing to point out so or the: how did we the office add in folder and just to be in point that one that you need to run to one point: 10 SPF X in the preview mode, so because add a mode to be able to get that by default, generating what's interesting in there, actually just just to pinpoint how we implemented this, at least in a beta.

A

So if you open up the manifest you can scroll down on the the URL, which is something like office, add in all the way, the aspx page there we go that outlook outer Luke how's. That happened up aspx, so just to recap again. So the beauty of this model is that you do not have to host anything. You do not have to actually even go to dasha ad and granted permissions.

A

Well, technically, you have to grant to permissions but you're, using sharepoint, UI and but no hosting no deployment, no optimization and the CDN everything else and- and this is all and the hosting is automatic because we're using sharepoint as the platform you don't have to use.

A

The sharepoint context, but you good use SharePoint just as the hosting platform and then do operations in the Outlook Web Access site or in the team side, so you don't necessarily need to even access the SharePoint but we're just using SharePoint the underlaying, let's say framework to automatically host our stuff, which is always the most difficult. Well one of the most difficult things, because in a normal enterprise scenario, I know. Marcus knows this really well as an Abba, Nate and person.

A

You cannot just go to a customer and say yeah I want to have a one application in the Azure ad and give me those permissions and that's taking ages to happen. Doing the automatic hosting a SharePoint. That's super super you sense with, but anything else.

B

Yeah no I think you've mentioned or what I also, but you mentioned a lot more and it was really interesting here. Oh.

A

Cool excellent Thank, You, Marcus I think we're ready to then come to none deep. If you are on the call and think we can jump on your screen and directly from here.

C

A

Take it away thank.

C

You so hello all good morning or good evening. Firstly, thank you for this opportunity to help me here to present my essay, for example, to manage office. 365 groups with SharePoint framework, myself landed it mansion and I'm from Pune India and have been working with SharePoint of a 65 and Azure for for many years and I have developed this sample, along with my sister Smith Anderson, who is also working on SharePoint for many years now. Thank you for this opportunity so that he siblings got a chance to work on them. One sample.

C

So here are some social lenders to get connected with us. So the sample I'm going to demonstrate today is about managing your over 65 groups with SharePoint framework. The sample is available in the PNP git repository at this particular location, along with all of the documentation, prerequisites and instructions on how to start using this sample. So this particular sample is developed using react.js and with SPF x from version 1.9 point 1, which was the latest available at the time of development of this sample.

C

Why do we have this sample and what are the driving factors for it? So everyone is aware that of the 65 groups is the foundational membership for service that drives all teamwork across Microsoft 365. So once we are part of office 365 group, then we can get the benefits of group connected services like shade outlook, shared calendar, SharePoint, site power, bi, Yammer, planner and and teams during this demo I'm going to use two users when he is a global administrator, which is here and the other user which I am going to use.

C

It is just the sheer power administrator. So, for example, if you want to see all of the groups which are available in our tenant, we can anytime come to these groups and see all those groups great. But is there any way to see all of the offices differe groups in a tenant for other users? So the answer is yes, but but partially so, for example, on this particular user. If I go to Outlook and click people here, so I will be able to see all of the groups where I'm, a member or I am owner.

C

But still there might be. Some other groups exist in my organization which I do not manage, or they are private groups so which I might be interested to join. So then, how can we locate all those groups and how can we join them? So this particular VFX solution goes beyond that limitation and provides the functionality using Microsoft graph API.

C

So most of the key features with the samples is like we can list all public, as well as private groups, with some basic information, like name description, logo and the privacy of course public or private, and then we can search for the groups.

C

If you have multiple groups being created in your organization, you can quickly search and go to the group, and then we can join or leave the group from our SPF X web part as well as we can join a private group beta approval of group administrator, and this is developed using power, automate flow and then even we can manage the groups for administrators and then we can browse the Microsoft team associated with that particular group and then lastly, we can set up a new code.

C

So there are few functionalities and some user roles also associated with this sample. So, for example, if you are in a public group and you own or not role in that case, you can manage the group. If the group visibility is public and you are a member, then the option for you will be to leave the group. If you are not part of that group, then you will be able to join the group.

C

For example, if the group visibility is private and you are the owner of that group again, you will be able to manage that group. If you are a member, then you will be able to leave the group, and if the group visibility is private- and you are not part of that group, then you will be able to request to join that particular group.

C

So we will see that in a demo, so for this purpose, I have my SharePoint page set up here, which is hosting my of a part so before I go into the demo, I will probably edit this particular way part and go to the property pane of this particular play part. So here we have this flow URL, which is responsible for having the slope being triggered for joining the private groups. So I will discard this change.

C

Okay, so let's go go through the one by one function it is so here is a web part which lists out all of the groups, so at least as of now I have around 25 to 30 groups created. So it is listing all those with a scrollable panel and then from here we can switch the groups based on name so, for example, I can type the name or type the characters and it will start to filter out the groups based on based on the name of that particular group.

C

The second functionality is, for example, if you are part of that particular group. You are admin of that public group. Then here we have option to manage the group. So once you click manage group, it will take you to the office 65 site from you will be able to see all of the groups, and then you can search the group from here and you can manage the settings.

C

So, for example, you can select the group and you can check the members and other things, so there is no direct API available by which we can directly go to that particular group setting, but at least from here it will make you redirect to the Microsoft, say: 65 main Center, where we have listing of all of the groups. We can locate our group and start managing it.

C

The third thing is, we can join the public group so, for example, right now we have okay before yeah, so we will have this group called as rock'n roll, which is a public group, but right now, I am not part of that particular group, so I can just click, this particular icon, and it will help me to join that particular group. Once I am joined to this particular group. Again, I can click this icon and I can leave this particular group.

C

So this is very much easy for public groups, but now that may be a complex thing like how can we join a private group so right now, for this particular example, I have one group here called as fabulous file to which this particular user- this admin user is added me he can manage this group. On the other hand, I also have another user here, which is just the SharePoint admin, but he don't have access to this particular group called as fabulous file. So here the option is we can request to join this particular group.

C

So I will click on this particular icon. It says that request has been sent to the group owners, so I will again come back to my admin account and I will go to a cloak.

C

If the trigger or the flow blow was well, I should be able to see one email okay, so here it is request to join the tea private group. So here's the automated email will come, which will say that this particular user want to join your group, and in that case you can take 2 actions approve or reject, so probably I will approve, this will say, approve and submit.

C

So again the flow will trigger, which will detect that this particular the course has been approved, and then the user will be able to see user will be able to a part of that particular group. So again to this particular user. I will go to the outlook, and here we can see the email has triggered that you have been added to this particular group and your request is approved so now, if I can refresh this particular window.

C

In that case again, if I scroll back to fabulous file, now I can see that I have joined this particular private group and from here again I can leave the group if needed again. One more thing is: if you are a member or admin. Certain of that particular group here is a link by which you will be able to navigate to your SharePoint site and manage the things from there.

C

So yeah, ok, one more thing which I forgot to mention was about creating the new group so down under here we have a option to create a new group. Once we click this, we again have another react component which will end on the creation of new group. So maybe here I will call PNP demo.

C

It have some small description here and then I will keep the visibility as of public in the owner. I will maybe a type T admin and again in the member I will type the same user, which is the one by which we are creating this particular group. So once I click Submit, the group will get created, probably I will come back to this particular user to you that the group has been created- okay, if I, okay, now, if I try to search for that particular group, the group is here okay.

C

So this way we can undo the multiple functionalities with the groups which are available to us. So probably now I will move to the code.

C

So during this code walkthrough we have this s VFX solution and we have the power automate flow templates here, which probably you can use in your tenant as one of the template to get started and again we have models here to represent the groups or the team channels.

C

Oh I just come to know that I forgot to mention one functionality so, for example, if your group is connected to the team in that case, you will be able to see the teams icon in front of it once you click that icon, you will be taken to that particular team. So again, there is option whether you want to open that in a Microsoft team or use the web app so from here we will be able to navigate to our team.

C

So, okay, going back to the code, we have services here which are kind of an extensible services to help us with create the group join the group or as well as leave the group. So probably I can walk you through this code first, so we have first method called as gate groups and we have the test API or the graph API here to get all of the groups and by this way we are able to get all of the groups, even though you are not part of that particular group.

C

So this will return us all of the group inside your tenant and again for that. We have some permissions here. We will have this permission as application permissions using which we are able to get all of those groups, and then there is one more method called as get my member groups, which will which is again using the graph API to get groups where this particular user is a member of then. Thirdly, we have method called as gate my owner groups.

C

So as like getting the member groups, we don't have direct API or graph API available to get all the groups where I am the owner, but as a as alternative, we can use this particular edge tip here. Slash me, slash owned object and then we can filter on to the only group. So we can use this particular graph API to get the groups where this particular user is the owner, and then we have one more method to add a member to the groups.

C

So whenever someone requests to join the group, we are calling this particular REST API the post method, to add that particular user to the group, and then we have remove member. In that case, we are again using the REST API to get a reference of that user using the user ID, and then we are removing that particular user, then the. Lastly, we have a request to join the private group, which is the dependent on to the Microsoft flow or power automate.

C

So here we are composing the body in which we are passing the group ID name, URL, name of the requester and email of the requester who wants to join your private group and once it is here, we are again calling the graph, not graph API. We are calling that particular Microsoft flow so that we can trigger that Microsoft flow from the flow URL, which is in the properties of our way part, and this flow will take care of joining the group on behalf of that particular user.

C

And then we have few supporting methods like get the group link which, which is being used here, to show the link to the particular group, and then we have great group thumbnail, which will just show the thumbnail of your group. If you have said- and lastly, we have a method to create the group which is responsible to create a new group instead of a 65 so based on the values which have been provided into the form, we can again post the graph API to get this group created. Okay, so again to get the teams.

C

We have this particular get teams channel so that once you click on to the teams icon, it will take you to the first channel inside your team, okay, so that was about the extensible service and on to the react component. Mainly, we have three components: group list, news group and office 65 group's manager.

C

So this is the entry point to our way part, and then we have a group listing here and then we have a button to create a new group, and when we are loading this particular component, we are making a call to get groups which is getting all of the groups where I'm owner when we're I'm a member, as well as all of the group's available inside office 365 tenant.

C

And then we are passing all that information to our other area component, which is group list, so this group list can then use this information to render the particular information for that particular group.

C

So, for example, here we have, we are using this list and mostly we are handling all all of the UI component using this on render cell. So, if I directly move to on render cell here, we are showing all of the information based on the visibility of that particular group. If it is connected to the teams based on the visibility as well as icon, if the user role is a member, in that case, we are showing the icon to leave the group. If the group visibility is public and we don't have any user role.

C

In that case, we are asking the user to join the group and the same way if the user or the group visibility is private. In that case, we are asking the user to request to join that particular group. So at least this is the main method wherein we are handling the visibility of all the elements by which we will be able to show the information about the group, and we can ask whether to leave or join that particular group, and then we. Lastly, we have new group, which is very much simple.

C

We just have few controls here to get the information about the group to be created, and then we are calling the method from the extensible service to get that group created. One thing I want to mention here is about the flow that has been created here so for that probably I will move to the flow.

C

So if I go to the power automate flow.

C

And if I go to my flows, this is the flow which is responsible to join the or allow the user to join the private group. So here, whenever the HTTP request is being received from an SPF X of a part to join the group, we are composing that particular request and then again we are getting the application ID directory, ID and secret from the app registration which we created inside. So probably even I can show you that very quickly. So, if I go to show all and then to the azure active directory.

C

So in the azure active directory we have this app registration.

C

So inside this eye position we have registered this app and to this app we have given the API permissions so that it can read the group information as well as it will help to add the user to the group and again we have certificates and secrets so so from here. We can create a new secret for one year, two year or never expire and this particular values for the application, ID directory, ID and secret.

C

We are adding to this per this variables, which we will use later and once we are here, then we are posting the graph API so that we can get the owners for that particular group, and once we get the Jason from it, the pulse that particular adjacent to retry all of the emails for those particular users, and once we get all the emails, we send the approval in approval request to those admins so that the user will be able to join this particular group and based on the outcome of that particular email, whether it is approved or rejected we if it is approved, then we are adding that particular member to the group.

C

If it is rejected, we are simply sending out an email saying that your request has been declined, so this is how this solution is developed and then I have few references here, which are probably you can use all just just refer on how this component has been developed.

C

Okay with that, thank you for having the opportunity to demo this report.

A

Really really great stuff mundane and one thing: what I I, don't maybe I missed it, but the controls I did you're using the PMP SPSS controls for the people picker, and all of that.

C

Yeah I'm, using using it simply because.

A

When I and and that pinpointing for those who are not a not super familiar, so this is the only thing what you need to do and you don't have to worry about where the people are coming from and do the queries and anything that that's it. You just define the properties and things, work and I think that's a brilliant example of the other controls. Yeah.

C

Okay, thank you. Let.

A

Me actually share my screen and we are heading to our so clearly the the two demos was actually quite optimal and it gave everybody enough time to a both markers on Monday to enough time to actually talk about things Oh Polly, so we we've been kind of having a debate, always that, should we have two or three demos in this course and every now and then there's a super fast demo and then there's plenty of time. But maybe we should reduce the number in two.

A

So we don't need to rush and then there's time for Q&A feedback by the way. They'll come on that one, so really really cool stuff, Marco, Marcos, really really cool stuff on the on the outlook, integration and onedrive, and everything, and also really cool stuff from non deep and I know sister as well a really great solution. I think Ralph mentioned on the chat window that may well. This is almost like something which should be natively out of the box as a web part, because it's so clean and so called implementation.

A

So really cool they're only kind of a. However, I could have done a kind of a small kind of a thinking point and maybe potential concern actually I think into both solutions was the level of the missions they require for the SPF X solution, which might be a concern when you're having a debate with with the security officers of the customers, and they need to understand what what is the permissions and when they can't the permission who has access on things and how? How does it actually work?

A

Obviously, even though the solution has high permissions, it doesn't mean that if the introducer doesn't have the mission since you serve, the mission would be elevated. No, no, that's not what it actually means. So there's multiple scenarios doorways to think about, but really really cool stuff from both just to recap: we're not going to have a Q&A, see and we're running out of time always and the next chevron framework javascript.

A

A meeting is from March 12 and 2020, and the week from now we'll have the none SPF X call where we talk about provisioning, see some modernization and those stuff and Chris Kent is typically there to talk about column. Formatting and all of that, but that's in a week and then again in two weeks and the next ship one framework, all if you're interested on doing a demo, please reach out, and we can schedule a schedule. You a spot in one of the upcoming course AKM SSB B&B. For now.

A

Is that rest to remember we'll see how we're adjusting them. But thank you, everybody for joining and the recording of the call will be available in the youtube channel within 24 hours and by the way, based on Mike's input. We're not gonna clear up the chat and show everybody a purge to chat within immediately after the call, but within a week or let's say to one or two days before the next call.

A

So if you're watching the video recording, you can still go back on and find the chats and the chat discussion because, unfortunately, in the recording it doesn't actually have to chat. So if you're watching the recording I want to say what what was that reference real around the chats, you can still go back on the on the teams and find a chat for let's say two days before the next ball, and- and we need to do the cleaning just again repeating that one so that everybody can see the chat.

A

So we don't heaps to two hundred and fiftieth and a maximum on the chat, which is a problem for the recurrent meetings anyway, that's it for now. Thank you. Everybody for joining a recording will be into YouTube in 24 hours, and thank you thank you. Thank you. Please give the paper coming and have a great rest of the day. Bye-Bye.