Microsoft 365 Community Viva Connections & SharePoint Framework, 10 Feb 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Viva Connections & SharePoint Framework Community call – 10th of February, 2022

Description

Viva Connections & SharePoint community call on February 10. Demos - Document Links Accordion SPFx Web Part, New Development Containers for SPFx Samples, and Viva Connections – Consuming SharePoint Online Data in SPFx Adaptive Card Extensions. Project releases for SharePoint Framework v1.14 RC, PnPjs – v2.12 and v3.0 releasing February 14th, CLI for Microsoft 365 v5.0 Preview, and PnP Modern Search – v4.5.4. As well, 5 web part samples and 1 ACE sample were delivered. Announced the updated Microsoft 365 ISV Benefit program. The host of this call is Patrick Rodgers (Microsoft) | @mediocrebowler. Q&A takes place as always 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 bi-weekly sync: it is february 10 2022.. I am patrick rogers hosting your call back this week. We've got a great agenda, as always latest updates on sharepoint framework. Oh those are new. I guess we're doing that now. uh Patterns and practices updates across the program new community samples we'll do our optional picture time with together mode. Then we got three great demos, as always from david and zhao uh doing, document links accordion, spfx webpart.

A

We got hugo with the new development containers for spfx samples and we've got paulo doing viva connections consuming sharepoint online data in spfx adaptive card extensions, so three great demos. So let's go ahead and get through the updates, so we can get to the demos. Often we get asked. How do I participate more in the patterns and practices program?

A

Or this call specifically or any of our other calls- and the first thing we say is: definitely we encourage you to reach out and schedule a demo you're doing great work for your companies or your customers and we'd love to see you share that with the community, so just reach out to uh that form. There aka ms m365 pnp, slash, request, slash demo and we'll get you signed up just a heads up. We are booked uh pretty far into the future at this point, but that does uh should not discourage you.

A

Please sign up we'll get you booked. It just might be a little bit. uh You know a little bit till we get to your demo, but we would love to have it so please reach out on those demos. I will continue to say they are the best part of this call contribute to github. All of our repositories uh accept your contributions. That, of course, is reporting issues, pull requests and helping folks with issues and questions they might have and then as well. We always welcome your feedback on how we're doing with these calls.

A

How we're doing with uh you know the rest of the program all up, and so positive feedback is always okay too, as you can, let us know, uh and we might be able to do a little bit more of things you like this is a whole ton of links. I encourage you to check out ak dot. Ms slash m365 pnp, that's the main.

A

These slides have really got a lot of stuff on them. Now, uh that's the one link you need to get all of the patterns and practices stuff. So our developer, videos covering developer related topics are community videos which is going to be the recordings of all of our community calls open source repositories, so sharepoint pnp office, dev and microsoft. Graph. All welcome your contributions there as well.

A

We've got tons of sample galleries, all of which accessible from ak dot, ms slash m365, pnp, and then we've got uh our call next tuesday, so that's gonna be the 15th of february. That's our microsoft 365 platform calls.

A

This is a call delivered by microsoft, engineering, folks or program manager, folks uh about different microsoft, 365 topics and we'll have tom, hershey and sebastian using uh so introducing information, protection policy, apis latest on cloud, hybrid search and graph connectors and then using the mgt microsoft graph toolkit get component in your solutions and then possibly some time for some q a there at the end so certainly encourage you all to join that call if you're able or catch up on the recording at aka dot. Ms slash m365 pnp ak dot.

A

Ms m365 dash dev dash call for the recurrent invite to that tuesday call next up. We've got sharing.

B

Is caring with david? Thank you, patrick yeah, friends, as you know, sharing is caring or may not know. Sharing is caring is a program that is here to provide you hands-on guidance from a variety of topics, whether you want to get involved using the resources that you're going to learn all about today or you want to contribute back. We have you taken care of.

B

We know that there are hurdles that may be in place to doing both of those things, but these sessions are hands-on, safe space opportunities for you to get involved where we will walk you through together in a session not recorded. So it's absolutely great opportunity to ask all kinds of questions: collaborate with members of the patterns and practices team, as well as other members in the community.

B

So next week we've got the power platform, samples first time contributor and more than code with vs code, and we also have two ask me: anything's coming up around pnp react controls, graph and mgt, and I believe we're going to be scheduling a session on pmpjs when 3.0 released. So it's a lot of exciting stuff. Coming up, don't hesitate to register ak dot. Ms forward slash sharing dash is caring. Now, once you do contribute to the community, we want to recognize and celebrate all the amazing things you're doing so.

B

Our pnp recognition program is in place now powered by credly. Yes, that same credly that manages and powers all of the certification badges that you get from microsoft. These community badges are official and will sit right next to those attach them to your linkedin. Share them on twitter.

B

Put them on your website, share them with the world, uh so we do need you to opt in ak dot, ams support, slash, m365p, dash, recognition, absolutely free and we're working on sending out a whole bunch of them for what has gone uh been contributed in the last month, so be on the lookout for that over the next few days, and thank you all for being amazing, patrick back to you.

A

Thanks david, I definitely encourage folks check out those sharing his caring sessions if you're looking for a way to get started or have questions. Those are just fantastic. We've had wonderful feedback from those so encourage you uh as much as I can to check those out. If you are interested and now we'll go over to visa for sharepoint framework updates.

C

