Microsoft 365 Community Viva Connections & SharePoint Framework, 26 Mar 2020

Previous Meeting Next Meeting

⏯

youtube image

►

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

Description

March 26th client-side update/discussion hosted by @VesaJuvonen, focused on PnP SPFx samples – 200 today and on 3 demos – Sharing data using React hooks, group membership look-up + Q&A webparts. Updates on open-source projects: PnP Office CLI - released new preview version 2.8 with spfx doctor along with other commands and sample scripts. React Controls v1.17 released - auto translation and more. Also released React Property Controls v1.17.0. Eight new samples delivered in the last 2 weeks and many more in the pull requests queue. Thank you for contributing latest samples: @joaojmendes, @luismanez, @sudharsank, @bernierh, @DavidWarnerII, @alexaterentiev, @ramakrishnan2, @SauSlash, @aakash_316.

During this call there were updates on SharePoint Framework and Roadmap from Microsoft SharePoint engineering along with the latest on PnPjs Client Libraries, Office 365 CLI, SPFx Reusable Controls, and on the PnP Yeoman Generator. Demos are delivered by PnP community members and are published separately in addition to being delivered during this meeting. Q&A takes place in chat throughout the call. Feedback from the PnP Community is welcome and encouraged. Remember for every 1 negative statement, try and add 2 positive statements. Sharing is Caring.

• Demo: Using React hooks to globally share service scope between components | Vardhaman Deshpande (Valo) | @vrdmn & Garry Trinder (CPS) | @garrytrinder
• Demo: Building group membership management solution with Microsoft Graph using SharePoint Framework | Aakash Bhardwaj (HCL Technologies) | @aakash_316
• Demo: Building a Q&A solution for SharePoint portals using SharePoint Framework | Bo George (ThreeWill) | @bo_george

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 SharePoint framework and JavaScript special interest group assisted by break link. It is March 26th 2020 and today we have quite a few items on the agenda which we want to go through. So we can go through a quick update on the SharePoint framework. We're gonna then go through what's happening within our individual, open source projects and so updates on those, and then we have three different demos, so I'm gonna be relatively fast on the updates and Hugo and I. Do apologize, I forgot about adding your sample slide in here.

A

You girls can actually note who are the the latest samples which have been added to our open source repo. So that's that's something what we want to actually get included in the first 50 minutes in this course and then the rest 45 minutes will be then demos and QA QA and if there's time most likely today, we will not have time for that. So let's actually get moving on things, because, anyway, so quick reminder. Opportunities for participating on these community calls if you're interested on doing any contributing and being part of the community cause.

A

You can definitely do an SPF, X demo or BMP demo and at the end, PMP chase the move in here or any other demo related on Microsoft traces to five clients and development technologies. You can definitely contributing github. We have a lot of stuff available in Quito. You can contribute if you have time and interest on doing that, and definitely the last and most important thing. Please please do give us feedback feedback feedback, super-important, something isn't working. Something is working. Please let us know and just a variable reminder.

A

Positive feedback is always good as well and we keep on and the it's actually quite it's partly sad, but it's understandable as well. So it's a lot of the open source initiatives and projects typically hear negative feedback, even though people spend hours and hours and trying to share their learnings for others for free and then they get negative feedback because something isn't working and all that so try to give that positive feedback as well. We could actually try as a community than if you give a negative feedback or something which is fine.

A

We we need to have constructive feedback as well. You owe to positive feedbacks, so that would be a fair game so that we'd actually in cage or increase the positivity in the community. So if you give negative or constructive feedback for somebody, then you owe to positive feedbacks in social media or in in Qatar deal.

A

Yes, everybody is super excited I can see the audience. Cheering and everybody's super excited on this thinking now, but let's try to be positive as well. I create reminders on the assets. I need to update some of these URLs pretty soon because we're moving into this Microsoft 365 PMD terminology with shape underdogs against deaf dogs, a video channel. It's not just about sharepoint, it's definitely Microsoft 365 functionalities as well, team's development, craft usage and all Stan and community demos, and share and every issues, and then the open source is in two main organizations.

A

We aren't doing some shuffling between the repos right now with the organization's. What's cool about the github? Is that that's completely seamless for you? So, even though you would have pulled down a repo in the shipment organization and we move the repo to B&B organization, you can actually check in stuff and push stuff still against the repo, so everything is fully automatic and github. So it's a really really brilliant system. Now, quick update from the shipment framework side, I didn't actually want to spend too much time on this one.

A

So I wanted to actually just recap where we are and what are we planning to do? Obviously, the current situation in the world is slowing down quite significantly, some of the development. There are areas where we are pushing heavily forward like, for example, the SharePoint framework support in store, and it's not just about that source and so we're looking into having the SharePoint framework support in the office store or in the. However, the SharePoint store, where you can actually see the SharePoint add-ins right now, so we're pretty soon.

A

