Microsoft 365 Community Viva Connections & SharePoint Framework, 1 Jul 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: SharePoint Framework Community call – 1st of July 2021

Description

SharePoint PnP Community - SPFx & JS SIG call on July 1. Three demos: Bringing your custom apps to Viva Connect mobile experience, Copy PnP Search results web part settings, and Follow Documents in Modern Workspace with SPFx. Four PnP SPFx web part samples delivered! Released CLI for Microsoft 365 v4.0.0 Preview, Reusable SPFx React Controls v2.8.0 & v3.2.1, and Reusable SPFx React Property Controls v2.7.0 & v3.2.0. Summer break and community call schedule updates reviewed. June trainings on Sharing-is-caring. Join Viva Connections private preview! The host of this call is Patrick Rodgers (Microsoft) | @mediocrebowler. Q&A takes place in chat throughout the call.

Learn more:
• See the full blog post for this call at: https://aka.ms/m365pnp/community/blog
• Download invite for bi-weekly SharePoint Framework call at: https://aka.ms/spdev-spfx-call
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

Hello and welcome to the sharepoint framework in javascript special interest group bi-weekly sync, it is july 1st, if you can believe it uh or not, but it is july 1st. So I am your host patrick rogers on the call and as always, we've got a great agenda for you today. We're gonna have our updates around sharepoint framework. Those are gonna, be pretty minimal.

A

Today, uh vasa is on a much deserved and needed vacation, so I hope he is out having a lot of fun and then we're gonna have the patterns and practices updates across the program. New community samples, we'll do our picture optional picture time for folks that are interested, and we got three great demos from vardaman, anup and andre so bring in your custom apps to viva connect mobile experience. uh That's gonna be a really big topic.

A

uh I think in the next six months, for everybody is viva connect and getting uh up to speed on that, uh so excited to see those demos starting to come in uh copying, pnp search, result, web part settings and then following documents in modern workspace, with spfx three great demos. As always, and without any further ado. Let's get started so opportunities to participate in the pnp program, lots of great chances to participate, and we encourage all of you who are interested to participate or if you have ways we haven't thought of to participate.

A

Please let us know, but my favorite way is to get folks doing demos on these calls. We've got a bunch of different calls and a lot of opportunities for a lot of different kind of demos. So this call any of your at pnp demos or spfx demos or client-side development. Demos, uh love, love, love to see those. I learned something uh every other week on these calls love to learn from everybody, see the great demos.

A

So, if you're doing uh something- and you would like to share it- please reach out to myself or vasa and we'll get you scheduled on an upcoming call. You can also contribute on github that could take the form of reporting issues, submitting pull requests or helping others with issues they may have opened or questions they might have. All of those are really great and all of our uh at pnp offerings absolutely uh encourage and welcome uh your your pull requests and as well as your issues.

A

So, if you're having any trouble, please do report an issue. We don't love that there are issues, but we love to hear about them so that we can get them fixed and that really helps unblock everybody. So if you are having trouble, don't suffer in silence, let us know we'll do our best to assist as well. You can always provide feedback. How are the calls how's the documentation?

A

Where else can we help and positive feedback is okay too, because if you really like something we're doing, we can look at doing a little bit more of it.

A

Next up is our giant page o links, so we've got a bunch of different content uh for you. The developer. Videos are focused largely on uh developer scenarios, so there'll be specific uh videos around, say, authentication or getting started with spfx or uh how to use pnp powershell things like that. So developer, focused videos.

A

We've got community videos which are going to be largely the recordings from this and other uh community calls. So if you happen to miss this a week, you could always catch up on the recordings and those are there in the youtube and then open source. We've got a bunch of uh repositories or organizations, all of which are open uh for business in the sense of welcoming your contributions and feedback. So that's sharepoint, pnp office, dev and microsoft. Graph are all uh you know, really looking to get your involvement and and get your feedback and help.

A

You drive the direction that these things are going in.

B

A

Really encourage you to get involved in one or more of those places uh if as you're interested uh in them and then sample galleries, tons of great samples, team samples, spfx web parts, power platform, samples, spfx extensions and then list formatting hugo will go over a little bit later. Our new samples that have come in recently or been updated, and this has been a great project and is really a valuable resource for folks getting started uh developing on these things or uh even uh experienced uh folks.

A

If you are, you know starting a project, it's great to look up and see how maybe other people have solved uh that problem and get some ideas from what others have done. It's a really valuable resource there for the community and encourage you to check those out, and, of course that was a lot of links.

A

So you can always just remember ak dot, msl m365 pnp, and that is our patterns and practices program landing page and that will uh get you uh information on the entire program as well as links back out to all of the content that I have just mentioned, as well as more so ak dot. Ms m365 pnp. Very much encourage you to check that out and that will have all the info you need.

A

We are sort of changing things up a little bit during the summer break. Some calls are taking a break. Other calls are continuing these thursday calls. So both this call and the general dev special special interest group call like, for example, next thursday will continue throughout the summer, but all of our other calls are taking a summer holiday, so those are going to be off and then, when we come back in august, we'll have a slightly uh different schedule. Don't worry too much about uh tracking it.

A

Now we'll have new, invites and we'll be uh making sure everybody is aware of what the call schedules are and how to attend uh the calls and all that information. So don't worry too much right now about the particulars just know. We are going to have a little bit of a revamped and hopefully a little bit more accessible and easier schedule for folks.

A

So they uh aren't, uh you know, or they are able to attend uh more calls and the calls they want to attend and we avoid some of the overlap and maybe some of the uh call fatigue so excited to get that going, that'll be in august. uh So this call in the general general dev sig call no changes throughout the summer. Those will continue uh and then next up is david, with sharing his caring updates.

