Microsoft 365 Community Viva Connections & SharePoint Framework, 21 Nov 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: SharePoint PnP - SPFx & JavaScript SIG community call – 21st of November 2019

Description

Recording of the SharePoint - SPFx and JavaScript (client-side) development Special Interest Group community call from November 21, 2019.

Topics covered: Updates on SharePoint Framework from Microsoft SharePoint engineering, latest on PnPjs Client Libraries, Office 365 CLI, Reusable Controls for SPFx, and on the PnP Yeoman Generator. Three demos were delivered: 1) React extension that generates QR codes, 2) React-webcam webpart, and 3) SPFx webpart that returns a list of links to all Office 365 groups the specified user is a member. This call was hosted by Patrick Rodgers (Microsoft).

• Demo: QR Code generator for list items solution with SPFx | Hugo Bernier (Point Alliance) | @bernierh
• Demo: Operating web camera from SharePoint Framework solutions | Siddharth Vaghasia (Tata Consultancy Services) | @siddh_me
• Demo: My Groups web part | Zach Roberts | @ZachSPODev

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: https://aka.ms/spdev-spfx-call.

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

A

Hello and welcome to the SharePoint framework, a JavaScript specialist group I weekly sync: it is November 21st 2019, almost Thanksgiving here in the States and almost the end of November, I guess everywhere else, moving right into our agenda. We got a bunch of fun stuff today latest updates on SharePoint framework updates across the patterns and practices offerings and then as well. Three great demos from Hugo, Siddharth and Zack excited to see those demos come out. So we got a QR code, generator operated a web camera from an SPF solution and then on my group's webpart.

A

So three very neat demos and excited to get to those. So we're gonna move sort of quickly here at the beginning, to get to those three demos but one real, quick to go over some opportunities to participate in a pattern: crashes, SharePoint framework, javascript, special interest group or really patterns and practices all up. We of course, would really encourage all of you to do a demo. The demos are really I.

A

Think the heart of this call and really one of the more valuable parts we can see all the great stuff folks out there in the community are working on and doing such as web parts, application, customizers stuff around provisioning and really anything you create in the SP FX space or anything you do using any of the at P and P components: soap in PJs, the CLI they're, useful controls or the yeoman generator, the community yeoman generator, and obviously any of that together.

A

So we're maybe have used the CLI to create a web part that uses PN pjs and the reasonable controls. That's really exciting stuff love to see that and I think it's something we all learn and benefit from seeing those out there. If you're interested in doing a demo, please reach out to myself or visa we'd love to get you on an upcoming call. It might not be like the immediate next call, sometimes we're booked out as much as a couple months, but would love to have you demo.

A

We will definitely get you a slot and get you the ability to demo do not fear as well. You can always contribute on github contributing takes several forms. You can report issues to us, of course, if you find bugs we'd love to hear about them, don't love to hear about them. Cuz. We hate that they're bugs but love to hear about them, so we can get them fixed and then they go away. You can also, of course, submit pull requests.

A

So if you find a bug and happen to have time to submit a fix loved to see that we've had a few new contributors recently across the libraries helping us out fixing a few things which is great love, this see that and appreciate it very much and as well.

A

If you see folks that have questions in the issues list any of the issues list- and you have a few minutes- and you happen to know the answer or have some ideas for them- love for folks to be able to help those people answer those questions, because sometimes it can be get answers to folks a little bit faster than if it just waits for those of us on the core team to you know, respond or have an opportunity to get to it.

A

Sometimes we're busy with other things or we just don't have a chance to get to it and then finally, we always love to get feedback from folks. How are these calls going? How's documentation? Where else can we help? What other challenges do you have that? Perhaps we could try and help you with and of course, positive feedback is okay too. Sometimes it is nice to hear that folks do appreciate the work you are doing so some links here to get you to the SharePoint dev documentation, AMS SP, dev Doc's, that is the all up.

A

Sharepoint developer documentation, whether you're new to SharePoint framework need to look something up or are working in sort of managed code solutions. Any of you know, C solve any of these things. Sp Doc's will get you to the documentation there. Sp video z' will get you to our YouTube channel that has tutorials on things from provisioning to using the CLI to various frameworks and as well recordings of all of our calls.

A

So this call the other special interest group call the weekly series basa and wall decor hosting and then the all the monthly calls as well will all be found there. So if you miss a call, never fear you can go check out the video in the recording there and I think like 98% of our videos, there I think we've only had one or two that have the recordings have failed and we haven't gotten them up there so check those out as well SP dev issues, so that is a link to a github issues.