What kind of support start supporting then SharePoint framework solutions in that store as well? And then you can actually put you up on the framework solutions, also the app source, together with any other configurations in the app source as well we're currently working with few different partners and ISPs on validating this process. So we have a kind of a preview program for small group of I/o space, and then things will get really is hopefully productively soon and then everybody else can actually start pushing and their solutions to the store as well, so really cool stuff.

A

It is fine moving forward so, but I can't still I don't want to promise an ETA, because you will hold me accountable on that one unified tool chain for Microsoft resist divided for votes, coming up as well, I'm more on that one pretty soon, actually, as well as we're looking into having a unified tool and custom acts of 365 talk about this one.

A

Quite a few times already native support for Floyd framework immediately went well at least when Floyd framework will be probably released, faster, interlude, more extensions, new ETA currently for 1.11, mainly because of the current situation in the world, because that's also delaying our internal development process do understandable reasons so bear with us we're working as fast as we can on getting things moving. I think everybody understands that there might be some delays now how about office you have fabric 7 support from the question. Christian walling is asking on the chat.

A

The office UI fabric 7 will be supported, natively in SharePoint relatively soon, and when that happens, then we will have it to support for it also in SharePoint framework. So we need to delay slightly on that one right now it is not I. Don't think you can actually do that, but we understand that people want to do that. So that's definitely coming huge and anyone know how economy service rest support is doing.

A

I concentrated only on SharePoint favorite road map in here and the rest service for taxonomy, or actually the craf ativ API for taxonomy service. Let's be precise, it's still plan to get released relatively soon. I can't give you an exact date, but I can say. Probably it's closer to say weeks, ten months well, whew eight weeks would be two months but eight months. It would be way too much already, so you can figure out where and when are we going to announce something?

A

So there will be a taxonomy sorry, there will be a craft APRs for ducks. I know my service just to be clear on that and I didn't call out all of that stuff in here, because it is concentrated on the SPF X story now PMP chase a quick update from here right now, Patrick is still on familiar family leave, I mean actually, unless I'm completely mistaken or situation has changed from next week. So we can expect then a updated releases for p.m. PHAs in April timeframe.

A

Rapids will take over the world now and Patrick has been concentrating on the family, which is a good thing, and the 2.0 tree was released in February. There has not been any critical things in here, so there has not been really a release requirement for releasing new things and BBJ s is a great way of using SharePoint REST API is you know, JavaScript implementations on the history is that I see a line.

A

There are a few updates as a new preview version at 1.8, and that has the SPX doctor for checking compatibility of dev environments with SPF X version. Super super awesome capabilities. Creating myself grab subscriptions removing site design tests, additional of history's history usage reports, commands updating teams, commands for support, techni, two channels and new sample scripts, a really important thing, also the sample scripts. So in the CLI documentation, there's no better sample documentation and additional things.

A

So people can more easily understand how we can take advantage of this command line tool because, especially if you come from a let's say from classic windows, development side or a classic sharepoint farm solutions, transforming into this new way of doing business does the allies that might seem slightly weird. So the disciple scripts are certainly help on that and thank you who go for the comment related known as VFX doctor. It is absolutely brilliant. So that is a great way of checking that your environment is matching.

A

What we want to target yours is perfect solution on, and so, if you're running into any problems related on, hey I can't get to getting started. Solutions to work or I can't get the tutorial. You can run the command and it will tell you what's wrong and how you fix that and that's brilliant.

A

That's really really cool, it's very reusable components that have actually move, and here as well, so the react controls, 1.17 release version was released and there was foreign air control like 20 PRS, with additional enhancements and then 20 PRS for bug, fixes or improvements, so really cool stuff. There's as an example, there's localization of all sharepoint online languages for the controls, with all the translation capabilities. So basically all of these controls can natively translate by themselves automatically.

A

So your language which decide this being presented for the introducer and that's actually pretty mind, bubbling feature and we definitely need to get Elia or somebody else to actually demonstrate or Alex or somebody else to demonstrate that functionality and in practice in this call, because that's insanely cool everything, can be order translated now and plenty of other stuff happening, also in the real property control site in this project on the SPF X, a human generator, quick update on this one as well. There has not been that much progress in here.

A

Well, to be honest, it's one! You never say that its feature ready, but there has not been demand for improving the the generator that much and this one is the generator which is extending the other box generator by adding useful capabilities by increasing your productivity as a developer for creating SharePoint framework solutions. So you can then answer questions related on C ICD. You can get this BMP J is included there.

A

You can use associate controls, SP SP effects, controls to project automatically, and it will then bundle that kin using again two out of the books, yeoman generator, but then decorate that with additional settings and a really cool that it's supporting angular already angular 9 support is now being kind of a planned and design which might be interesting area where you can help Stefan power, but please reach the Stefan power. If you're interested on on helping with this one now Hugo I saw you live on the on the chat. At least this is a quick recap.

A

What has happened in our SPF example side? So Hugo? It's your stage.

B