Thank you, patrick, so, uh first of all just a reminder: if you are an isv or a partner, who's building for viva, viva or microsoft teams, please please please join us on our microsoft resistor of isv benefit program from here. You can then get benefits like technical support and even money related on your solution, and this applies also, of course, for the solution for microsoft, v1, which have been built using a sharepoint framework.

C

Some uh really really new uh latest news, so sharepoint framework 1.4 release candidate is now available, so that was released like 60 minutes ago in the mbm, um and you can install that by running npm installed. That's to add microsoft, slash generator sharepoint at the next and that will always install the latest uh beta version or preview version. Now we're looking into going ga with this one within a week or so so quite fast. uh Unless there's any last minute message surprises. Release candidate basically means that hey we're ready to go just final verification.

C

This one is just a a kind of a reminder or, let's say, sharing some data related on the usage, which is just absolutely insane every single week. We are having new records uh recorded on the spfx usage in microsoft, 365 worldwide for the custom components being built by customers and partners, and this week's record is of the all-time record, actually is monday, 7th of february, so we're crossing unless millions of millions of users doing and using the components with spfx on a daily basis, quick update on the roadmap sites.

C

uh Like I said, uh the 1.14 is intended to go ga in upcoming week. uh So you can expect that next week, unless there's any last minute surprises or technical challenges, which we will run into in engineering other than that, uh not that much new updates and here new app catalog experience is coming we're defining the support and implementation for spfx and lists and libraries.

C

So this is intended to go as part of the 1.15, of course, because 1.14 is coming next week um and 1.15 beta is then coming out relatively soon, but a lot of lot of innovation. The team is actually getting significantly additional resources and people and funding, which is great because well, it's being highly successful, but that's a quick update from engineering sites. So, let's move on the presentation.

A

Thank you vaso for those updates, we'll now move to julie with the pmpjs client side, library updates.

D

I am so happy to do this today because this is a good good day. So first, I would like to announce that we are going to be doing the final version. 2 release 2.12 on friday, which is february 11th, and so we will do that release.

D

I say final: if there are any major issues or bugs in the next three months, we will do another, but this should be our final version, two release and then coming to you on the day of love february 14th, we will be releasing version three and we are super excited just like animal. That's exactly what patrick looked like when we decided to release. So please check that version. Three out we're gonna have all that documentation. All of that stuff released on monday.

D

Sometime probably in the afternoon, you will watch us on the m365, pmpjs twitter account or the pmp page in linkedin. We will announce it there when it has been completed and certainly if you have feedback or issues on anything that happens with that, please go to our pnp github repo, to submit your issues and check out the new, updated documentation for a transition guide from version two to version three there with our documentation link. So that is the big news from pmp client-side library.

A

Back to you, patrick awesome, thanks julie and we are very excited about version three coming out, so look forward to folks getting their hands on that. Next. Up is cli for microsoft, 365., so updates their new preview version 5 with retrieving planner tasks, retrieving tenant, health information, removing users from sharepoint groups, retrieving information about deleted users and new samples showing how to use the cli in scripts as well as a lot of other new improvements.

A

You can always install the preview v5 with npm installed, sg at p, slash, cli, dash, microsoft, 65 next and you got the docker containers there as well, which is a fantastic way to try things out with all the dependencies and things in a nice contained environment. So, if you haven't tried out the cli, encourage you to check it out, you can check out the release, notes there at that link.

A

Follow them on twitter, ak, dot, msl, cli dash, m365, we'll get you all the documentation and information on how to get started with the cli for microsoft. 365..

A

Next up the reusable components: we've got uh version 350 is out right now. That's support for spfx113 and up uh support so enhancements for multiple controls, updated localizations for german norwegian and portuguese, as well as some various fixes. You can check out the release, notes for all the details and then as well the property controls these are the ones designed to be used in the edit pane of your web parts or at version 330.

A

That's again, spfx 113 support multiple enhancements for the property field, collection data, various other fixes. You can see the release notes at that link for all of the details as well, thanks as always to all the contributors that make these controls possible. They're a fantastic resource for the community, encourage all of you to check those out uh to help build your projects and get a jump start on things. Follow them on twitter check out those links there, uh the github dot, io, slash, sp, dash, fxs property controls and sp dash.

A

Fxs controls dash react to get all the details on the great reusable spf, x, controls and next up is modern search, so ak dot, msl pnp search, will get you all the search details about the modern search experience you can build out with flexible uh web parts, so version four. Five four is the february 2022 release. You can see all the details at the link there, thanks to all the contributors that make this possible.

A

This is a fantastic set of controls to help build modern search portals right there in sharepoint and they're super configurable, and you can change how the results look as well as aggregate sources and all kinds of great features so definitely check those out and version 323.0. That's the december 2021 release. So if you're still on the three version, three branch, I definitely encourage you to upgrade to the version 4 stuff.

A

uh When you get a chance, I know that's not a thing that can be done just immediately for everybody, but certainly put that on your roadmap and get updated as the version 3 stuff is, is still in a maintenance mode for a while. I don't think that's going to be getting a lot of new features, so thanks to everybody, making the pnp modern search possible, encourage you to check that out as well and then finally spfx samples with hugo.

E