A

List, though, is a place to report any issues you see around modern SharePoint so stuff around the SharePoint framework pages solutions. Things like that, and it gets a lot of views from the engineering team themselves, we'll review those things and they get triage and put into the the backend tracking system. So that's where you should be reporting any issues you might see around SharePoint, modern development and then as well. Finally, github.com /, SharePoint or github.com / P & P, so those are the two main areas that the patterns and practices team is working within.

A

So some of the libraries are still in the / SharePoint space. So that's gonna be like site score. What else is over there? The old JavaScript core library? This is longer use, so definitely don't check that out. But then, as well.those SP dev issues list is there the SP dev sample repositories are there for webparts and extensions great to check that out and then github.com / PP has stuff like the CLI. The reasonable controls and p.m. PJs can all be found there.

A

So real quick updates on SharePoint framework from visa yeah.

B

So I'm gonna take some time on here. So let's go forward and here just a quick update on the matrix. Once again, we can see actually interesting growth on the left side of the matrix. So for the best past few weeks sort of two weeks we it's again jumping. We are not explicitly sure what is always the the waves but we're again crowing enormously. As that the usage of Sherman framework is is up the well much more than we would anybody was expecting, but we're also seeing a lot of growing usage.

B

Also honor people be the building SharePoint framework based Microsoft themes, tabs, which is a great thing that that is getting attention as well. Now, let's go to the following slide at the following slide is actually a reminder on a video which we published earlier today, which is around the preview of new capabilities which are coming in a SharePoint framework version. One point 10, and this was recorded yesterday. It is me actually talking and showing the demos around upcoming features so covering those individual things which are coming to GA and those which are coming to preview.

B

Well, some of them not explicitly all of them, but most of them that we go through in a live demo. I think it's 15 minutes, but it will actually show you what's coming. It is available in the YouTube channel, so it gave us the DEF / videos. It is the location. Now, if go to the following site, it is actually the exactly the same site which are used in that video. Just to summarize, what's coming in the 1.10, this isn't subject to change. They're most likely.

B

Will it's not valid anymore, we're getting closer and closer on releasing one point, then it will not happen today. It will not most likely happen next week, but we're getting closer and closer. So we're talking about weeks rather than days or months. At this point, and there will be the pre-allocated placeholders will be available in the video we are showing that one as well shipment framework themes. Personal up support is available. That's shown in the video as well support for mobile apps in English upon framework for teams.

B

That's not shown in the video, but it's available in the 1.10 at least notification API as opposed to GA. This has been in preview that is now moving into the GA. So we're able to use that to super exciting things on the previous side of the house is that you can actually start building queries suggesting extensions, so a new extension called queries, gestures which can be used to control what texts are being sent towards microsoft search. So you can actually modify that search experience slightly.

B

It's not a super massive extension, but it gives you an indication where we are investing also around the search experiences and then a really important thing. We are now coming to preview related on building office, add-ins or Outlook Web, Access add-ins, using SharePoint framework. So a really cool thing. When the following slide, you could go there. This is the future. What's gonna happen after 1.10 version, just to recap this one as well, and there will be a video related on the fluid framework capabilities and integration coming up pretty soon into youtube as well.

B

Just letting you know, I think it's coming out tomorrow, but we're looking into having native support for fluid framework.

B

If you do not know what that means, go check out the video when it goes live tomorrow in the individual channel, so you'll understand what the Florham were in the context of SharePoint framer of means we're looking into having the store support for SharePoint framework, so you can actually truly build solutions and then serve them using that source store and to sell those to be available for the customers and partners we're looking into having a unified tool chain for Microsoft 365 for Burke loads in the POC post, which we released in the time frame.

B

We called it new Microsoft. 365 hope point is that when you start creating solutions for any services, you can actually use Microsoft, 365 components and then it's matter of ok. So where do we want to surface this component? So it's no longer about building Microsoft gains tabs using a bond framework which sounds so weird. It's rather, let's create an office tree Microsoft, 365 component and surveys that in a different services, so we're kidding there.

B

But this is in calendar year, 2020, so you'll see more information around that one during spring timeframe, faster in a dev loop. That means monthly releases and more extensions, so left navigation, top navigation, navigation nodes overriding of things, and all of that is definitely coming for SharePoint framework as well, but that's a quick intro on those things like sets and there's a a videos coming up on this one as well. The the 1.10 earliest video is already out because last time in the SP, FX Corbett actually demoed stuff, but the recording didn't catch.

B