Thank you. So we have a lot of extensions of new extensions samples. You can go to their a quedan, MS /s pfx extensions, there's 74 samples now, but we have three new samples, one from Joe Mendez, which is teams notifications, which is really cool. It actually gets an applications out of teams and chose them in SharePoint.

B

We have page comment sentiment which uses an takes to actually detects the sentiment on the page and actually gives an icon to show how all this is doing, and this is by Louis, and then we have document preview list view command set which actually allows you to preview pretty much any kind of document within the page without having to navigate to the documents and then from the webparts side. We have a total of 176 samples, so we're getting a lot of great samples. We have, you know, probably the best sample out.

B

There is one by david warner and hugo bernie, which shows how you can add custom CSS to list formatting on a web page. We have another one by Alex, Tran tip, which is who is showing how to use the PNP field, controls and PNP and create create that within a PNP list view on a page, then we have.

B

We have a new one which allows you to manage X PFF solution using application, lifecycle, management, API, is and then dev radar by Sal Oliveira, which actually works with the github dev radar and finally, the last one for my cache, which shows you how to check whether our user is in a group and shows the list of users in a group there's a whole bunch of new samples waiting in in pull requests. So I expect we're gonna have a lot more samples next call. Thank you. Thanks.

A

You go, I did saw the the sample bits you contributed as well, so that's spending in the poor request side, which is really cool related on adaptive parts and SharePoint, so really really cool stuff. Also, a cache is on the call and he's going to demonstrate the check user group sample in this call as well.

A

One thing before we go to the demos and I will let work come on and Gary to do the demos I don't need to promote you most likely as a presenter first and just one note related on sorry, it was Dinesh. I asked around the latest supporting latest version of node.js with SPF X solutions. Right now, we're still at version 10 level and and version 12 or 14.

A

Is that coming out pretty soon or did come out already, and it will require a new version of SharePoint framework, human generator and that's would be the 1.11 and but it will support whatever is the suitable next latest version for the development? But again there are plans. We want to keep updating the support, but I can't give you an exact timeline. When that will happen now, Bachman and Gary Gary I can see you at least in a call as a person there yeah.

C

I am here as well and.

A

And Waterman is a presenter as well. Yes,.

D

So let me share my screen first, so first I'll introduce a couple of concepts and then Gary will take or talk about the react. Hawks part of it I'll try to be as quick as I can, because I can see. There's lots of interesting demos coming up so first thing.

D

We're going to talk about today is SharePoint framework service scopes, then how to use service copes in together of it react context and finally, how to use the react context, service, cope and react hooks and then Gary is going to come in and talk about more about react hooks as well. So before we talk about SharePoint framework service scope, let me just kind of set some context of the web part which we are going to see. So this is a typical Akshar web part which I was playing around initially when I was discovering service copes.

D

So, as you can see, it checks the current user. It gets their manager from the user profile service and then it gets the reports from the user profile service as well, so forgetting that we obviously need to talk to the user profile service. Rest API and the way we could do it is is by straightaway using the SPS ugp client, which is available in the SPF X context, or if we don't want to pass around the context, maybe to your components or maybe if the components are deeply nested within your reactor II.

D

What you can do is pass in just a service scope. Now the one good thing which passing in the service cope does for us is: it allows us to make our components easily testable. So this is my component and using the service cope. I can register either the correct implementation of the User Profile Service. This is the custom service or I can register a mock implementation.

D

So if we are testing our code and we want to return mock data depending on where the web part is running, so in this case, if the real part is running in the context of SharePoint or as a classic web part, we are fetching real data from SharePoint. Whereas if it's not running there using the service scope, we are fetching the data from the mock User, Profile Service, which just returns Jason blocks blobs, so using service copes.

D

We can register register our services on the service scope, which is so the service scope stepping back a bit. So a scope is a the SPF X implementation of the service locator pattern where you register services on it and you can consume the services on it and as far as I know, the SharePoint framework itself also uses the same kind of model for registering the ad HTTP client or MS graff client. So on so we are just using the same kind of model to register our custom third-party services as well.

D

If I go and user profile service, you can see here that the context is not being passed passed in and when you register the service, when you try to consume a service using this approach, the service scope is automatically passed in and then you can fetch the HTTP client, pH context and so on from it and directly make a call to call to SharePoint now the one one thing about this approach is even though you're not passing in the context.

D

You are still passing in the service scope and if any of your child components in react, need that service cope, you will have to pass that down down the component tree one way around. That is by using the react context. What we will do in the react context world is react gives us a basically an object to store all the data we want, which is said globally by the by the application. Now this is different to the SharePoint framework. Point Oh web part context. So before we actually go and see.

D

How react context helps us here we'll need to create a context, object in react where we'll have the Service Corps property, and now this is actually a different web part where all we are doing is getting the users graph users details from the Microsoft graph API and displaying it on the screen. So an implementation of this is you can see here. It is just displaying the user name know the way we do. That is first by creating the react context, object, registering with react context and then from our top level component in the application.

D