C

Thank you, patrick. Well, everyone, as you can see, there are a ton of resources available to you and, as you will continue to see through this call available to you to contribute back to, but we understand that there are some hurdles that may be uh limiting your ability to or desire or options for you to contribute back.

C

So the sharing is caring program is an opportunity for you to get hands-on interactive guidance on how you could do things like contribute via github, even if it's unfamiliar or brand new to you, how you can start getting set up as a presenter or getting more involved in the development samples that are available to you. These are hands-on, live safe, space, inclusive opportunities, we don't record them. They are absolutely free and they're scheduled all throughout the month for you to be able to join uh and learn how to do these things.

C

We'll walk you through it, as a group and you'll be able to collaborate with those in the community. Now we're a little lighter schedule for july. We have scheduled out for july and august so plenty of time for you to register and get that on your calendar. We also have a teams- development ama, which has been some of the more popular events coming up on july 13th. So please don't hesitate to join any of these sessions. We'd love to have you aka dot. Ms forward slash sharing, is caring.

C

Now, once you have actually contributed, we are excited to celebrate you in a brand new way using the recognition program. So this is a program that is powered by credly. You get the wink from uh parker even and we will be able to identify and provide you badging opportunities, digital badging opportunities.

C

They will sit right next to your microsoft, certification, badges within the credly program and on the platform. So a lot of opportunity. This is just the beginning: uh that's going to come out with new badges new uh campaigns, some really fun limited edition, badges for doing multiple things throughout the year, some uh holiday and winter related badges. So it's gonna be a lot of fun. We really hope everyone's gonna enjoy it, and we are looking forward to formally recognizing your contributions that you can share on twitter and github, and so please don't hesitate to register.

C

We need you to opt in so that we can connect your contributions to your profile, aka dot, ms forward slash, m365 pnp, dash recognition, patrick back to you.

A

Awesome stuff thanks david for that and uh really excited to see uh the recognition program get started and as well. The sharing is caring uh to continue so really encourage you uh if you're looking to get started or want a place to ask some questions. The sharing is caring, really is just an amazing community effort, and I do please check that out. I've gotten or heard just amazing feedback on twitter and other places from folks that have been on that program or participating in those sessions and has been outstanding.

A

So thank you uh to everybody who's, putting that on and also to everyone that has attended uh it's. It really makes it work and is is great resource uh for folks. uh Next up is a short update just on the viva connections, uh private preview. So anybody is welcome to join this. This is ak dot.

A

Ms viva slash connection, slash preview, slash register, um which uh you know really just abusing the slashes there, but uh this is a great way to get involved in an early look at what viva connections development is going to be it's very similar to the sharepoint framework model. It's based on sharepoint framework in a lot of ways, but there's some important differences. So it's a great way to check that out.

A

Get involved also check out the recording from I want to say two or four weeks ago, where luca was here and did a uh luca and john were both here and did a great uh session on connections dev coming up. um Maybe perhaps somebody can link that episode, because I I don't have that handy, but um you are welcome absolutely check out the viva connections preview. uh It's a really exciting thing, and I encourage you.

A

uh You know to check that out if you're interested- and uh you know look forward to all the great solutions and samples that are going to come out of everybody uh getting into the viva connections. Work next up, pmp, js, client, site updates, with julie.

D

Hey thanks patrick, um so we have a 2.7 release scheduled for july 9th. um I, when I updated this earlier. There were no updates in progress, but we did get a pull request just in uh earlier today for implementing the search parameter in graph. So we will be taking a quick look at that. Hopefully we can get that in for july, 9th um and then also v3.

D

We've been spending a lot of time on v3 trying to um and get us into a beta version of that, so that other people can start testing it out uh hard at work and uh if you have any interest in checking out, what's planned for v3 check out issue 1636, which is an overview of our v3 plans and links off to other sub discussions about uh things that we're looking to update and change for v3.

D

So if you are interested in that, please do take a look, uh don't forget to follow us on twitter, m365, pmpjs and direct any feedback. You have at all questions comments. Applause. We certainly will take any of it um bug, certainly into our issues list um at the pmp.github.iopmpjs, and that is all I had thanks. Patrick.

A

Awesome, thank you julie for that update. I'm excited to see all the progress there and, uh as I mentioned, if you're interested in helping out with v3, please just let us know and we're kind of at a point where we're ready to start uh getting some more folks involved updates on the cli for microsoft. 365., a new beta 3.11 is out with the ability to generate spfx packages for html snippets, sp fx doctor extended to support spfx, 112.1, updating, azure, ad app registrations, deleting app roles and updating sharepoint site descriptions.

A

You can always try out the latest beta npm install dash g at pmp, slash, cli, microsoft, 365 at next or the docker command there, and you can try a preview of the upcoming version. 4 is now available and you can see the npm install command. There is the same, except it is at 4. F, o! U, r, uh to check out uh what's coming with v4, so excited to see that work going on and really this has been a fantastic success in terms of so many folks that contributed to the cli.

A

It's really been exciting to see that encourage you to check it out the reusable controls. We have two different sets of controls, they're the react, controls and the react property controls. The react controls are designed to be used in the body of your web parts or application customizers to display information styled with the office ui fabric.

A

To give you a great out of the box, look and then the react property controls are designed to be used in the edit pane of your sharepoint framework web parts and provide you an out-of-the-box appearing edit experience and allowing you a lot of flexibility to build those experiences and build editing and visualization experiences for your users. Without a lot of uh you know, work you have to do on your own uh current versions.