Those do whatever reason. So we weren't unable to actually share that video gonna go one more slide reminders from the ignite so in ignite we already reminded people on this and there are now a beta certification available for building applications and solutions with Microsoft 365 core services. The main topics in here is the identity of Microsoft graph, which is basically the main root or the baseline of everything, and then an areas of team's office. That instance, you have one framework- will be covered in that certification really important thing to remember.

B

So it's the last bullet point over there. If you turn office resist file developer program, you will get a free, Microsoft, 365, ef5 dev subscription and that's going to really automatically in 90 days as long as I use it for developer use it. So it is a free tenant. You don't have to pay anything. If there's no future costs on that one, it will automatically renew in 90 days as long as you use it for developer use it.

B

So please please take advantage of that offer, but that's it from my side so from the SharePoint framework side of the house. So let's go to the open source side and then the demos now for me, I'm I, do apologize. I have to chop from this cause. I won't be here for the whole time so Thank You Patrick for leading the rest of the call, and thank you already advance for the community members doing demo. So I'm definitely gonna check them out to tomorrow when the recording is available, but that's it Patrick.

B

Take it away all right.

A

Some quick updates on this, so we can get to the demos updates for P and PJs client-side libraries. The beta is out. It's been out for a little bit help us test it out very interested in hearing, obviously about any bugs you find something's broken. We've done a lot of work to improve the documentation, so want to get some feedback on that.

A

If something is missing or unclear and as well, we've written a transition guide to go from v1 to v2, and so, if you find something that's missing or unclear, and that guide or or we've missed some steps that are critical, we'd love to hear about that as well, and do please note in your issues? It does relate to v2 beta. That really helps us understand what what to look for and make sure we can find that issue very quickly.

A

We talked about this last time, but want to mention again the support plan after v2 release will try and maintain as best we can feature parity for up to four three months between v1 and v2. So if we add something to v2, where we're able to, we will add it into v1 as well, and then after those three months, we will continue to actively support v1 for an additional three months.

A

So that's six months of total support for v1 after the v2 release and after that, of course, will always accept PRS for v1, but officials support will end. In other words, that's not where I will be putting my energy after those six months and we are aiming for release. I've picked the date December 20th kind of out of the air, but so the clock that support clock will start sometime in you know in January 1. Let's say that makes the math really easy.

A

So 3 months for January 1 is March and then another three months is April May June. So that's kind of the calendar there in terms of the v1 support moving forward, and then we do of course, still continue to do releases of v1, so we'll have a release on scheduled, December 6, there's a few issues out there we'll get resolved and into that release.

A

And if you have some other issues or if you have some other code or enhancements you'd like to submit absolutely would love for you to get those in by December 6th for the next version documentation link down there at the bottom, PNP github, io, / PJs, you can always follow the hashtag p.m. PJs on twitter. You can always follow me at mediocre bowler on twitter. I mostly just tweet about peeing PJs, so you won't get a lot of spam or other stuff there.

A

One quick announcements. We are going to be dropping the at PAP graph library from v2 we've been under increasing pressure from the graph team to remove this offering, and so that's gonna happen with the v2 release, will no longer have a graph library I'll apologize to everybody. That's helped us build the server the years. I want to say that I genuinely appreciate everyone's hard work and dedication to this shared community project and really I'm sad to see this go. But it's it's time for this to happen.

A

So that's that announcement moving on to CLI updates PNP office. We said no no bowling tweets. She has one more bowling: tweets I could do more bowling tweets. My scores haven't been really good enough to warrant them, though PNP office 365 CLI. We got a new beta two-30 out with externalizing dependencies in SharePoint framework projects, we're retrieving information about Yammer users and messages and as well bug fixes and improvements to that beta release.

A

So you can always check out the latest beta from at P & P, slash, Office, 365 CLI at next, a kms 35 CLI link for all the documentation. You can follow the hashtag office, 365 CLI on Twitter as well. There is a get ur channel and again that link to the docs gets you all the information you need to get started on the CLI, SPF X, reusable components.

A

So this is a work in progress currently in progress. Excuse me adding an automated localization service to translate the labels to all languages, not yet translated. So this is a quick way to support more languages, which I think is a really super valuable addition to these controls. It's gonna be exciting to see that come to fruition and then, as well, would like to thank the following folks listed there immortelle Hugo Robert PFC 2k8, Peter, Alex, Lewis, and/or, Aaron trowel. For all your help, building up the controls.

A

We really can't do this work without everybody in the community, helping out with this stuff and two lakes down there at the bottom, SP dev, FX property controls will take you a link to the property controls which are controls designed to work in the Edit tab of your web parts within SharePoint framework and really provide you a great rich experience. That's already styled with office.