We just assign a value to that and, as you can see this hello user component, we are not passing in any service scopes or any context to it. Internally, the hello user object gets the service scope from its properties, and then it is able to call the Microsoft graph service to set the state and and show the user. Now. How is this possible?

D

We're not passing in anything here when calling the component, but if we go inside the component, the property, the visco property, is already filled in and the way we do, that is with something called higher-order component in react, which is, if I go back to the hello user component. When we export it, we just wrap it without debt service cope higher-order component, and it is think of it. Just like a function where you pass in an argument.

D

It uses the react hooks to get the app context from from from react and then passes it in as a property. Once that service scope is infused it can, it can be then used to fetch all the details or all the services registered from it now I mean it can be a bit much to wrap your head around. All of this, so I have got a few blog posts which will kind of step through all the different aspects of the code and then I'll post.

D

A link to this in the chat as well now you're familiar with react hooks if you're familiar with react context. This might seem a bit of an overkill to you. It's like. Why am I not using the react hooks directly and that's because react hooks work mainly with react, functional components and there might be already a lot of code out there, which is using SharePoint classes, react, because that is what we have been using for a long time now. This is an easy way to just wrap your component with this higher-order component.

D

If you want to get started with hooks or if you want to get started with the service scope stuff, but if you're starting something new I, think the recommendation from the react team is to start with hooks start using hooks now where you can, and if that is your situation, and the recommendation definitely is to go with a full hooks approach where you don't bother with the high order components, you don't have to do a lot of this stuff and Gary is going to then next talk about a full hooks approach, where you only use functional components and not last components so Gary if you're on the call feel free to take it away.

D

C

You very much okay, great, so just show you, the web part that we've got it's very similar to what vardaman was showing it's the same output. It's the same example as what he's just shown, I'm, just showing the person who's name, calling the graph and so to go through kind of what has been been done in this approach.

C

Is that I've used functional components for the the web parts and just to basically show you how the differences between the two approaches so we're still passing through the service scope in as a property, and we are still then setting the service scope in the context which is created in a similar way. So we're creating this context here and reusing this in the web part. So we have a context provider which is obviously providing this globally.

C

This service scope globally to all of the the child components which we've got hello, user and kind of things to point out- is that there's no. This involved in functional components which you find in class components if I go into hello user.

C

So now we can see that it's it's effectively doing the same job, but we're doing it in a slightly different way, and so we've changed to a functional component and rather than using that this step set a state approach and we're actually using the you state hook. So we're setting an initial variable for storing the name value and creating a function that we're going to use to update the state with and rather than using a higher odd component.

C

We can access the global context directly and from in within this within this component by using the use context hook to bring back our service scope. And here we're using use effect in the place of component did mount so use effect is a hook that allows you to run a function. Basically, when your state changes- and although for this example we're just passing an empty array, this means it's just going to run the first time.

C

This component mounts, which is useful for where you want to fetch it your data and so we're creating a graph client factory by using the service scope. And then we call the circuit. We create a client and then call the me endpoint to return the current users name and then use the set name function and to update the state of that basement and then in here. This is where our component actually renders again.

C

There's no need for this here and we can just directly access the state variable by its and it presents it on the page. So it's a function. Phocion Alcoa is a nice simplest, simplest, easy way to build your components. Now it reduces a lot of the boilerplate and if you are starting to create react, components and then definitely I think going through the hooks approaches is the place to to start, and so this code is available as a sample and I actually pushed the pr last night after they called me out on it.

C

I'm PMP weekly, because I didn't put it forward as a as a sample. So hopefully it will be available for you to to look at in the samples very soon yeah.

A

It will be there thanks, Gary, okay, that's it! Thank you very much. That's Gary, thanks for coming, really really powerful stuff really really great stuff, and this is exactly the stuff which we definitely want to also cover, so the efficient ways of doing development in the course, but then, at the same time, demonstrating different functionalities and samples and solutions are super valid. Also. Thank you. Thank you for that. Next we are moving to Akash. I think. Are you a presenter? Did we update you over there.

E

Some presenter.

A

E

A

Know are so we can actually jump on your screen. Yeah.

E

A

E

So hello, everyone, I'm Aakash, Maharaj I work as a Microsoft 365 developer at HCL Technologies, so I have experience working on SharePoint office, 365 and Microsoft Azure, and after this call you can connect with me on Twitter and/or LinkedIn. So these are the handles. So today, I will be giving the demo of an SPF expert that I recently contributed. So this one is for the check user look.

E

So it's an SPF X wrapper to using which you can find all the groups, a particular user is member of or all the members in a in an office 365 or as your ad security group. So you don't have to move out of SharePoint and just by adding this webpart, you can quickly. This information and I've also added the option to extract all this information to a CSV file. So the Vepr tree uses Microsoft graphs appear to fetch these user and group number details, the directory dot, read dot.

E

All permission will be required for this to work and in particular the API is used for getting this information would be the routes in group ID members API to get the members in a group and then the users email member of a peer to get all the group's user is number of. So apart from this to extract this information to a CSV file, so I have used. This react. Csv third party package I have added the link for this in this sample. Only so you can check it out.