Awesome, thank you. So we have some repositories where we actually have lots of amazing samples both on the spsx extension side and spfx webparts. These are the updates for the last two weeks on the spfx extension sides. We don't have any new samples or updates, but on the webpart side we have some cool updates, uh the first one by kunsan ghani, which is an update to my enhanced powerapps web part, where kunst has updated it to spfx113.

E

We have a new data tables using mui tables uh by jeff and jacob a new contributor. We also have auto batching graph calls by marcin bonjour. I had practiced this name but marcin.

E

Thank you where uh we demonstrate how to actually batch graph calls automatically, which is an awesome demo. We also have takashi shinohara, who created a new flow button web part, and we have the property pane wrap, which is a really cool concept that christoph has been working on for a while. Now uh he's had this vision and he's actually made it happen, so it's a really cool way.

E

If you're looking at a creative way to make it easy to embed html controls into a property pane without having to wrap your own controls, he's actually done a really cool sample for that. We welcome contributions by everyone uh and thank you to everyone who has contributed, even though I may have messed up your name. Thank you back to you, david.

B

I guess all right yes over to me. Thank you. uh The aces repository is live and in living color and available for uh your contributions as well. We have a new one from arjeet mandal on monitoring security wrist. Now this is really cool because it utilizes the identity, protection graph. Api so definitely go check that out it's going to be processed in the next couple of days and again we are open for more contributions and we promise that this month we will be coming out with a viva connection, aces getting started, sharing his caring session.

B

That is still on track, so be on the lookout for that patrick back to you.

A

Thanks david and we'll go just right now to the optional picture time, if you'd, like turn on your uh cameras and visa, will take over.

C

Yep I will take over this and let me move everybody again on this screen and let's wait a few more minutes until we fill in the 50 seats, 51st will be in the screen again. Unfortunately, the scene selection doesn't still work. For me I might be running a2 new dog fooding version of teams. So that's fine, a few more few more. If you still have a few seats there we go there. We go one more row uh popping in. uh Do we get the 50?

C

Oh there's one more people, okay, I will start recording in one two three. I can see safety on the front, your you'll be the example. Everybody can uh follow steps example and, let's do some hand firing everybody. Thank you for joining and there's the sit downs on the front row. Great great, we'll follow your example.

C

Thank you save on that one awesome thanks everybody for joining. Once again, I will do a key for animation on that one and then, let's jump on the demos of the day, almost on time, which is great.

A

So first up will be david and xiao uh with document links according spfxwebpart.

B

Yup, absolutely thank you, patrick. Let me just share out here and all right. Well, my name is david warner, but I am uh presenting today on behalf of joao mendez. He has created an excellent sample that is going to provide a number of benefits, opportunities uh and in ways in which we can see how we can utilize a number of resources that are available to us today, and then we want to highlight and really celebrate everyone. That's doing the great work, and so zhao has allowed me to kind of do that for him today.

B

Now the document links accordion. Let's take a quick look at what that looks like uh it's. It's going to take information from a library, obviously we're looking at documents and it's going to allow us to group them together by way of either metadata around the list or the library and display it in an interactive way. Now you may say this looks a lot like list formatting and that's true.

B

It does he's actually gone to some great lengths to to make it look a little more natural, but there's benefits in this in using the spfx webparts and the resources that he has decided to use, and so we're going to take a look at that. We can see that we're able to utilize that information, so everything gets condensed down nicely.

B

We see that we're able to utilize the iconography to identify. We see the view all there as well, and so, let's take a look at what he decided to utilize from a resources perspective.

B

The first thing is the pnp react controls we saw those mentioned on the call earlier they are controls that are already pre-built for you, whether it be the the presentation layer, as we will see today with the accordion control or perhaps the property control which he is also using, but we won't highlight as much today pre-built components that are available for you to take advantage of to not reinvent the wheel and we'll talk more about that as well he's also using pnpjs.

B

Now I know this is near and dear to most of our hearts and I say most because there are new ones in the community all the time, and once you learn about it, you will absolutely love it. It provides a fluent api to connecting to sharepoint. It allows you to do batching and caching.

B

It is absolutely bar none the best way to interact with data and again so much effort has been put into these resources for you to take advantage of to accelerate your ability to develop amazing and great things, and and that's really what zhao has showcased today. The simplicity is, is the magic here around this particular uh sample.

B

So let's take a look at the demo of of how it is used, so we're going to edit our web part we're going to actually edit our page and we're going to throw the web part look for the accordion and throw it onto our page, and this is also by the way the configure document links according web part. That is also a react control that we'll see that you can take advantage of that kind of lets. Everyone know when the page loads- hey something has to happen.

B

You need to go edit, the web part to configure it so they're, not just left unknown, not sure what to do next right. It provides guidance so we're going to edit that web part we've got the title. There then we're able to select the document library that we're going to take advantage of so I've got media some books and some movies uh stored into a document library, and then we've got all the fields that we can group by.

B

uh So maybe the most popular to start with is is type so we're gonna, select, type, we're gonna, apply that and we're going to see that it now tells us the file type. So we see that there's mp4s videos, we see that there's pdfs. We see that it's ordered by alphanumeric, and then we see the identification clearly of the iconography. That shows that it's it's you know closed, not open. There might be a better opportunity because we have extra metadata that we could always use. So I've created a media type.

B