A

Ui fabric gives you a nice out-of-the-box, look and saves you a lot of time, creating the editing experience and then the SP dev FX controls react is controls design for use in the body of your web parts that they would work equally well, and you know application customizer, for example, and so you can use those to again get a great looking display for your users and save yourself a lot of time by dropping these controls into your projects. They are react based.

A

So just a heads up, they are react based, so they obviously will only work within a react project but definitely check those out they're a huge time-saver. They look great and there's a lot of functionality packaged into those controls. So please do check those out and then, finally, before we get to the demos, we have the community yeoman generator. So this is a yeoman generator built on top of the out-of-the-box Microsoft SharePoint generator.

A

So under the hood, you get a quote: unquote real SharePoint framework project with all the same dependencies and all the things you would expect, except you have the option to add a lot of additional functionality right there in the generator. So things like handlebars view p.m. PJs, the property controls the react, controls and so forth. You can add that right in the generator, as opposed to having to just install them afterwards. So you get a little bit cleaner experience, a little more repeatable experience.

A

We do have a new release out 110:1, which really the update is around the DevOps kind of the back end of this, but better unit testing coverage and that's just creates. Then a better generator experience for everybody. That's using it updated some dependencies in inside that DevOps pipeline. So a lot of kind of you know it's. Sometimes it's not the the most visible work, but it's very important to improve that build experience and then that always results in a better end product for everybody using it so definitely check out the generator.

A

It's a great way to start your SP FX projects with a lot of functionality already built in save yourself again a lot of time, which is the goal for all of us as developers you can install the generator and if you have installed G at P and P, slash generator, SP, FX, documentation, AKMs, slash, PNP generator and as well. There is a good err channel where you can chat about the p and p SP FX generator and encourage you to check that out and now I think we've gone fast enough.

A

We'll have time for all three of our demos. First up is gonna, be Hugo with the QR code. Generator so excited to see this Hugo. Are you ready to go? I am.

C

Ready, let me just share my screen. Yeah.

A

If you know take over the presentation, hi.

C

Everybody, my name is Hugo brainy a. This is me on the on the corner: there I'm I work for a company called Point, Alliance and I'm I'm, a geek I, love coding, I, love, SharePoint and I love, tweeting and writing samples about it.

C

So this is my my tweet handle and my blog I'm usually pretty active, except recently, because I've been on the on the conference cycle, I will be presenting if anybody of you are in Toronto over the this weekend, I will be presenting at the SharePoint Saturday in Toronto I'm, actually doing two presentations at the exact same time, I'm not quite sure how I'm gonna do that yet.

C

But that's what the schedule says and also for those of you who are interested in contributing to do any PMP and are kind of scared about how to get started. I will be helping David Warner with tomorrow's session on sharing is caring. I'm sure David right now is probably sharing the link okay. So what I'll be talking about today is an extension that I published on the SP dev effects extensions.

C

So the react command QR code and what it does is actually generates. Qr code and the reason why I'm doing QR codes is because in a lot of countries, I live in Ontario. So in my province, bylaw organizations have to post all sorts of posters and things like that. For example, the health and safety laws actually say that we have to post information about the Health and Safety committees. You know the guidelines and things like that, and that's actually in the law itself, where you have to post.

C

You know a piece of paper that lists all the the members of the joint Health and Safety Committee. So what organizations usually do is they'll actually create a you know, piece of paper and they'll actually post it on the boards at the in the lunchroom, and things like that and you know, do things you can notice here. First of all, you can tell that I'm Canadian by the number of please that you'd that appear in my my document here, but the other thing that you can notice is that and I.

C

Don't know why people do this, but people will actually print pieces of paper with a hyperlink on the piece of paper. As you know, I don't know if they are expecting people to click on the link or something like that. Well, the problem in here is, as you can see in this URL, the URLs can be pretty long and they're pretty hard for people to to remember. So. How do you handle that?

C

So what I did is I created a extension that you can add to any library any whether it's a page library document library which allows users to generate QR codes, and so the way works is the user selects the QR code command and then the first thing we look at is: is there anything selected if there's something selected, the user selected one document or one page?

C

What we'll do is we'll generate a QR code for that selected item and we'll give it to them so that they can copy it and paste it on a document or something like that. If the user didn't select anything, then what we'll do is we'll generate a QR code for the document library itself, because sometimes maybe what we want to do is we want to say: hey everybody Oh check this link for the list of policies that are available or things like that or go to the site right.

C