E

It's pretty easy to use so using this video extract all the data to a CSV file, so let me show how it works, so this is a page in which I've added this web part. The web part doesn't have any configurable as such, and you can start using it by gesture, adding it here so here, I have this select user. First of all, I have two pivots at the top hips one is the check user membership and the check group members.

E

So this check user membership would be used to get all the groups a user is. Member of so here I have this select user people picker. So this is a PNP, reusable people, picker control that I have used. So if I enter my name here,.

E

So this would now show me the basic details about all the groups that I am a member of like the name description and the group type, whether it's office 365 or a security group and I. This is a details. Details list of the office like fabric react, so I can simply sort all this information by either name description or the group type as well, and then I have this export to excel link here. So, if I click on it, so this would extract all this in mission to a CSV file.

E

Yes, so here you can see, this is all the information that we saw here and apart from this, there is also this fixed box that says filter by name, so this can be used to quickly search, whether a group that you want to find if it's available in this list or not so similar to this, if I go over to the other tab for the group members, so here I can enter the group name. This is one of the groups that I have.

E

So now it would show me all the users that are added to this good. So currently, there are two only and similar to the other one. We have this filter by name option here, as well as the export to excel. That would export this information to a CSV. So that's it for the functionality. Now, let me jump over to the code, so this is my web pad or TS file, so from here I am calling this check user group component.

E

This is my react to a component where I have. This is basically the route component that includes some other child components. So, first of all, there is this pivot control here that has two pivot items for the check user membership and the Chur group members, and now, whenever I select one of these pivot items, so another child component would get rendered. So these these two folders are the ones where I can find these components.

E

If I go over to this one so here, first of all, I have this list of all the columns, like the name, description group type, and now let me start by going to be reindeer method. Yes, so here is first of all the people picker control, the PNP control I have so for this. The principle types have selected it as principle type dot user, so that in this favorite item, I can only select the individual users because I need to get the groups they are part of.

E

Then this is my text field to filter by name and then this CSV link is the component that I have used for that third party package to export this information to a CSV so inside this and I did that command bar button for the export to excel, and then I have my details list that contains all this information.

E

So on the on change event, for this people, figure I have this method get user groups, so what this would do is it would call this get user groups method of the MS Graf service class. So this is a service class that I've added here and here in you can see. The I have added two methods: aid, one is called the get user routes and the other is the get group members so here is an here is where I am calling those graph API endpoints to get the information that I want like this one.

E

The groups group ID on members. This is to get all the members in a group and above here I have this users email number of a peer. So this would get me all the groups, a user is part of so using this I am getting all this information and then I'm simply updating this to this group item. State variable I have- and this is the one that is used in this details list, so this was for the check user membership and similarly I have dis check, root members class as well.

E

So here also something most of the things are similar, but the method would be different, like where I'm calling this get group numbers of their service list to get the members in a group, and then here in the people picker in this component, I have specified the principal types to be as the distribution list, security route or the shape on groups so that I can select individual users in this pivot. Tab and the rest of the functionality is similar, like I, have discovered by name here as well.

E

The CSV link and the file name would be different for the user information. Only group membership and then I have the details list. So this is pretty much for the apart functionality and within the package solution like I, said earlier, the directory, Daughtrey dot all would be the permissions code that is required for for executing both the Microsoft graph appears so I guess, that's it for my and any questions I would like to answer them in the chat box. Oh gosh.

A

One thing before you disconnect just appoint their own. What we are saying here this is absolutely brilliant solution and create create solution, demonstrating the power of the BMPs pfx controls and the craf api's, and all of that's a really really great stuff one thing. Obviously, the downside of this solution is that it requires quite heavy permissions that the Asha 80, which is the director original and one one way of kind of approaching this challenge, could be also that we have the isolated permissions enabled so in the package.

A

Solution chase and right now to isolation was not on, because now that beast isolation is not on, then we grant the same token for everything always by effects before, but again, everything is debatable, and this is a sample demonstrating the capability and it's a great sample. Now for done, can you go back on the on the still on to Visual Studio? So it's just been warning that if you would like to have a unique permission, management for this solution, I know our cache knows this. But it's it's this domain isolated this.

A

It would be the option and then what happens behind the scenes. If that's true is that we create automatically another ad application, and we only current permissions for this particular web work so that, if another web part is, is hitting this API and it would not actually well, it wouldn't accidentally get too much token permissions. But but again it's how we handle the tokens. And how do we things- and this is a great, absolutely brilliant sample on on demonstrating the power of graph and SPFs controls as well, so really great stuff.

E

Thank you, yep.

A

Thank you now, wow, we are on the schedule. This is absolutely brilliant. It's probably be of service. I would I didn't talk too much on the start. I will take full claim of any of the delays in this course now. Next one we would have boo George from treble and I noticed that you're ready, I press ENTER, which is great and yep screen.

F