That's a little bit more human readable right, not everyone's going to know what an mp4 is or a pdf. So I'm going to apply that and now you see it's a little more uh self-explanatory book video right so now I can understand the groupings a little bit better. So if I expand that we see that simple experience and if we look at the information, we see that it's still orders by alphanumeric. We've got some amazing stuff here to read: cooking with code recipes by chef, hugo tales of herreric hairs, memoirs, patrick rogers.

B

We see our videos, power, rapping, the sweet beast with april dunham and of course the equestrian expose the unauthorized story of warrior horses. So you can see it's simple, but it's very powerful in being able to display information rapidly. Also again that view all which kind of gives that sense of hey, this is gonna match the other components that are available to you and that you have access to.

B

We throw it into an emulation of a mobile experience and we see it works just the same as we would expect all of our out of the box components to do this. Matches that experience as well, and we see back to normal. It looks great and everything is good. Now, again, the simplicity is the magic here really.

B

So, let's take a look at the code and we'll see that there's there's really some basic information here, but what we're going to highlight we're not going to go too deep into the code, but what we're going to highlight is is where he utilized the resources that really make it easy. So we see here he's importing the accessible accordion from the react.

B

Controls he's importing the placeholder and what this allowed zhao to do is to quickly and rapidly deploy a functionality without having to reinvent the wheel without having to spend a bunch of time and we'll talk a little bit more about that in a moment uh recreating what others have already done, and so you may say how many lines of code does it take to create something like this when you're able to leverage all of the great work from the community?

B

Well, good thing you asked 357 lines of code is what was written here and that's with everything broken out right. If you were to to sort of minify this a little bit, you might have less so it really uh exemplifies how you can take advantage of the resources that are available to accelerate. So what are some of the benefits that we gain by utilizing and looking at samples like this?

B

Well, the first is reuse right. We talked about time being money, don't reinvent the wheel. These resources have been curated and updated and upgraded, and all that good stuff to make them constantly available for the newest version of sharepoint and the m365 tenancy so use it. Don't spend your time reinventing that wheel, reinventing that cog when you've got so much available to you and they're extensible. It's not like you get what you get and you don't throw a fit. All these things are open source, so you're able to extend them.

B

If you want and guess what once you've extended them, you can contribute back. So it's a great great benefit. Samples like this are also fantastic to learn right. So what zhao has provided is he's taken, a number of open source resources and tools. Pnpjs react, controls, property controls and he showed how to use them together, and then he didn't just say: oh I've learned that cool he's actually shared it with everyone else, and so this is a great opportunity to use that and learn from it.

B

The next benefit is, you could use this as an accelerator right. So while it may look like well, there's not a whole lot going on here, but but again that's the magic is it gives you a baseline here to create more and add more to it. Perhaps you wanted to add the ability to maybe hover over that and have an adaptive card when you hover over the document, and it shows a little preview of it.

B

So uh part of the work has already been done for you, so these are fantastic opportunities or excuse me benefits for you to utilize a lot of these samples that are that are done this one specifically by xiao.

B

What are the opportunities for us then, when we think about creating, maybe our own samples uh matching what zhao has done well, uh the first opportunity is obviously you're able to share and we want you to share. You have created great things and you may even have created something and said it I liked it. I learned from it, but it's so simple, I'm afraid that it might be too simple to share in the community.

B

Please please, please don't ever think that what zhao has created here is a fantastic tool from many perspectives, and we know you have them too. So, please don't hesitate to share. Please don't ever think that what you've created is not shareable absolutely is, and we encourage you, but, as mentioned earlier, we understand that there may be some nervousness around that. Maybe you've not done that. Yet maybe you've not submitted a sample. Maybe you've not worked with github.

B

Well again, sharing is caring is that program we mentioned earlier that provides hands-on sessions and contribution guidance, and we absolutely are going to help. You contribute the amazing things that you've created and then guess what once you've created them you're going to want to share them with the world in sessions like this and presentations like this, but you might be a little nervous about that.

B

So we have the buddy system in place and you've seen the buddy system in the past, where we will team up with you and provide assistance in that presentation even present with you or for you. If you want, because we know that what you're creating is fantastic, just like what zhao has created is fantastic, so again, please don't hesitate, reach out get involved. uh All these urls are open and available for you. These programs are here for you. We want to encourage you to do more uh and help you do more.

B

Not just tell you, okay, here's how you go. Do it. Let us know when you've done it. No, we want to be there right with you every step of the way so take advantage reach out to myself hugo april. Any member of the pnp team in the sharing is caring team and we would love to help you on behalf of myself and zhao. Thank you all again.

B

uh You can get the code here at the github link or you can just simply go to aka.ms4 m or excuse spfx-webparts, and you can learn more about those components. You can also go to react components in pmpjs to learn more about those tools and resources as well. So thank you all again, patrick back to you.

A

Awesome stuff, as always thank you, david and now we'll go over to hugo for new development containers for spf x, samples.

E

Thank you. Let me set up my screen share and, as I'm doing that you know I wanted to say, my favorite quote uh is from blaise pascal and it's obviously a quote in french, but it basically says I apologize for sending you such a long letter. I didn't have time to write you a short one, and so you know, while joao's code is actually short, there's a lot of elegance uh to it to keep it that clean and succinct all right. So today we're going to be talking about new development containers for spfx samples.

E