A

There are 2.8, remember the 2 dot x, branch is for spfx, 1.11 and below, and then uh 3.2.1 and the 3.x branch is for spfx, 1.12.1 and likely above and then the property controls the 2x branch again 1.11 and below, and the 3.x branch 1.12.1 and above want to thank again uh all the contributors here, tons of fantastic contributors uh for the folks uh building.

A

These and it's been great to see this continue to grow alongside everything else, as well, so another very valuable resource and encourage you to use this in your projects as it's a great way to save a ton of time and get a lot of functionality without having to write that all yourself and the community yeoman generator.

A

This is a pnp spfx generator based on the uh quote: unquote official microsoft, spfx generator so you're getting a real spfx project, but with a bunch of additional options during setup. So you can use different frameworks. You can use uh different other external libraries, such as pnpjs automatically as part of the setup.

A

It's really fantastic to see the work done here and how this allows teams a lot more flexibility on top of the out of the box, generator to uh scaffold their projects. The way they would like to or include some things that aren't part of the default setup. So the current version 116, is out in progress on the way to 117 is upgrading to spfx 1.12, uh dropping ie 11 support uh you're, going to see more and more of that across the pnp offerings.

A

Angular 12 support and then updating uh you know just dependency updates, so looking forward to 117 but definitely check out 116, which is available now and with that we'll move up to updates on modern search, sorry and aka dot. Ms p, p search. This gives you access to all the documentation information. You need to build flexible, modern search experiences for your users using a set of web parts. The july versions are underway with a bunch of fixes, optimizing bundle, sizes and some other additional scenario.

A

Documentation so very excited to see that uh the version 423 is the current version. uh You can see the list of things there and then 320 0 is the 3.x branch latest version. It still has some fixes and things there, but if you can encourage you to upgrade to the 4.x branch, a lot of great work and a lot of the forward-looking work is happening there and the 3.x branch.

A

As I understand it, isn't more of a maintenance mode at this point, so not going to get a lot of new features, so new features check out the 4.x branch, a lot of a lot of great capabilities there. A lot of great reviews on using these web parts, so I encourage you to check those out and with that I'm going to pass it over to hugo for the spf x, samples.

E

Thanks, patrick, so we have two uh github repositories that are that are maintained by the community and they contain samples around spf, x, webparts and spf x, extensions and everyone's welcome to contribute, and you know they range from concepts to how to use the control to full solutions and utilities.

E

We again we welcome contributions from everyone, but these are the contributions for the last two weeks on the spf x extension side. Sadly, we don't have any new updates, but on the web part side we have a few updates. First, the birthdays webpart, which is an awesome web part that shows everyone's birthdays and anniversaries.

E

Sajal mighty updated the webpart to spfx1121 the follow documents web part, which is actually has a a a brother or sister web part, uh not web part extension and andre will be demoing that today so I'll. Let him talk about it, but it's an awesome solution. uh Abderman mujahid, updated the uh the calendar web part with an overlap that we were having with the year view and the comment section by adding a vertical scroll bar and finally, dipenshaw updated. The quick poll web part, which was an older web part.

E

Now we fixed a a bug when displaying results for a particular user. Again we welcome everyone to contribute these web parts are uh managed by uh and and contributed by, the community. uh They are not supported by microsoft, uh but we do verify all the web parts, so we do run through automatic uh testing for security exploits and things like that. But you know that being said, make sure if you choose to use these web parts in your environment.

E

It is absolutely your responsibility to make sure that these web parts adhere to your organization's security requirements and things like that and that's just a direct answer to a conversation at chat river. That's it for me uh back to you, patrick.

A

Thank you. Hugo is really excited to see all these samples uh continue to get built out and proved and added to uh it's really fantastic to work by everybody there and hugo. Thank you for kind of coordinating and shepherding those samples through it's a really fantastic resource for the community and very excited to see, just all of that continue to grow and uh become even more valuable. So now we'll go to the optional picture time david. Are you able to take the optional picture time.

C

I just so happen to have camtasia open. Let me know.

A

C

Share my screen here, so everyone can kind of see themselves.

B

I'll even turn my camera on for the.

A

I'll be part of.

C

All right got a few more spots. Bill has got that shocked. Look on his face good to see you all right, we'll give it just a second for everybody to fill in. We got a little mini-me there. That patrick is pointing out. I guess uh all right is that it.

B

That's a sheep, some sort of state going on up there.

C

All right, let's get some waving going on everybody, say hello, all right! Excellent thanks.

B

Patrick back to you.

A

All right well, thank you, everybody that uh is becoming a very silly thing. We do, and I love it uh so, with the demos, I'm not gonna re-share the screen, but vardaman if you're ready to take over. I believe you are up next and we'll get started with our demos.

F

Yes, I hope you're able to hear me- and I will share my screen all right so hi everyone, my name is uh deshpande, I'm a microsoft, mvp and currently I'm working with valo as a technical product owner. This is my twitter profile uh feel free to uh feel free to follow me or just instead of an introduction slide, which david kind of told me you need to have. I just thought I'll kind of kill two birds with one stone and put my twitter profile in the first first slide, as you might call it.

F

So today we are going to talk about viva connections and how to bring your custom apps into viva connections, mobile experience and the desktop experience. So before we actually go ahead with this. There was a slide earlier in patrick's presentation which allowed you to register for the. I don't know if it's a private preview, because it's not private, uh but it's it's a preview and uh to get the connect, dashboards and everything else enabled on your tenant.