Shot and birds, yeah yep and everybody can hear me and I guess like I, get five more minutes since everybody went faster there.

A

F

A

If we, if we close two minutes two hour, that would be perfect, but let's see how the system goes and we'll adjust realities of life. You never know what's gonna happen, but thank you. Thank you. Boo. We can see now we can hear all get to go so take it away. Oh all,.

F

Right so my name is Bo George and and that's not to be confused with Boy George of Culture Club I'm, a principal consultant at three will and there's a bunch of stuff where you can find me. If you want to hunt me down and three will we're a consulting company that we we focus on collaborative solutions, for it seems like ever since groove groove wasn't owned by Microsoft and when you stop to customize SharePoint by editing.

F

Oh man, oh net XML, so I've been doing it for a while, and so what I'm going to show you guys today is a question-and-answer. Spf X solution we developed for a customer. We had to get their permission for me to general, demonstrate it today. It's not open source yet, but in the next week or two, hopefully we'll talk to them and get approval and make it available as a open source project for everybody. So I don't have a lot of slides. This is really last one before the demo.

F

You know the first question is really: why build it? We all know Yammer now supports question and answers, but this was built kind of last summer and in the customer didn't want to utilize a multiple products, a Yammer for it and governing Yammer and the groups and all the membership and all that kind of stuff, and at the time it didn't support you new, QA and stuff like that. So so Yammer wasn't an option for us at that time, but I realized that it could be for some now. Also, this customer was migrating from jive.

F

Anybody that knows job they have spaces and groups and questions is a really popular content type in that where anybody typically in the company can come, ask a question and then the people who own a jive place or site could answer that question so that really fed into the mentality behind behind why they wanted this, and so they have- or you know they have more than this now, but they had like 1,500 site collections that we migrated and you wanted it to all be in one box right.

F

You, your question-and-answer data to live in SharePoint lists as a part of the site. With the same permission, structures, SharePoint groups and all that kind of stuff and make it easy really easy to provision create sites the end users request and be provisioned delete them link when they're no longer needed. So so those are a lot of the factors that went into why we did this and kind of with that I'll just switch over to a demonstration of what this is, which I I took the the benefits look book, because that benefits sites.

F

A really good scenario for where people ask a lot of questions and the only thing that I've changed on it is put this web part here. So it really doesn't take up a lot of space on a site. You can come in here as a normal end, user and search for questions. So you know you just start with a you know a what phrase or a where phrase or anything like that in your questions will filter and this thing is already doing security trimming.

F

So if the owner of the benefit site didn't want anybody in the world to ask a question or their visitors, they could turn off this button. But if they want to allow anybody, including end-users, to ask a question, they can turn it on and I'll show those properties in a minute, but really asking a question for an end user. It's just simple as clicking on the question and it launches to another page. This is an is the same web part on an application page, and you know my questions always start with what the heck is.

F

Beau demoing- and this is a rich text- editor- that at the time I don't think the NSP fx-control existed for it or I didn't find one. So it's actually using quill under the scenes under the covers, and then it's styled with all the office fabric icons. So you can come in here and, put you know a bulleted list of stuff and just kind of go down the line and do that sort of stuff. I actually had I turned off the ability to upload images, but we could support that as well.

F

But somebody could, you know, go and post their question and what you'll see after I post is that I'm automatically following this question so I'll be notified of replies to the question. I can like my own questions or other people could come in here and like it. When testing this I talked to myself a lot so I'd come in here and reply to a question and just sort of start that thread going.

F

You know and you can reply to lies and all that sort of stuff the threading goes basically as deep as you would expect, and then I could close this question and now that I've launched to this page, it acts more like a spa type application where you close it and you can see a list of questions again. It's the Seven web part just configured in a different way. So I, you know, I have some fake users in here, and you know you notice.

F

Some of the icons showed that the question hasn't been answered yet and then shown some have a checkmark to show that it's answered. You can actually filter to open and answer it and stuff like that in here. So I, could you know if I'm, if I'm a helpful person, I can say what's open out there, that I could help out with?

F

Or you know, if I'm just looking to self-serve, what's been answered so this this Michael Jordan question is the one I kind of play around with so you could click on a question and and just to kind of show you what the evolution might look like is you know, Michael Jordan is asking about his championship rings and how he gets coverage for him and different people will Holland has responded and you see when he responded and then you know, I responded to him and you get that threading and at some point you know a question is answered, and so since Jordans asked the question, he has the ability to mark somebody else's answer as the one.

F

That is the answer myself. I am also a moderator of the questions, so I could mark it as an answer and that's as simple as you know, clicking the question and I just unmarked it. As an answer, so this is sort of what an unmarked scenario looks like or a marked scenario where myself or Jordan, since he asked marked it as an answer again, anybody could come in and mark this as helpful or like things.

F

So any end user can do that stuff and then only the person who asked the question or a moderate moderator could delete their question. Only the person who asked replied or replied to a question or the moderator could delete replies. So you see stuff like that and then, if I go back to the list, I'll just show you some of the webpart properties that are available so on an application page. You know it'll show like this.