This is a crazy concept. I'm going to be going fast. I apologize because there's probably like an hour and a half's worth of material in here, but let's see what we can do all right. So if you look at your spfx uh or sharepoint framework development, environment right, this is an article that tells you what you need to do and one of the first things that we tell you to do is you should install node right and we tell you you should install node 114.

E

now, here's the problem is every version of the sharepoint framework, and this is an article that's available on the docs.microsoft.com.

E

But every version of the sharepoint framework potentially is only compatible with uh certain versions of node.js right because obviously node.js is evolving and so is the sharepoint framework. So, as you can see here that the- and this is soon to be uh obsolete, I guess as per veso's announcement, but uh the latest version is 113.1 right and it's compatible with node, 12 and 14..

E

But if we look at maybe one twelve one, it was compatible with 10, 12 and 14., and if we go all the way down to, let's say version 141, because maybe you're running on an earlier version of sharepoint, it's only compatible with node 6 and node 8..

E

Now here's the problem is that we can only install one version of node at the same time on your workstation. Yes, there's techniques that you know you can use node version manager or nvm and if you're interested in that, we have a sharing and scanning session, where we show you exactly how to do that. David does a great demonstration of how to set it up.

E

But let's go take a look at some of the issues that we're seeing with the spfx samples and extensions, and things like that, probably for every 10 issues that we see, nine of them with a plus or minus one error margin is actually related to a node compatibility. So someone is downloading an old version of a sharepoint sample and these samples have been around for probably like five years now, so someone's downloading an old sample that was designed for sharepoint one for spf, x141 and they're, trying to run it in like node.

E

You know 72 or something like a super new version of node, which doesn't even exist right now and they're reporting issues with the with and, of course, there's nothing really. That tells you uh in a friendly way that this is the wrong version of note.

E

So how do we deal with that right if we have all these issues that are being related to node compatibility? So let's go take a look at what these samples do for us right. So if we go to an example web part here, which is the enhanced powerapp webpart, we see if on every readme document, for every sample has a compatibility section and they all have the version of sharepoint framework that it uses the version of node that it is compatible with. In this case it looks like it's all.

E

It only works with that version of node for whatever reason, but new and improved. We now have the ability to actually create remote containers and a lot of the samples have remote containers. Now you might say, what's a remote container. Well, imagine if I was able to say I'm going to create a virtual machine.

E

That is a separate machine somewhere. uh You know that you don't even know where it runs like in theory. It runs on your machine, but it could be in the cloud and it's going to have all the dependencies, all the environment, settings and everything you need to do to actually run this particular sample, but think also about the other scenarios.

E

How many times, I'm sure that's never happened to you, but how many times have you been on a project where you know the new developer joins and it takes them two weeks to even get set up with having the ability to build the project, because uh there's so many crazy dependencies, and so many undocumented things that happens now.

E

Imagine if you're able to package that that entire project, an entire solution into a container that actually is stored with this in source control with um or the definition at least, is stored in source control with the solution and the act of opening that solution in a container opens all the dependencies. You need to actually run that solution.

E

Now, that's pretty awesome and that's not just limited to samples. So, let's, let's actually show you how this works. So what I'm going to do is I'm going to open that exact same sample in visual studio code. Now one thing that you'll notice in the corner when I open the sample, I actually get a prompt. Now I choose to have that prompt show up for me. You don't have to be prompted every time, but it says hey. This folder contains a dev container configuration.

E

You can actually reopen this solution in that bubble in that world. That has all the dependencies and if you click on that, let's see if we can make that happen.

E

If you found reopening container what we should see, let's see if it happened.

E

Now the other option is, if you choose not to get prompted, you can actually just click on the menu or click on that little fancy, little thing in the corner and say reopen in container either way. What will happen is we'll actually take that same solution and we'll launch it. It will launch visually code again, but now it's actually running in a server or in a container that is dedicated for this solution, and I you know for just to be transparent here. I didn't cut any of these videos.

E

I did speed up some of them in some cases because, like doing an npm install and watching me do, an npm install can be boring, but what you're seeing here is actually it has reopened the solution, but now it's actually coming from a different world, you might even see like the prompt, is actually no longer. I run on windows machine.

E

This is not your uh usual windows prompt right because it's running in a linux container and you can actually see that if you look in the corner here right here, it says you're editing it on a dev container, we've labeled it as an spfx113 container, and so this is actually really cool. Now, just for fun. Let's take a look at what happens when I go to my terminal within the container, and I just type, if I can actually type gulp build now, I just opened the solution I didn't do. Npm install.

E

I didn't do anything like that. I just ran gulp build and it already builds automatically and that's cool and we'll talk about. You know how how this works. There's like a lot of voodoo behind this, but it allows you to actually be able to build a solution pretty much instantly from opening it, regardless of the version now think about. You know for those of you who are actually running, uh maybe they're still on sharepoint, 2016, 2019 or maybe their organization has decided to. You know the youtube policies.

E

As per ac's comments, you know due to policies, they've decided. No we're not going to go past this version of of spf x for whatever reason or this version of node, for whatever reason now you're about to actually uh satisfy these kind of requirements. By doing this, now, let's look at the version of node that's running in this environment. So if I type node dash v right, if I could actually type that that is uh node v it'll tell me that it's running version 114 8, uh no 1418, sorry.

E

um Now, if I actually launched this solution outside the container, and so again this is going to be confusing, but I do there's. Basically the solution can run within the container or something that's called remote or it can be launched locally, which is really from within my machine. Only let's take a look at what happens. So if I say you know, let's just close this whole project, let's reopen it.