F

uh You need to register yourself so that you know your tenant gets uh enabled with the with the properties of viva connections dashboard. So so what? What is aviva connections uh basically? So in my in my head, uh it's it's a mobile first experience. It's it's going to be a teams. Mobile first experience. uh There's there will be an aviva connections, app teams app, which will be released.

F

I think in the future, at some point, maybe sooner or later, uh which which will be a teams app, which you can install in your team's environments and when the users go to that team's app either in mobile experiences or in desktop or web, they will be able to see different things like uh sharepoint resources, things like your custom applications.

F

uh So here we have a sample preview of how the connections app would look in your phone when it gets released uh and then the particular thing we'll talk about is how do you bring the custom applications teams applications which you already have developed into viva connections so uh yeah. So this is a. This is a sample because we don't have the mobile app released. Yet uh uh we have. We are working with the preview um to to kind of see how this looks in uh in the desktop experience.

F

uh As you can see, uh there will be a custom app for viva connections. You can rebrand it you can. um You can call it uh something which suits your organization uh and uh you can have custom cards on on the desktop. So there will be few out of the box cards available. There will be a few cards which you can build yourself and today we'll talk about uh one of those things which is uh say you have developed an application.

F

How do you bring your application to viva connections so just to give you a quick background on what the application is. It's a values, app called valo ideas. It's an innovation, app! It's uh it's a app which allows you to innovate uh in within the context of teams. um It's uh there's many components to it. There's a personal app! There's a teams, tab and there's adaptive cards posted to uh to the team's conversation as well.

F

Now the basic idea behind it is that any teams member can, within the context of their team, they can suggest an idea, discuss the idea within teams and so on, but I won't get into the details, because what the app is is is of less concern here, uh just to just to kind of build like a platform of where we will land from viva connections.

F

uh Once you go into the tab, you can click on any of the ideas and then a more details, dialog kind of pops up where you can see certain metadata about the idea, you can watch the description they match and you have certain actions and stuff. So this is the details view now. Why is this important? It's it's important, because whenever we are in the context of viva connections in in my in my head, when I was playing around with this, uh this won't be your one place to interact with all the applications.

F

This will be where you surface a subset of your applications, so things like you can see uh here now we are only showing like the top three of ideas say you have got an incident response system or any any of this, so that whole system will not is not expected to be shown up here here. It's almost like a preview or or a teaser of your application. So in this case it's just the top three ideas which you can see, and this will be configurable by audiences. So it's not that this is the all.

F

The users in your organization will see the same data uh different users based on seo id groups can see different data so when it comes to the actual adaptive card extension, this is a so. This is a custom extensions which we have built through the preview program and there's some out of the box cards available already so things like tasks in your teams.

F

This is a sharepoint page and links, and and so on. So when we uh so there's three three different levels to to these adaptive card extensions uh or aces as they are called uh the first one is uh the actual card view itself. So when you land in the viva connections, dashboard from the mobile or from from your desktop, doesn't doesn't matter. uh The first view you see is called the adaptive card extension and the card view.

F

What you can have multiple items in the as in you can you can switch the card view to show multiple items when, when you have uh when you, when you click on one of the card views, then you get you get to see a bit more details on uh what you can uh what you can show now the card view is not super customizable.

F

The card view uh only has three different options right now, one is image and text. uh One is just text and one is, I think, text and a description. So you don't have super flexibility and super control of how the card view looks. But when you click on it, then this is a proper adaptive card. uh Things like uh all the stuff which is supported, adaptive cards uh is is supported in the quick view.

F

uh This is called uh something as so things like you know, images, uh uh different, metadata, uh carousels and and lists, and so on, is, is supported in the in the quick view as it calls now. The third level is uh actually sending the user to your custom application. Now. How would that work? You have uh you have a button here when you click on it directly, you can build a deep link into teams. When you click on it, you can see that I'm thrown into the the teams tab and immediately the the details.

F

Dialog opens up and that's how that's how I can actually build my experience uh now again like going back to other other types of applications, there's going to be three levels. uh One is the card view. One is the quick view with the with a slightly more details on your adaptive cards or your your items and then the third one being you actually get uh to build a deep link which you can send you to your applications in in in its entirety.

F

Now, how do you actually so that that's that's the demo part? How do you actually build this now? As patrick mentioned? It's uh it's a it's basically, a new spfx, uh artifact or or spfx application type, uh and you must uh you'll be familiar with this. uh If you're, a sharepoint developer, spfx developer you'll be familiar with this uh code structure, uh just in just like in the spfx yeoman generator, you have the different options of web part extension and library.

F

There will be a new uh extension type called adaptive card extension and there's again, as we discussed three levels to this first one is the actual adaptive card extension dot. Ts file, just like your web part, yes, dot, ts file, and this is the main starting point of your application, uh and and even in that, the on init method is the is the is kind of like the core of how the application will be viewed and there's. Two things which we need to look out for. One is that it's actually returns a promise.

F

So that means we can we have to use this uh method to get any data, so in this case uh we're using it to actually get the get the ideas from our database and then the more important thing is all the rest of the views which your adaptive card extension will have will need to be registered in the ease or in the on edit method. Now you can see, as we talked about there's two views registered here. One is the card view and one is the quick view.

F

uh Let's jump to the card view here and the card view is, is basically this view which we see so uh and, as I said again, it's uh it's. It's uh not super flexible, there's, predefined templates to the card view uh which, which we can possibly see here. So this is currently the base image card view which we are inheriting and the data which was sent to this card view gets rendered.

F