F

Instead of the other dialogue, most of these are kind of typical behavior modification ones, but the ones that I think are kind of interesting. That I don't see quite as much are these things that I did for permissions.

F

So this is the toggle that a site owner, so not an author, but a site owner could actually turn on and let visitors ask questions and that way you know if an author could come in here and edit, and this is actually disabled for them, because they don't have the permission to do that grant, but an owner does so that's what this button would toggle is you know, can anybody who's visiting my site ask questions in the case of our customer most of these sites, our communication sites opened up to tens of thousands of users.

F

So that's who they're letting ask questions, and then this other button here is manage notification group and what this is is you do have your owners, visitors and members typically, but those may not be the ones. You want to moderate the questions that maybe a different group of people, a subset or a cross-section, and so this allows us to say who are the people that need to be notified when new questions are asked or tweak or delete bad replies and all that sort of stuff? So these two areas are the things.

F

I'll show you a little bit in code about how we did that the rest of this is just making the web part do different things, different sorts and show and hide stuff, so with that I will get into code. Because that's why we're all here right.

F

So this is the solution and I have a bunch of tabs opened up here that that I'll just kind of walk through so the the package solution is pretty much your typical package, but because this thing needs to be deployed to you know thousands of site collections, kind of created on demand, I am using old-school element, XML files and schemas and stuff like that to provision the underlying lists and I actually had you know upgrade versions of this too, but so the elements XML file for any of you that have been around a long time.

F

You know have the love-hate relationship with this thing: lots of fields defined in there for all the different things I want to track, and then I define two content types. So a question and a reply and you'll see that a reply could actually have a collection of reply, IDs and stuff like that and in a question ID and then, of course, the list instance.

F

So this is the underlying question list that we, you know we set hidden, so nobody can just necessarily see it in site contents and then that application page I'm talking about so that's the elements. Xml file I, really like the earlier demo about using hooks when I wrote, this I was sort of doing Redux for the first time, I come from an angular background and so I really love dependency injection and in angular and I tried to do some of that sort of stuff here.

F

So these are some of my services that do SharePoint typically operations and I was using Redux and their middleware to inject them, so that my actions and my components kind of had a single instance of a service to use to make data calls and things like that. If there's time, I'll show the actions as well, but it's probably not not as special or unique to show. But this is this was sort of meeting me coming from an angular world into a react world and trying to still live the same life so permission service.

F

You know you'll notice, that I actually didn't inject that here, because the only thing that uses it is the web part. So none of my children components use the permission service, but it really only has two methods that are important, and this can visitors ask questions, so you notice that toggle, you know that web part might be on ten different pages. Sometimes- and this quite this, this is used by the web part to figure out what the toggle state should be. Should it show as letting visitors ask questions or not right.

F

So it's it's a web part property, but it's dynamically updated by actual site settings. So it just figures out. You know, get the visitors group get the role bindings, find the visitors role and then say. Tell me hey: does that visitors group have the ability to add list items if they do, then that toggle is going to say true, if not it's going to say false. So it's dynamically updated, updated anytime. You open that that panel and then this is the toggle.

F

So only like I said site owners are the only ones that actually have the ability to do this. But if it's already set to true, then I want to reset the role inheritance on that list, because I want to turn it off so I say: hey I want I, want this questions list to have the same permission as the rest of the site and that's what this reset does or if you're toggling, the other way to say, hey I, want to let end-users ask questions, then I need to figure out the contributor role.

F

Let me find the Associated visitors group to this and then I'm gonna take those two things and I'm gonna break the inheritance from the site itself and I'm gonna grant the group, the visitor group, the ability to contribute to that list. So that's how that toggle works. How all of that stuff, where I said moderators, could add and delete, and the person who asked the question could do this and the and the person who replied could do that. All of that stuff is sort of managed through what I figure out in the user service.

F

So you know just get the current user and then I sort of prime my object with a whole bunch of falses that say: hey. They can't do anything, they can't add, delete edit whatever and then in this update permission information. This is the guy that really tells me everything else. I need to know for that particular user, and so I figure out. You know based on the effective permissions they have on that list. Can they view items? Can they add items edit delete and so on and stuff like?

F

Can they add items that will influence whether or not they see that button on the on the screen? Because if they can't add items, maybe only members and owners can maybe visitors can't? So these sort of attributes tell me that sort of information and use that on the screen. So that's the two services that are sort of different since I have a couple more minutes left I'll just go through a few other things, so, like I said, I use react.

F

So you see the patterns and I have shout outs, one more slide about shout outs using connected dispatch and connected state love to switch this to hooks at some point, because this all this boilerplate mapping, state and props and all that kind of stuff became a little bit annoying. But in here this is kind of my default container.

F

The one thing I wanted to show in here is that with quill you know, I was able to make it look as close as I could to SharePoint by overriding a lot of its Styles with all the office fabric icons. So you get those things that look native and not like the typical bootstrap icons and all that kind of stuff that that many of the other controls that are not SPF, X controls have so so that's how I did some of that stuff and then just a word.