E

One thing you'll notice is in the recent uh solutions that show up at the top there you'll see that it says I have the enhanced power app webpart as a dev container, and I have the enhanced power app as a well just a regular project. So I'm going to click on that now it's actually reopening the solution on my machine locally right and you'll notice that my my terminal is actually very different.

E

My prompt is very different because it's actually now running powershell in my machine and if I was to type a node here, node v again, that's a big assumption. Assuming that I'm able to actually type node v.

E

I'm my machine is actually running one uh 12.20.2, so that's kind of cool. Now, let's do something a little crazier. Let me actually go to well behind the scenes here. I actually replaced the node version of my on my computer to something really old. Now this video is not cut. I just sped up the boring parts, but let's show you the differences here right so again, I'm gonna type uh node v, my this is my local machine.

E

It's running node 421 so from many many years ago, and if I do a gulp build on my local machine, I obviously don't have the environment requirements to be able to run this project and node will tell me, maybe not so, hopefully uh that it can't do that right now.

E

You need to have a magic decoder ringtone, just to actually understand that this is not the right version, but let me reopen that same solution in the container again, the container has all the definition of what that solution needs to be able to run uh with all the dependencies and environment variables and everything.

E

So this is actually opening now in a virtual machine. It's giving me that new fancy prompt and if I do the same thing, I do a gulp build, or I was going to do. Node version first, just to demonstrate again that this is running in node 14..

E

Now, if I do a gulp build, what we should see is that it's actually going to build without any dependencies right, so this is kind of slow and boring. So let's speed that up a little bit all right. I skipped the whole part here, so you don't have to watch me. Do this now, um let's take a look at a little bit more what's happening here.

E

E

If I close this window again and I open a completely different project- a project- I've never opened well, I mean in reality I've opened it because I had to configure it, but I went and deleted all my settings and everything I reopened a brand new project and this is going to be the experience you're going to get when you're going to download samples from the sample galleries you're actually going to get the same thing.

E

It's going to prompt you again, it's up to you to decide whether you want to be prompted or not, and then what it's going to do. Is it's going to switch into the container? It's actually going to provision a container for this machine, as you can see here and then what it's going to do is we've already pre-configured every sample? Well, okay, the only samples that are published right now are 113, but we I have pulled, requests that I'm going to submit to actually uh you know we're going through 112 and all that stuff.

E

We are testing every sample as we go through this process, but look at what happens as soon as you open the solution. It automatically sets all the dependencies and finds out the right version of node finds out the dependencies. All the tools that you need to do this uh it does. It takes care of that all for you right and then what it does is it generates a certificate for your uh for this machine because keep in mind, even though you're running this, in theory from your local workstation.

E

This is a remote container right, so it needs its own certificate and that's normally what you would do if you did gulp trust dev. I can never remember the command, but you know that one, the trust dev certificate, so it's generating the certificate for us, and it's doing that now.

E

If we can show you the files on that solution, what one thing that you should see eventually, if it's uh and you can see the videos- is sped up by how fast the thing is spinning in the bottom, in the bottom taskbar here, uh but eventually what should happen is these certificates should actually show up automatically added to the solution.

E

um There you go so we have a cr file, for, I guess windows and a pem file for anybody that can't really deal with certificate files. They automatically get generated for you and get added to your project. Now this is a remote container. So that means that those files are not actually physically being created on your machine.

E

You would have to actually download them and install them on your machine, but if I did a gulp serve here and of course this is running in a remote container, so I have to do no browser, because if I did gulp server it would try to launch a browser in that machine and there's no browser installed on that machine, because it's a remote thing, so I can actually go to the certificate. Go download it on my machine um I'll.

E

Just I downloaded a few versions of this, but I'll go download it on my machine and I'll go install it using whatever mechanism for your workstation. You would need to do and then, if we speed that up a little bit here once I've, actually you know done the gulp serve. Eventually I get the fancy reload reload, which is telling me hey now it's time to go refresh my page right.

E

Let's go take a look at what happens now, as it's doing this one thing that the we've configured the machines to do is: they will actually open the ports that they need to be able to work on your machine. So it's just going to rebind that remote containers port to your local container. So in this case in a spf, x, 12 or above you're going to get the manifest and the live reload.

E

If it's an older sample, you have, I believe, three ports that get open, because you have also the local workbench that is opened all right. So, let's move forward.

E

If you try to debug the solution on your local machine- and you get an error message like this, that's probably because you haven't either installed the certificate to trust your machine or, if you look at the traffic on your machine, you'll actually see- and this would be on your local machine you'll- see that there is like a failed error message in your http traffic, because it's trying to get the manifest for your web part.

E

All you really need to do is open that url in a separate tab and that's depends on the browser but open it and then you'll notice. It's probably saying something like this right, hey. I don't trust that that thing, so I'm not going to, let it run it. So obviously you need to make sure your certificate that's been created, for you is trusted so that you can debug this, and if the demo gods are with me, you should be able to actually see your web part delivered all right.

E

So I know I'm going fast, but there's a lot of concepts to explain here. So how does this magic happen? Well, the first thing is behind the scenes: these remote containers are done using docker, so you would have to install docker a desktop on your machine, but again we'll talk, maybe in future sessions about what's the potential for even having some of these containers in the cloud and or shared just keep in mind.