So that's what I will be showing you right now, so I was planning on going directly to the code, but I guess I should probably show you what it does first. So this is an example of the same document that you saw before this is the list of committee members.

C

You know and it's available in a in a site, page library, which is what you see here. It's this document right here and if you select the document, you'll notice that there's a QR code extension that appears and when I click on that extension, what it does is it actually, you know I stole the exact same style as the copy link behavior.

C

But what it does is it generates a QR code for this document. It copies it into the the clipboard and then it allows users to either copy again in case in case they want to copy it again or they can download the document. So what I'll do here is I'll just download it. It's called QR code 17 and then to show that I'm not lying about this I found this really cool website by-laws laser Lazlo that actually allows you to choose a QR code and then read the URL for it.

C

So if I click on my downloads here and I pick a QR code that I just downloaded what you should see is it gives me a link to the same page that we were showing before so I'm, not cheating.

C

If I don't select anything, you can see that I still have a QR code that appears here and that QR code is actually pointing to the document library. So if I wanted to send people to this- and this applies to also document- you know not just pages- and the thing that I should point out is I also did it so that those QR codes or that extension will appear on the context as well.

C

So you can do that all right. So let's talk about how I did this all right? So what I did here is I created a an extension and the extension is actually pretty simple.

C

What it does is it when there's only one command in my extension and when the command gets called I get the page context, because I'm going to be using the page context first for generating some some information, I also get the URL of the site and I generate the relative URL of the site, because I'm going to need to do this, to rebuild the URLs here and I also get the root of the URL, but then what I do is I actually look at if the number of selected rows is is greater than 0.

C

You know do this here, which is get the relative URL of the document. That's been selected, get the file name of the document. That's been selected because I'll actually need to be displaying the file name and I'll also want to use that so I can use a disposition later and then build an absolute URL now I'm, not necessarily proud of this code. Here, I'm just kind of aggregating. The thing I should probably use a better approach, but I wanted to keep the code as simple as possible.

C

If there's nothing selected here, in fact, this code would probably handle if more than one items are selected. But you know what I do is I just get the relative URL for the list and I just generate the URL for the list. The cool part here is this here, where I could generate a new dialog object and I pass it. The file name, the absolute URL and and I call show. So why am I using a dialog?

C

Why am I not using a pain is because I want that behavior that will pop over the whole screen and I want to be able to dismiss that dialog by clicking away from it again I still the exact same behavior is the the copy copy link behavior in the SharePoint library, which is right here.

C

I wanted this exact same behaviour right. So when I do this here, I want it I want it to be a dismissable dialogue like this. So how do you get dismissible dialogues, I generated or I? Sorry I created the class called QR dialogue and what it does is. It extends the out-of-the-box base dialogue and the cool thing about the base. Dialogue. Is that it does. It does a couple things. One is that it has a get config method which will actually look at the configuration that needs to be passed a dialogue.

C

So, in this case I'm saying I, don't want it to be blocking I want to allow people to click away from the dialogue.

A

Here you go one second I think we might have lost your audio.

C

All right, someone muted me: okay, so I just generate the past. The information I'm going to need and I actually pass a relative or a reference to the parent element, because I want to be able to bind by my position when I generate the dialogue and then the dialogue content here, what it actually does if I go all the way up and Scully sorry for the scrolling here, it's actually a very simple dialogue, so I used the call-out method and I just generate my buttons for closing and I use.

C

An extension called reactive react component called QR canvas that actually generates a canvas object with whatever URL that you want and then I have my my button here for copying, which calls copy and my button for downloading when I click on download, which is a little bit further. Actually, let's start on copy when I click on copy.

C

What I actually do is I, create really quickly a div element and actually insert an image and an element where I copy the URL to the QR code and then I actually select the image from that HTML element and I copy it. Using the clipboard method of the browser and then I just hide everything and if I, if I, actually delete I, just actually generate a download URL for this. So this is like a super quick review of what we're trying to do.

C

But again what happens if you, if you use this, is you can now? You know, create your your posters in the office and you can actually just generate QR codes by either downloading the QR code, like I, showed you our copy and pasting the QR codes again. My name. Is you go? If you have any questions, please don't hesitate to tweet me, I'm, usually pretty good at responding and please visit my blog I will actually be writing a blog post about this whole thing. That's it for me back to you, Patrick awesome.

A

Thank you very much, really cool thing there to see a QR code getting generated, I think there's a lot of applications for that, so it's gonna be a great sample for people to check out so moving right along to Siddharth. If you are ready to go and want to take over the presentation. Thank.

D

E