You have the next and the previous buttons and so on and on, and you have a method here called on card selection, which then you can use to trigger your quick view and then going back again this. This is your quick view and, as I said, this is like a full-blown adaptive card and how do you? How do you configure that adaptive card is is right in the core itself here uh you can also uh save your adaptive card as a file and then um show it here.

F

It supports your data, pointing and everything and so on and and finally, uh in the quick view, there's going to be a external link method which you can use to create your deep link to a team's application um and then that's how, when you, when you click on on one of the one of the cards, you get you get thrown into a deep link into teams without changing the context.

F

Now this demo would have worked a lot better if the team's app was available, uh and then you could see that within the mobile context itself, uh you you can bring up the adaptive card and within. If you click on it, it opens up your teams app in your phone and navigate, creates a deep link within the teams app itself, but right right now, we'll have to kind of put some of the pressure on our imagination and do the linking ourselves.

F

So that's that's a quick tour of uh how you can build uh how you can bring your custom applications into viva connections, the desktop and the mobile experience.

F

Again, I would say that register for the preview uh you'll get uh you'll, get it enabled on your tenant events, and you can you can uh start start working on start developing applications on this. So yeah. That's! uh That's it from my side, patrick over to you.

A

Awesome stuff, thank you very much. Vardaman. I'm really excited to see this demo and I think, as others get involved, we'll have a few more demos and uh the aces stuff. The card stuff is new, so it's, I think, there's a lot of room to explore that and see really what's capable there, and especially with the adaptive card approach to stuff, um I'm really excited. I think it's been a lot of fun.

A

I've been playing with it recently a lot of great new possibilities there and leveraging a lot of your existing spfx skills as well so uh really worthwhile to check out that preview. If you can uh new, you are up next. If you want to go ahead and take care of the presentation.

G

A

G

This demo is about uh copying, pnp search results, uh web parts settings just a quick introduction about myself. uh My name is anub tati. I am a sharepoint developer at content and cloud based in london, so I I write some blogs on uh spfx related uh things or under under the platform called medium uh and then that's the link to my blog on medium.com, I'm on twitter, as well under the username on hotels and my github username is uh you can follow me on on those platforms if needed?

G

So what we'll do is uh we'll we'll do a demo first and then uh have a look at the code of of this particular extension.

G

uh So for this demo, what I'll do is I'll quickly establish a scenario and then tell you what it's all about so so what I have got here is a page in my dev tenant, and this page, if I just quickly edit it you can see, it has got. A pnp search is also a part, and uh uh you know a page properties web part.

G

So uh you know all this does. Is it is rolling up some of the pages uh based off a certain content type uh and then displaying it over here uh now? uh What I've also done? Is I've created a few other pages as well based off this template? You know with a similar format. One is called all about parker again, a pnp search, part and then page properties, and then this there's one called all about giraffe or graph, which has again a search for part and uh page properties. Now, let's imagine that there are.

G

You know uh quite a few uh pages created like this, uh so maybe uh you know if we had a template somewhere or a template page or someone went ahead and just did a new copy of this page and there are a lot of pages with this setup yeah now what happens is you know? Everything is fine. This this page is rolling up all the other pages and then the new requirement comes in. uh uh uh You know. It might say it.

G

This page, which says all about water roses is, is rolling up a lot of content. uh You know it is uh bringing graph or graph content and also parker content. So.

D

You know we need to change this and.

G

D

G

Need to change the the layout of the the result of the part.

G

So for that what I'll do is I'll go ahead and change this particular page, so you know I'll edit, the webpart and I'll change the query slightly I'll, just paste this query, which which says you know bring me all the pages that have got uh you know the topic as the current page topic, so I'll apply that and you can see it now only has warrior host related pages and then, if I go next and then change the layout, we've got the cards layout. Now now you know this.

G

This has to be done in in the other pages, as well, basically, the parker page and even in the giraffe page, because what is chris kent doing in the giraffe page he's he should be in the warrior. Horse's place right, so so that that's that's the whole point, so you know in order to apply this change on the other pages. uh You know, I've got a few options.

G

The first one basically.

D

Is I can go ahead and edit this page and manually.

G

Change the web part uh you.

D

Know I would have to do.

G

This on, on all the other.

E

G

Are based off this template that would be.

E

G

Long task and the the second option is you know if I edit this page, uh the pnp uh search web parts, team uh they've, given us a nice facility of uh you, know exporting and importing properties. uh So we could use.

D

G

Well, uh we can use some powershell uh pnp powershell script as well in order to update uh uh the web part on all the other pages. Now in this particular demo, we will look at another option wherein we can use spfx extension to do that. So so, basically, our aim is to copy the settings of this webpart or copy the settings for of this webpart on this page onto all the other pages, which is the departure page and the giraffe.

D

G

So what I'll do is I'll just go to my pages library and then let me just hit refresh and uh you know I'll select the pages where the settings need to be copied.

G

So those are the the parker page and the giraffe page, and I also have a random page created over here I'll select that as well and then you know this new option comes off, which is copy uh search for part settings, and then I press that and then it puts it. It opens up a dialog and it asks various you know inputs.

G

So, firstly, we have to specify uh our source space I.e, the page where we made the change, and that was nothing but the warrior horses page so just go ahead and copy that and paste it over there and then we have to select which version of the pnp search web part did we make the change in so that's the service research v4 and then we get to see select whether it's whether the web part is in you know vertical section or any other section.

G

So, in this case it is in the zeroth section, zero column number zero and then order zero uh and then, similarly, in the destination pages, uh we've got the web part in the same page in the same position, so it is uh zeroth, column, zero, uh sorry, zero, section, zero column and the order is zero. This this can be.