E

Docker has recently changed their licensing or pricing structure, so you have to make sure that you're following the right pricing, uh you know that there is a certain charge if you're an enterprise user. uh But again that's a darker thing that I I will leave it up to you. But the other component to this magic solution is that there is a extension. That's currently in preview for visual studio code, that is called remote containers and that's the thing that added that little bar at the bottom.

E

That allowed me to go back and forth between between containers, local containers and remote containers.

E

Now the other thing that you'll notice is the samples that are dev container enabled will actually have a dev container folder and a devcontainer.json which actually uses the docker images that have been created for you.

E

What you'll see is we have a in docker in the docker organization. We now have an m365 pnp, slash spfx organization, where we've taken the definition of every single version of spfx and we've created. This is something that wall deck has been doing ever since the first version of sharepoint framework he's actually been maintaining uh docker containers for every single version of sharepoint framework, so they're pre-configured with the right version of node and everything and, as you can see, there's quite a few, a few containers here.

E

So what we do is we bind to those to those containers for you, so we don't have to have a copy of a giant virtual machine, and then we have a script that we run at the start of every container to go. Do all the stuff that we just saw installing the dependencies uh setting up the trust certificates, converting the certificates for windows and and non-windows devices, and other things like that, all right now, if you're wondering okay hugo, that was way too quick.

E

How do I do this well, every sample that is, that is container, enabled and soon to be every single sample uh in the minimal path to awesome. There is a section that says: hey if you want to do this sample as a vs code, remote development uh go to this url right and it'll actually walk you through the steps on how to set this up, and I think this is kind of what it looks like now again. All this stuff is in preview right, we're we're trying to innovate quickly.

E

We don't want uh perfection, be the enemy of innovation, but what's next with this well first thing is all web part samples are going to be not converted but enabled soon. The one thing that I want to make clear is: we are actually testing that every web part works in a container so that again, people that are having issues with opening old samples or samples with different versions of node will be able to do this.

E

We're also going to be extending to the other repositories the extensions adaptive cards and teams samples where applicable, because not all team samples are going to be suited.

E

All right, so that's it for me for today I wanted to thank a few people really helped me with this uh don kirkham actually jumped in over a weekend to just you know, I I guess I touched the sensitive nerve and he pretty much dropped. Everything to help me solve this issue, gary trainer, as always as soon as you mentioned, something that that sounds potentially difficult. He just has to do it in like half an hour just to show that you know it's not difficult.

E

uh Waldek who's actually been supporting all these uh docker containers from the inception of spfx and paul schaefflin, who I think couple years ago, brought up the idea and opened an issue in the exte in the uh sample repository to say, hey, it would be cool if we could do this. The technology was not quite there yet when, when we first started talking about it, but now it's available so to find out more information, you can go read more about visual studio code, remote development, because this is not unique to sharepoint framework.

E

This is something you can use in other contexts and if you want to read more about how to run these samples in remote containers, you can go to the link that is provided in every readme or you can go to this url here. That's it for me for today. Thank you for your patience and have a great day.

A

Thank you, hugo for that very great work by everybody to enable those scenarios with the containers. Hopefully, that'll help some folks out trying out the samples so really really cool to see that coming along and next up is going to be paulo with sharepoint online data and viva connections. Take it away paulo.

F

Thank you, patrick. I guess you already see my screen, so I will start my demo.

F

So yes, today we are going to talk about how we can consume sharepoint online data when developing adaptive card extensions and whenever we want to do that, we need to keep into account that, at the very end, adaptive card extensions are just yet another kind or yet another flavor of spfx components.

F

So in spfx and in acs as well, we can easily use the http client, the sp http client and the aad http client in order to consume sharepoint data, depending on what we want to do as well as we can also rely on pmpjs, which, generally speaking, is my favorite choice.

F

Whenever we want to consume sharepoint data and then once we have the data retrieved from sharepoint, we can easily do data binding using the data binding techniques that we have in adaptive card extensions and in the adaptive card syntax, as we already saw a couple of weeks ago in the sig call of the 27th on january. If you want there as well to have a look at how we can do data binding in aces, so let me switch to my demo environment. Let me show you uh what we can do here.

F

We have a list just for the sake of making an example. It is a list in microsoft lists, but it is actually also a sharepoint list, as we know, because behind the scenes of microsoft list, there is still microsoft sharepoint online, and what I want to show you now is how we can consume the list of items that we have in this issue: tracker list from an adaptive card extension, either using native sharepoint support in spfx or using a pmpjs.

F

So the very first example will be this adapter card, in which we can easily see the list of items that we have in this issue tracker list and we simply retrieve the id and the title of every single item for the sake of simplicity. So let me show you how you can do that.

F

Well, in my adaptive card extension built with spfx, I simply configured in this data definition of my component, a property called items of type array of I item where every single I list item is just made of an id and of a title and then in the properties of my component. I have a target list property, which is a string well inside my component inside my adaptive card extension in the on init method, I can easily rely on a load.

F

Spo data function that I defined and just to avoid blocking the ui and the rendering of my component. I will simply slightly delay by half a second, the execution of this method, so that I can keep on loading and rendering the whole component before doing the actual data retrieval from sharepoint online and then in the load spo data method. I simply use the context of spfx because again an adaptive cad extension is nothing more than spfx. Component context is available, like always in spfx and dot sp http client.