Me just start sharing my screen. Thank you for allowing me giving this opportunity to present the sample in this community pod today. What I will be covering is how to operate the back camera in our second film of solution. First of all, my Picasa I mean practical consultant at TCS, primarily focusing on SharePoint office 65 as you're. Basically on Microsoft technology stack I like to write articles I like to blog on my personal blog and also on sous-chef corner.

E

These are some of my contact handles or, and some of the links to which you can connect with me. So today, we'll be talking about this react. Webcam is about how to open, come and take the photo. This is the link so where you can find the source code of this particular sample.

E

So summary, so, as you know, the idea behind working on the sample was to to see if we can interact with the native hardware like web camera from the SharePoint framework web part, and the requirement was to you know if we can able to allow user to capture the photo dynamically at runtime and maybe upload it to a document library or maybe update profile picture using graph API. So this was the idea behind me.

E

The I had started working on this ml, so what I did was there are actually two parts which I will be showing in this. Today's call the first one, the basic which, where the BR has been approved and which is available in the github repo, is only to use the ibaka and take the photo. But then then, after submitting it, your I mean, from the last few days, working on an extended version of the same part, wherein we can take the picture and also upload it to a document library.

E

So, though, this PR is yet not submitted or yet no available in the github repo walk through it on how it looks like NPM package is used. So what I did is I used a react. Webcam NPM package, which is available, which allows us to interact with the webcam on our Lord Jesus based solution and self infect solution, is based on node. We can use that particular library in our solution.

E

So going to demo, let me just see I only serve running, so what I did is there are? Basically, you know. We started with basic scenario so that to demonstrate all the different use cases which can be used in our complex purpose, like opening a webcam taking photo and closing the webcam. So this one is the first part wedding. You know it's just opening the webcam taking the photo and displaying it in the canvas here and then just closing the webcam okay. So let me just open the webcam hi everyone.

E

So now next thing I'll do is I'll just take a photo of it. So if you can see the photo has been taken and it has been rendered on this beam here. This is nothing but an image, HTML tag where we are entering the photo and then I can just close the webcam also using this close button. So this is very basic apart, but you know may be useful for generating the complex scenario there are.

E

There are no configuration properties available, but in the second part of the map, part I'm in the version two of the apart, which I am working on, then there are some advanced features. Will I'd like to show.

E

So let me do one thing: let me first walk through the first part. Okay, so, as this web part is just as it is as a base library which we are using. So the web part is also a react based here. What I have a simple three buttons HTML, which has an event binder attached to it and for displaying the camera. The web camera on the onto the page I have a container deal which is available, and there is a another t where we will be displaying the captured photo on button.

E

Click of the open camera I have a method open K, so where what I am doing is I am basically using the dynamically creating the react, create element method, passing the particular webcam object and its property, wherein I can define all the different configuration options which is available and now then we are using the reactor method or Trender to basically render the element, which could be the welcome element into my containers, which is basically here.

E

The other thing is to take the photo, a capture method, so the good thing about the that it has some methods which are available through which we can actually take the screenshots and everything. So if you see in the capture screen sure what I am doing is I'm just using the state webcam variable, which is basically the reference to my webcam element and calling the get state short method. So what if we do?

E

This method would return as the base64 encoded string of the particular image which has been captured and then I am just creating a new element of image and applying the source source attribute of the image tab and then again rendering it. So this is how the image is getting displayed and on close, there were no, you know, methods available in the webcam, so what I am doing is I'm using the unmount component at node method, wherein I am just unmounting, the particular container, so that the web camera close.

E

So pretty simple I mean the body is not that complex. Okay, before moving on what I'll do is I'll just show you the react, webcam MPM package, which I am using, we can just install it using react, webcam NPM install command. These are the different properties which are available.

E

These are the methods which has get screen shot, which returns us the base64 encoded string. Then good thing is I mean other bodies. What I did I also tested this on the mobile camera, basically opening the URL in the mobile camera- and it also you know, uses the front camera and back camera. So there is an option wherein we can allow user, which camera, which would be opening, like, maybe you know, selfie camera or of the facing camera or the user damira.

E

So pretty much about the webcam here next thing. What I'll do is I'll just show you the extended part of the web part which I have right now working on. It is again doing same thing, but the only difference is what it will do is it will basically.

D

E

The particular for captured photo into a document library and to in so to make it. You know more kind of configurable. I have used PNP control list, speaker, which is very you know, pretty much handy to use to allow the configuration options, so the user is basically selecting the user would be basically selecting the list library into which the document library would be upload, as this is based on the.