G

You know different based on based on the requirement and then so once we are sure that this is what we want to do, I'll go ahead and press submit and what happens is it goes ahead and you know.

D

G

The tasks and then it gives us these results, so, firstly, it will save what all pages have been successfully completed and on the right side it says what all on what on what all pages? Was this not successful? So if we look at the the pnp parker page, uh you know click on it. I can see earlier it was. uh You know, showing all the pages in the list format now it is showing in the card format.

G

Similarly, if I go ahead and click the cheer off page- and you can see only graph related articles- no more chris- can then the giraffe faces so only uh graph pages uh and then uh for the pages that was not success or that were not successful in this case only one page, which is a random page. If I click on that the reason it was not successful was you know uh at that particular location? It had the the text web part and not the pnp, so it's results for a part. So that's why it?

G

uh You know it didn't copy the settings right, so that was the demo. Now, let's uh you know, let's look at the code itself, so uh yeah all this code is present in uh in the github repository, so what we have I've just taken a snippet or a screenshot of the of the code, so we have one main component which have called it as uh worker dialogue. So that's the dialog which we saw pop-up and that dialog you know uh what we do in that is. Firstly, we we get the source page uh using pnpjs.

G

Of course uh uh you know based on the the uh the input that was provided. So in this case we take the link that was provided and then what we do is uh we get the source web part based on the the section column and the order, uh and then once we have the source web part, uh what we do is we go ahead and grab the the properties of that web part.

G

So in this case it's the json webpart data.properties and then we also have to grab the dynamic data values, and I think this this one, this property of the web part, is used only in the pnp search for parts version. Three, uh I haven't seen it being used in uh before, or I might be wrong, but yeah and those are the two two elements we need to get from the source web part.

G

So once we once we've got those there's, uh there's a a use effect uh method, basically which gets triggered because we have changed, we've changed the or rather gotten the source of web part properties.

G

What that does is it calls a method called as update destination web parts and that one in that method, what we do is we go through all the destination pages that have been selected and then we go ahead and load the page and then load the destination web part based on the the destination location, ie, the section column and the order entered.

G

So once we've got those details. uh What we do is we go ahead and set the uh the webpart data.properties and the dynamic data values uh for the destination web parts based on the uh you know, the source web part uh values that we've got and then finally, uh we go ahead and save the page and then uh push that to the uh you know, successful pages array and that's what gets displayed in the in the dialog as well right. So one thing you might notice here is that I'm I'm using the the thumbnail url.

G

I guess this is only in my tenant that I've seen that if, if I say the page for some reason, the thumbnail of the page was getting removed. So that's why, before saving we just get the existing thumbnail and then set the thumbnail again to the uh to the value that that we've copied? That's all right.

G

So that's what the code does uh now. One other thing I wanted to show you was: uh you know the uh this control called as uh animated dialog. So if I just quickly jump into the code, uh so uh this this is basically the uh uh you know the the dialog.

G

So if I just quickly jump into my tenant, so yeah and refresh this page again so what's happening is when I select these pages. uh You know this dialog appears it. It just appears as a normal dialogue. So instead of normal dialogue, we can make use of this pnp spfx control called as animated dialog.

G

So if I just change this from dialog to animated dialog and change the end tag as well and then just save this and then go back here, wait for this to automatically refresh uh so now I don't know if you'll be able to see in the recording, but when I, uh when the dialog appears there's some animation uh that happens and then, when I cancel um you know it has a different animation. uh If needed, we can control the uh the animation. uh So in this this uses the library called as animate css.

G

So we can add in the custom animations like fading down, fade out uh down when if I save that and wait for this to automatically refresh and then select a couple of pages and now you can see the animation slightly different, so it slides down. And then, when I press cancel, um you know it fades out so yeah, that's the animated dialog control.

G

So uh it's just the the same same as the fluent ui dialogue, but with some extra properties, and you can check the check the details about that in the chat right and then to finish off just a few more improvements that we can add to the extension itself. We can expand the same code for other web parts at the moment. It's only bnb so search for part, but it can be easily changed to other web parts based on the requirement and then we can add a few more checks at the moment.

G

It is checking only for the web part version, but if needed, you can check for web part title as well uh based on the scenario- and these are a few links that we'll use that are related to this extension um and yeah. That's it from my side thanks everyone, patrick.

A

Over to you great, thank you, a new fantastic demo, as always really excited to see that the animated dialogue is a nice little extra there as well, very cool stuff. uh Imagining that's uh stuff folks can definitely have a look at and use in their projects, but it is time to move to andre if you're ready to go. Take it away.

H

Thank you very much, then. Let's start with the presentation. So, first of all, for my name is andre lash. I work in switzerland in a company called data links and I'm a very normal person itself. So regarding the solution itself. So the idea here and the context is regarding the old feature that there was existing. That is, the ability to use the follow documents itself, the old way that that was using on the classic way uh you can access. For example, you you target a document and then to to follow them.

H

You need to go to the one drive and to the full area, and then you will be able to see your offer your documents that you you target that you want to follow. For me, this is not enough and I I wanted to have something better and more improved or with the adaptation and introduction with the. On the team's point of view, and for that I introduced, I create these two samples. One is one extension where you'll be able to define.

H

If the document you are able to follow were not able to follow- and you can make a simple track of the documents that you want to make them focus and give some type of key keep a priority that you want to keep an eye on them itself, and for that I create a sample.

H