F

I can use this object to make an actual get requested to get, for example, the list of items in a target list configured as the target list title in my ace. In fact, if I go to edit this item- and I click on the pencil- we can see that here we have the target list title, which is just issue tracker. That is the name of my target list.

F

So by doing that, we can provide the rest api request to get all of the items of my target list retrieved by title, and then I can simply get the json response and I will have to manually map the result of my uh query into an actual array of items that I want to store inside my items: property in the state of the adaptive card extension component once I've done that, for example, in the card view, I can simply say that in the text in the description, sorry property of my card view, I want to say that there are length of the array items in my state items in the target list, and I can give this kind of user experience.

F

And then I can, in the quick view, provide as the content of the my quickview data, the array of list items which is exported by uh the other uh class so that by the other ts file. Sorry- and I can provide the items that I have in this data object of my component as the data source for my data binding and as such, as we already saw.

F

Also in the previous sequel, we can do the binding and we can go through all of the items in the data source of my adaptive card and we can simply get the id and the title of every single item.

F

So this is a very simple example to explain you what you can do, starting from the basics in order to consume sharepoint online data, but, as we just saw here, we have to do quite some work to uh build the url of the api request to do the actual uh this realization of the json and to map the json response into the actual array of items. So let me stop this solution. Let me switch to another one that I want to share with you.

F

So, first of all, I will do gulp serve no browser here so that I can show you the this adaptive card in action and then I'm going to show you the actual implementation. So again we have an adaptive card extension here in the adapter card extension, almost with the same logic as before. In the state type definition, we have still a a couple of properties of type array where at this time I defined a fully typed issue, type that I'm importing from this ds file.

F

Where I have the title, the priority and the status of every single issue in my issue tracker list, then I have the all issues and the new issues in my state as well as I have the issue list, title property in the properties of my component so like before we start in the unit method. We set up with pmpjs the context, so using the sp object that we have in pmpjs, which is a packages you will have to import in your solution.

F

We simply set up pmpjs to work with the context of sharepoint framework in our component and then again with a set timeout of a half. Second, we will load all of the issues in order to load the issues. We rely on a service that I defined. This service is called issue service, and here you can see we have an instance pre-created inside this ts file and the issue service will simply provide get issues and get issues by status methods. The first one will simply give me back the list.

F

Actually an array of issues based on the name of the list and the other one will also filter the issues by status.

F

So here you can see the implementation of the methods and I can use the fluent api of pmpjs, so I can say sp.web.lists I will get my list by title and pmpjs will build the actual rest query. For me. I want to select these properties of every single item and I want to get all of the items. Of course here I have just a small amount of items, so I can do that.

F

Otherwise you could do paging and stuff like that, and once I've got my list of spo issue items which is defined as an interface right here I can map them to the actual output that I want as the data binding source for my solution. The same applies for the get issues by status, but here I'm going to use a camel query to filter the items. So here you can see again sp.web.list so through pmpjs, I'm getting the target list reference and then I make a query with camel here.

F

You can see that the actual camel- and this is the uh readable version of the camel that I'm running so I'm retrieving these fields and I'm making a query based on the status filtering based on the status value that I get as an input argument and then again I do the filtering cool. So now, in my load issues I can get through my service. The two sets of issues, the whole issues and the new issues, and I can again do the binding setting them into the state.

F

Moreover, I can also keep an eye on the on property, paying field change method so that in case the title list will change. I will be able to update the list of items so now it is running. Let me go to edit and let me remove this item and I will briefly add the new one just to show you the output.

F

So here we are consumers poas.

F

Here I can go here and say that the list is issue tracker, thanks sharepoint for helping me, and now we have our adaptive cad extension with the car view, rendering the number of new issues that I have, which is actually the number of items we knew right here and then we can see all of the issues with the status and with the priority so really easy and simple and again here we are just doing the data binding using the capabilities of adaptive card syntax, and here we bind all of the issues in this view and getting the status or the title or the priority of every single issue.

F

So really simple and quick, but really powerful, and I think that's all for me as well so back to you, patrick and thank you.

A

Thank you paolo for that that's another great example of data binding for your aces really fits into a lot of what we've been talking about in the other, calls about making dynamic adaptive card extensions and pulling data from different sources so great to see that, thank you, paolo. Thank you, hugo, the fantastic overview of new development containers and uh thank you, david and ciao for the document links according spfx, webpart, great stuff, very much appreciate everybody's work on those demos and coming to present them today.

A

Again, if you are interested in demoing, please submit to the form uh with the link earlier in the recording. This recording will be available in 24 hours on the youtube channel uh ak dot. Ms m365 pnp slash videos just a reminder: we cannot make the actual teams recordings public to everybody, so you'll get those recordings from the youtube channel. Follow us on twitter, at microsoft, 365 dev or at m365 pnp. Our next viva connections and spfx call will be in two weeks on february 24th.

A

At the same time, and our next general dev sig call will be next thursday february 17th. At the same time, you can get all the links from our, for our community call invites to aka dot. Ms m365 pnp and again lots of other community calls as well certainly encourage you to attend or catch up on on youtube. As many of these as you can, and with that I'll say, thank you to everybody for joining us today. Thank you, everybody for presenting and look forward to talking to you all soon have a great weekend. Bye, bye,.