E

Basically, as this is based on the SharePoint context, portal news I'll run it through the SharePoint workbench.

E

Just at the apart.

D

E

Again, as you know, I'm loading it for the first time and the web part is not being configured and again using placeholder SPF X PNP, the usable based on control to configure second part. So here.

D

E

Can select the library on to beach I want to upload the document, so I will just select documents and then pretty much. The same user interface will be here now to make it a little more interactive and maybe a little note you know attractive. What I did is I am using the webcam again hi hello again to.

D

E

The picture just it will just basically open it in the dialog box, and it will ask me that I, you know I want to save it or I want to retake the photo. So this might be again a scenario which could be, you know, be used where user might want to. You know retake the picture, so I'll just say yes and what it will do is will upload the file to particular document library.

E

So this was the library which I have selected basically document library, and if you can see there is an image which has been uploaded here with contango I'll, just click on it to see whether it is view ever, and so, if you see sorry for the bad quality, my webcam is not that of high resolution, but if you can see the image is been approved.

E

So this is what the extended version of the web part does. Let me just walk through the extended part which term which I am working on so here to start with what I am using as I said: I am using the PNP, reusable property paint control list. Speaker I am filtering it with base template one zero one, so only libraries should be displayed in the drop-down.

E

I am passing the display mode and the context from the web part file to my component, which is my SPF inspect Android component here I have again just a placeholder to see whether you know the properties life that has been selected if it is select empty. If it is not selected, thus display the placeholder. Otherwise, we can just show the actual web part content here.

E

Nothing new in terms of opening webcam capturing it just at what I am doing is I have just moved the captured photo container into dialogue box and on click off it, this unclick of it. What I am doing is there is an upload method. Okay, so in upload method, again as I, my image source is basically a base64.

D

E

Stream, I am just replacing the prefix text; okay, just to get you know the source, base64 content, and then this this. This is the method which is actually converting my base64 to area buffer.

D

E

Then it will just convert it to area buffer, and then there is a method called upload file where I mean using INTJs to basically upload a document to a particular library. So this is again pretty much straightforward and the name which I am using is basically you know just using the currently logged in users display name to create define file name which would be, and then just this thing, a message bar saying that you know your photo has been uploaded successfully and closing the dialogues. So this is pretty much it from my side.

E

If any questions anything I can just take the chat window and maybe get back to you. Patrick.

A

And yeah, that's awesome! Thank you for that demo. That's really cool to see I! Just I am continued to be amazed at how simple some things have gotten that used to be incredibly complicated like using a webcam. That's really cool sample really neat to see. Thank you for sharing that and sharing your code. That's another great sample for folks to check out I can think of a lot of great uses for being able to take pictures straight into SharePoint Zach.

A

F

Ready to go hey, yeah, I'm, ready get my screen shared awesome.

A

F

And clear awesome so quicken or duck about myself been working with SharePoint for about three or four years now kind of got pulled in as a SharePoint new, my company we're gonna salmon and then recently started working in the SharePoint framework working on solutions in my company, so I've created this webpart react my groups a couple of my users. You know they usually kind of get lost and Sharaf.

F

We don't have an intranet yeah and our SharePoint we're working towards it, but they are trying to find one site they're trying to get to, and so they kind of an issue there. So I came a couple of this webpart to just list all the 365 groups that they are part of just uses, Microsoft graph, which will go out, pull the group and then pull in there. The group link to the URL on the SharePoint site and then the group's thumbnail give you guys a quick overview of the web pie right here.

F

So I'll refresh this page, just yell load. So it's going to pull in the group. So all for the current user, which myself and just a couple groups I have right here if I click on a group, it will take me to that SharePoint page to the group right there we jump over to the code real quick, and so we have the webparts ES file right here and so we're doing an on in it. We are setting up this group service, we're passing in the context there, and so in that file.

F

This is where we are creating the the call so Microsoft graph. So we have three calls in here: one for getting groups getting group links and getting the group thumbnails the get groups. We are calling the API this right here. This is so the current user member of Microsoft graph group and it's going to filter it for this filter right here will go to any 365 groups across us to looking at the Microsoft graph, documentation and so on.

F

To get groups links we're passing in this API right here. We're gonna pass in the group's ID as a parameter and grab back pull back the URL and then sort of thumbnails. We were passing an ID again requesting that groups photo, so if they have a profile photo set for the group, it will pull that back 48 by 48 size and it was refine it as a blob which we're going to create to a image URL. So if we jump over to the main web part, this is the main kind of web part container.

F