That is, that is an extension that you can define on each document if you want to follow or and follow, and the second step is the ability to grab these these documents and try to keep some type of productivity from your site that we can, we can use it. This can be in a sharepoint web part or even with the within within integration of microsoft teams, and my sample will be playing with these two type of solutions.

H

So we have the component of of the document management with sharepoint online, and we have also the the component management of the teams workspace that we want. I wanted to have it together, using the out of the box features like the social following service that this is already available, and I shall try to use it in a way that could be more flexible also with the ability to use microsoft, graph, queries that will retrieve and make some additional features itself.

H

This is the list of the amount of features that these two samples are able to do. It's a lot of things so from the extension is the ability to manage or to manage the to to manage the the follow or not follow the of the document can be done singularly or multi multiple document at the same time, and also the the listening of the documents that I use, the microsoft graph toolkit file list to list all the documents itself, just to an important point, the the way that out of the work is stored.

H

The follow documents is a support list. So I what I have done. I transformed the list that can be seen as a as a normal document library and to have it a flat view. The the the follow document web part basically will have a display area where we'll be able to see all the documents that we target to be follow and with a bunch of different components that I'll have a better better description later on and I'll show it on the demo itself.

H

So like critical, the redirection to the document to the site, to the ability to manage some properties, the ability also to man and follow the document itself and also some previewing. I will show that in the in the current demo itself.

H

So what I have done for this, I I access to my teams and I create a tab where I make a tab of the type web and I make a camera to the document library itself and, as you see it here on the top we're going to see a new on the extensions we're going to see a new option here this option. Basically, when we click it will display the current documents that I already clicked to be follow itself. So I want to include for this example, one additional document.

H

I will click on my example and I will have a new option from there. I will be able to say: okay, this is the document. This is the name I want to follow when the moment I follow, I open my list of options and I have it here my new option here I can unfollow them and then the content will be updated and if I go again to the document, the document will be also unfollowed.

H

At any moment, I can select multiple documents and I can follow at the same time and basically I'll have a report of the documents that I want to follow itself, so I have one that was follow and all these ones as a reporting I already follow. That is great. So let's go for the next step of or our solution itself. That is the ability to really start to use the current the the current amount of of the of the follow documents, so I create using the spfx web part and, with extension, to the teams.

H

Basically, I have this custom personalized app where we'll be able to display all the documents that I take it at any moment. I can make a very simple search like, for example, I want to go where I went last time to the bridge. Oh here is the document. I can also cut it.

H

I can also group it by the different sites that I group it, because when I follow the document, it will be all the documents that I target in all the tenants and I can filter if I want to see the land from the site example or the from the site home itself. At any moment, I can always return, and if I have new data I can always refresh, and basically I will make a new query where all the new documents will pop up.

H

So, for example, and as you can see here, will be also a lot of multiple options itself. If I click on the document, basically, you I'll be redirected to the document. If I click on the home I'll be redirected to the website where the document is open so and there we have another five options here.

H

The the first option is, I use adaptative cards where I'll be able to define uh which team and which channel I want to send a document that people can read it and they can make some comments, for example, using the adaptative card that I prepared.

H

I will say I please or let's say please- for follow up with content and using the added tip card.

H

I will I also going to pre-fill the fields and I'm going to send it and then I'm going to and the the message was send it and what is going to happen is the moment I go to the posts.

H

I have here a new, a new method that I send it. So basically I use the edittip uh the tip card, with a link to the document, with some comments and also later on, I want to include the ability to make some specific calls to specific users so directly from the the ability of the follow card. I'm already start to keep some light, live and also able to redirect to some key users. They should take some type of actions.

H

The second option is nothing more than open the folder, where the document is started itself, the middle one. That with the star, is the same approach that we have it for following and following, and basically I have a form that I will say and follow, and the moment I will follow.

H

The document will be taken out from the from the this specific app itself for that right now I will keep it and then the I will have the information, and this will give me the the pop of the model dialog, where I have all the metadata regarding this document, and I will come here- and I say this is an example and automatically will be up updated if I have the right permission associated with it, so I will close it.

H

I will open and every time I and when I opened, I will be able to see what was done. What is the metadata, and I have all the information associated and also at any moment, I want to have the ability to have a preview of the document itself, so I use the graph api's course to have a preview of the document for this case. It's a document, the document that I use it, for example from my last hiking, that I did it. Okay, I went to the swiss alps and I went around and I went.

H

I was able to see great. This is a really nice option that I have so with the ability to make the filtering by the grouping with the search and also with the all these different capabilities. So I don't. I did what I had to do. I have already all my different change and I don't want to fold the document, so I go again to my example.

H

I unfollow them and the document will disappear itself, so I always focus on the document that I have at on that moment that I needed from that specific moment and every time I don't need it, I should unfollow. The document will continue on their own on the right position, so this was the demo a very simple demo about the these two samples itself and and how the code it is stand. So the first thing that was done is the definition of the different graph permissions that was given itself. So this is all about.

H

Reading the the sites and read the the documents were allocated and also, I also have to include some additional graph permissions like reading the reading, the the themes where I am associated and also the channels where I am associated and one last one is the ability to send, like I showed before, with the executive card as a template to send that card to the to the to the channel. Where I send. Please do some actions with this specific document itself saying this.

H

What I also use was the ability to use the graph apis and also the out of the box social following rest. Apis, and basically this is a bunch of three to four uh rest calls. I only use it the first three ones. uh That is basically gives me the abilities. The document is already following: if I want to, if I every time I want to follow a document, and I want to stop the following of the document itself and they are these, the three main service that I make in the call itself.