F

You know on on the structure of this so kind of over here on the left are all of my different components so default container. His job is sort of like a little bit like a router, in my angular mind, to figure out if I should show a list of questions or a specific question or even an air.

F

And then, if you show a question it's going to show, you know it's replies and replies to replies and so on, like that, so questions, reply, list and reply kind of build, a structure and a reply will in turn to a reply list and a reply. So there's a big component structure, interaction there and then, of course, question listing questions.

F

So you know all those things work together and then- and that's where Redux and all of it stuff really was helpful because you know they all have their their carved off properties and state and actions from from the state. That's kind of all defined here which this is a humungous file. But it's you know it's the business logic wrapper and the sort of workhorse around stuff like getting questions and doing things like setting up our order by our filtering. You know if I'm moving from page to page of questions and all that kind of stuff.

F

So this this was really helpful to me but I. You know I'm, seeing the writing on the wall with hooks and and certainly would start moving more to that direction, and you know doing things that way. So so that's the code in a nutshell, happy to answer any questions on it. If there are any so.

A

Really cool stuff boom and I and I'm watching this code and everything it's just to strike me as well. I'm, just gonna be open and transparent switchable and it's cool to see how awesome stuff people built with being PJs and the tooling and controls which would build together with community, which really shows the power so the basics and and the PM PJs as an example, is a fundamental base in this one as well. One thing what I wanted to actually ask and not about the code.

A

Is that you hand in your property pain you had proper ass or a bit part information, and it says version one point: zero point: three I think I know the answer for this one, but I think it's actually good for the other ones to here as well. So why do you have that? Well, it has that come to be useful and yeah. I think.

F

It's you know for me this. This webpart is deployed in the tenant based app catalog and then made available on thousands of site collections and every now and then you know when you're doing upgrades you want to know kind of unequivocally am I run in the latest version of the code of the code. That I would expect. So that's really helpful without having to run those get P and P app commands and all that kind of stuff.

F

Where yep you might, you might have a mismatch between what's in the app catalog and what's actually deployed to your site, so yeah.

A

Yep absolutely makes a it's a nice small. Let's say make it easy for end user to actually have a look on that or you can. Your support can potentially say. Okay, so can you double check that it's running the right version and they can easily see that from site level without any complex today, so pretty cool? So it doesn't that's really cool but I. Think that's it for now. So thank you for community's shoutouts.

A

F

So you mentioned community: all none of this would be possible without all those people, P and P provisioning schema for all that stuff p.m. PJs, the dev effects, webparts the react, controls and quill, and many more so that's my shout out to all those people who I've learned from and built on, yeah.

A

Thank you both thank you. Thank you. I was still the the presentation we're running on the hour and really cool demo really great stuff, and, and hopefully it will be open source.

A

Maybe it's not, who knows, but it's still really cool to say the thinking and the implementation behind the scenes, and- and this is precisely what we also want to have within this course, because it's about sharing learning, it's about, sharing what works and what doesn't and having a discussion on on the different patterns, because that way we learn I say as a group of people rather than individuals. So thank you both for that one I think that's it for now we're running on the hour.

A

I will actually do some boilerplate slides whenever I find where my mouse is there, it is, we will not, unfortunately, have a Q&A. Once again we had three demos, three awesome demos and we're having this constant debate on debate on that.

A

Should we have two demos on this course and then Q&A time, or should we have three demos and then potential Q&A in the chats and or before the call, and please give us feedback on the on the chat on that one as well, because we never have time for Q&A, but then do we want to have a Q&A time? That's ah it's so hard and there's so much demand for the demos as well, and we want to show your awesomeness and your awesome demo. So in the future.

A

So please, let us know my feedback specific respective and the recording will be available in 24 in a massive 365 SharePoint community YouTube channel it came. Accenture is a start, BMP videos. We are moving into this in 365 BMP plant usage on the BMP sign, so such letting you know their next SPFs call is on April 9th and the next Microsoft 365 general def sinkhole on the week from now is on Thursday April, 2nd. Where we talk about also Maxis teams and teams, yo teams demo is queued up for that.

A

One again about another perspective, I think it's single sign-on implementation for using the yo teams and then a few other demos as well, but that's pretty much all we gonna go cover today. We have plenty of community calls plenty of demos and plenty of stuff available, moving and join those which you find interesting. Please give a feedback all the time if something isn't interesting and we should change something. Let us know we are here to help you.

A

You are that's a really important thing for everybody to understand, so we I'm here my primary objective- is to help you not other way around. So I need to know what you need and to be successful. So thank you for that one and in the SharePoint community side, we've been certainly doing that in the past as well, but let's keep on doing that in the future, but that's it for now.

A

So thank you, everybody and thank you for one more time for the crate, demos and we'll be definitely in touch stay safe out there and let's meet latest in a week or yeah latest in a week, bye, bye,.