So on our render method, we're just rendering a title right here. This is the group list which is going to render all the the groups in that list, format that we see, and so, when the component mounts we're calling get groups get groups is going to use the group service and then on each of the groups. It's going to set our state's of the groups and then call next to get groups links passing in the groups that we just grabbed and then we're going to kind of do a for each here.

F

So we're where our client gets service, a group service again and we're passing in the our group item or a group to get the group URL for there and then we're going to set our state again or kind of update our state for a group state. So we're taking the previous state we're gonna map that out all the groups and we're trying to find the one where the group ID matches the one that we're currently working on we're gonna, spread operator to add a property into that.

F

That group right there on the object and give it a value of the URL that we returned. And after this we are going to call our group thumbnails. So this is right now is updating the state.

F

So the titles are loading in the links, loading in and then the the thumbnails loading in so we're getting a doing same kind of the same thing above where we are calling the group service we're coming back from the the thumbnail updating their state, where the group ID matches the item, ID that we're grabbing right now and then passing in the thumbnail.

F

So then, on our group list, this is getting as its props is getting the groups and then on render is passing in this proper here was just call back to this render item method. So if we look on here, we have a SharePoint or a officer fabric control over list, we're passing in our groups, the props we have the item, count page for the page, height and column height and then on our render cell, which is how we kind of render that kind of document card layout.

F

We call this method down here which passes it back to returning a JSX elements for each item and do we do a callback right here to the main component to renders of those items? Do you know passing in the item and then an index for it? So we go back to this guy down here we have our on render method which we're getting the item, we're using the document card, control and sort, but do it setting off the the image right here for the thumbnail standing, the test centre 48 by 48.

F

Is this picture size that we're expecting and then we returning this to our component or the groups list component is just a document card, we're passing in the a type which is a compact, make sure that nice little compact component props for it, which is the image right here and then the URL we're just adding in a tag in there and the title, which is fast again SC and the properties on those group items that we get, which generates that that lists for us, which we see on this page.

F

um That's about all I have sorry when I went over that little quick but I'll answer any questions. If there are no.

A

That's great, there might be a couple questions there in the chat window. So really three great demos today excited to see that I'm gonna do my best to share my screen again here. So three great demos, Hugo, Siddharth and Zack appreciate those very cool, I. Think three great reference for folks, Building Solutions and the links there I think David has pasted them all into the chat window. To this so definitely check those out some really exciting capabilities to show there and again well remind folks if you have a demo and you'd like to share it.

A

Please reach out to myself or vasa we'd love to get you on. An upcoming call I think it's really exciting to see everything the community is working on our next SP facts. Javascript media will be December 5th. That's in two weeks, the next general sharepoint development special interest group meeting will be on november 28th, so that is weirdly Thanksgiving. We are going to have a meeting on thanks.

A

Even we understand for a lot of folks, you might be traveling or with family or with other things, but we will hold the meeting and the recording will be available later, probably in the next couple days. So don't worry if you aren't able to attend on Thanksgiving, totally understand the recording will be available, and but we will have the call. So if you just maybe you want to get away from family for an hour, come join us and we'll have that call. Well. Thank everybody.

A

Remember, learn, reuse and share akms P&P, and we do have about five minutes. We could actually do a little bit of Q&A today. If anybody has any queues, we can try and have some days we find this sample. Yes, I believe the links are in this chat thread to the samples and as well. They will be posted with the video. So for sure you can check those out.

A

Does me work for guests? That's a great question and I don't actually know off the top. My head, you should probably check with the graph folks on that hello.

D

Can I ask you a question there sure you mentioned in the in the beginning about the change from developer program filling office if either, but is there any update for current developer program tenant already up and running to be able to switch from a three to five as.

A

Far as I know, the answer is no, but I'm, not certain. So I think you would just need to go request. A new developer tenant, but I'm, not 100% certain on that, but I think that's probably how it would work. I, don't know that there's a way to upgrade an existing dev tenant and a new e5. Okay. Thank you. Yep.

D

Hey quick question: Patrick you mentioned at the beginning as well that the PNP graft service is being deprecated. Is there a replacement or something.

A

We are not duplicating it, we were just flat, removing it and the replacement you could check with the graph guys on whatever they're gonna be offering through their SDK got it. Thank you, yep cool well with that I just want to thank everybody for joining the call. Everybody have a great rest of your week if you can't make it next week, have a great Thanksgiving and we look forward to talking to everybody soon. Thank you all and thank you.

A

Everybody for doing the demos today, great stuff, so have a great weekend and talk soon, bye, bye. Thank you.