H

How so? How are you retrieving the the following documents like I said it before? Every user has on their own one drive one list that is called social, and this is how the out of the box following sites is managing the the content of their follow document itself.

H

What I do is using the graph apis, I call the site and the ids and I will store it for efficient process, because one thing I do is I call the documents and every time I need to make the queries like the search and the grouping like I did it before. I. Basically, I use dri and I use some methods on javascript to be super efficient and avoid calls to the graphic drive api itself. So I get the site, I get the the list and the list id and based on that, I use this query.

H

That will retrieve me the information associated with the documents that I'm following and the the key here is the item id have to be greater than minus one, and this is how we can make the filter, because this social list also stores the sites that you know that you follow and the page that you follow and this for the document you have. I use this type of query only to retrieve the ones that are associated with the documents itself and, as you can see, this will be.

H

This is the type of query that I use it for displaying the document that I follow on the on the on the follower, extensions and also on the web part itself.

H

Now, when I call the like, I said it like when I call the the last list where I get all the follow documents, I have the main key information like I said it. This is a list and the list basically will store what is the the icon of the document? What is the item unique id the list id the site id the name of the file and the url of the file, and all these things that I will use it for later on, for the multiple multiple sub features that I included on this sample.

H

One of them was the ability to call the the files so for each one of them, because I don't have physically the file. What I do is to have. I use the the search capability itself of of the graph, and I make some queries like the. Where is the file it is stored and what? What is the file name, and this will retrieve into the the document, plus all the other meta properties associated with that the same? I do, for example, for efficiency.

H

I try to concatenate multiple web web web ids to understand what, from from the document, what is the site name, and I use the search capability from graph using some concatenations that in one shot, I will be able to get all the citations from the follow documents that I have it and using the arise.

H

I will I just adapt the object with the ability of the web name and the web url that the document will have some additional information that are used for the display of the document and also the properties itself, and last one is the ability to get from the list id some, uh some simple graph that I get the id that I'll use it to grab to access to the content of of the follow documents itself.

H

Very simple, very straightforward: it's all about the efficiency on the queries and only retrieve the information that you really need to display on each one of the different features itself. Okay, on the functionality point of view so, like I said, like, I showed it on the extension. What I do is the ability to choose on the file and the moment I choose the file.

H

I use the the rest calls for example, if the document I'm using- and I make the call to this rest call if I, if I use the rest, it follower he's going to tell me if the document is already fully or not. If it is not falling, I hate he'll, he'll, say false and then means I can activate it, and this will activate the star or deactivate the star and, and everything then will be reflected using the microsoft graph toolkit.

H

I I picked the the document, I transformed it to be visible, and then I display it using the template. I basically I create using the microsoft graph toolkit. I created a template, how I want to display the information place. Some custom functionality like stopping the so like stopping following the document that I want to to have below.

H

I always have a link of where at the store, and where is the information that I use it for each one of the features, it's very hard for me to display everything in the quote point of view, so I try to be. I try to support with all these different links itself, so uh so on the on the web part itself. Basically, I separated in two different areas. One area is to have a grouping of the sites. Where are the documents located?

H

That would be the point number one point number two is the ability to make the search and the third to be based on the file name and also the first one. Basically, what we're going to make is going to make a refresh or a clean refresh of the following document. If, during the last time I make a search, if there was some change or some document that was updated as soon I make a refresh he'll get he'll grab the the latest documents that I want to follow.

H

So the again on the document point of view, if I click on the icon, I will be redirected to the document if I click on the home I'll be redirected to the site. If I click on the on the teams, basically, I will send a message directly to the channel that I can follow up as a as a working area. If I want to know in which library it was located, I create a folder icon where you can click and open the library where it's located and then the star when I manage.

H

If the document I want to follow, or and just and follow, plus the the fix option, that is the ability to see the metadata and update them. If I have the permissions associated and also the preview capability of the document that is given by the graph with the preview capability from graph itself, so a very simple visual options of the feature that is available. So I use the adapted card template to create this area, and then I just create the support to send for which teams and which channel I want to send the documentation.

H

If I, the second option, is to and just and follow the the unfollow, the social service itself, the the meta information and also the preview using the graph query like this display it and as a technology point of view. This is the full overview that I wanted to to provide. So how to use the sp effect list view command sets. Why? Where can we create some different options? How we can use the graph to retrieve some out of the box social social health service itself, how to use them? How to integrate it?

H

How could to give a new life to the following document itself and to propagate it to be more easily uh integrated, with a new way of working with teams and the workspace itself, and uh so for the web part the ability to have again, like I said, in teams, integration and again the same type of queries, get the social list get the preview of the document send get my teams and the channel send a message and retrieve the document when the webware is allocated plus also the rest service and the following arrest service associated with it and yeah, and this is pretty much the reason I wanted to to make regarding this presentation.

A

uh Fantastic stuff, thank you, andre! Thank you as well. Anoop and vardaman very much appreciate those fantastic demos from everybody. I think there are a few uh comments there in the chat. If you have a second, but I want to thank everybody for joining our call. Today, our recording will be available in about 24 hours on the youtube channel. You can always follow us on twitter. At microsoft, 365 dev we're at m365 pnp. Our next spfx call will be july 15th.

A

That is in two weeks the same time and the next general dev call will be next thursday july 8th at the same time, so hope to see you all there and remember. A bunch of other community calls going on a lot of these aren't happening over the summer, we'll be back in august with a refreshed schedule, as we mentioned at the top. Thank you. Everybody have a great rest of your day and a great weekend and look forward to talking soon.

A