Microsoft 365 Community Viva Connections & SharePoint Framework, 24 Mar 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Viva Connections & SharePoint Framework Community call – 24th of March, 2022

Description

Viva Connections & SharePoint community call on March 24. Demos - Creating a workflow engine within SharePoint Framework and Azure, Docker Loves SharePoint Framework (SPFx), and Using 3rd Party APIs in Viva Connections ACEs. Project releases for Reusable SPFx React Controls – v3.7.2 and Reusable SPFx React Property Controls – v3.6.0. 1 extension, 8 web part, and 1 ACE sample delivered as well. Join us for the next Microsoft 365 platform community call | Tuesday, March 29, 8:00 am PT. 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 and viva connections- biweekly sync, it is march 24th 2022., I'm your host on this call patrick rogers. I want to again say our thoughts are with those in ukraine, our friends and community members and everyone. We really hope we can get to some kind of a resolution in that situation soon. But our thoughts are with you all stay safe agenda, for this week's call is going to be latest updates on sharepoint framework patterns and practices updates across the program.

A

New community samples uh picture time with uh together mode, and we've got three great demos again from greg alexander and paulo, so we'll start with creating a workflow engine within sharepoint framework, a timely subject, docker love sharepoint framework and then we'll finish up with using third-party apis and viva connection, aces or adaptive card extensions.

A

But let's jump right into some of our quick program updates. So we've got opportunities to participate in the program, so you can always jump in and demo we've got a link in the bottom right corner of this slide on how to sign up for a demo. We are booked out for a few months now, which is uh great but don't be discouraged. We will get you uh demoing. We will get you a slot.

A

It just might not be right away, but would love to see all the great work you are doing for your customers and your companies out there, and so please reach out and schedule a demo I'd love to get you featured as well. You can contribute on github across all of our many repositories that could take the form of reporting issues, submitting pull requests or helping others with their issues and questions as well and then.

A

Finally, we always appreciate feedback about the program and ways to uh you know we could do better or things you like, and maybe we could do a little bit more of those jumping now into uh all of the different ways to get involved in the program. The only link you really need to remember is aka dot. Ms slash pnp uh boy, we are still animation heavy, uh so m365 developer. Videos is that first section, those are going to be topic, focused videos on how to get started, doing various things.

A

Adaptive card extensions, sharepoint framework, web parts, calling the microsoft graph, our community videos are going to be recordings of our various uh community calls such as this one and all our other calls. So if you missed one or just want to catch up on something you heard previously, please do check those out as well. We've got tons of great open source repositories, all of which are interested in your participation and feedback, uh so participate in as many or as few of those, as you have time and interest to do.

A

But you are welcome across the all of them for sharepoint pnp office, dev and microsoft graph, as well tons and tons of great samples to help you get your project started or see.

A

How other folks have solved similar problems, uh team samples, spfx web parts, spfx, aces power platform, samples, spfx extensions and list formatting again ak dot, msl m365 pnp to get all those samples uh m365 developer community calls we've moved this slide up just to make the ending a little bit cleaner, but also to highlight all these other calls that are available to you across the various topics.

A

Again, if you can't make it, the recordings will be available, but these are links to get invites to all of those calls and those as well can be found at ak dot. Ms m 365 pnp we've got uh as well our tuesday calls or the microsoft 365 platform calls. These are hosted by uh folks from microsoft across uh various uh areas in engineering and uh next week, we've got uh sean squires, uh some updates around syntax testing easy with uh new templates. uh We've got uh me doing a managed state across aces demonstration.

A

So that's gonna, be extending uh this series. We've been doing around state and aces and understanding that and then seb will be back. Introducing some new microsoft graph toolkit samples uh specifically about the sample gallery. Excuse me, I'm so very excited to see that update from sean and seb and, of course, myself as well. I guess download that invited ak dot. Ms m365 dev dash call- and we look forward to talking to you next tuesday, and we will now go to david for sharing- is caring.

B

Awesome, thank you, patrick well, friends, as you saw all those resources, all those samples are made possible by amazing community contributors such as yourself, but we understand there may be times that prevent you from getting involved if you're new to the community or new to some of the technologies such as github sharing is caring, is a program that is here to provide you hands-on guidance that we are going to work alongside with you, so you feel comfortable contributing making your first pull request.

B

We got you you want to present on one of these calls, as patrick had mentioned, we're going to provide you some tips and some guidance.

B

These are safe space opportunities for you to ask any and all questions we don't record them and they're wonderful opportunities to collaborate with other members of the community coming up in april is another ask me anything on viva connections, extensibility with luca pat and john, so look out for that being scheduled in the next few days and definitely register again just be a little patient with us as we get the dates set up over the next month or two conference season and some job changes and everything.

B

So the schedules are a little crazy, but we appreciate your patience and look forward to collaborating with you now once you have contributed, we want to celebrate all the amazing work, you're doing with our pnp recognition program. This is a formal and official way to recognize and celebrate the work you're doing powered by credly. Yes, the same credly that manages all the microsoft certification badges. uh They are associative to your linkedin profile. Shareable on twitter. Put them on your website. Add them to your resume.

B

It is a great way to be recognized for the work you're doing, and we cannot appreciate enough all and everything that you're doing we do need you to opt in, so that we can tie your github account to an email address that you would like associated to your credly account so aka dot. Ms slash m365 pnp dash recognition, patrick back to you.

A

Awesome thanks david for that great update and now we'll go to vesa, with updates around the sharepoint framework.

C

So quick update on the numbers without showing exact numbers, um but uh the growth has been really really awesome during uh the spring. Again we're a bit uh slowing down again on the on the previous weeks, uh but still targeting the highest ever you daily usage actually this week, tuesday. So there is millions and millions and millions of users on a daily basis uh using extensibility, build with spfx, so really really cool to see this growth within the past years, quick update on the on the roadmap side of the house.

C

So not that many updates in here, but we have the 1.15 beta already out current the eta on that one is june. 2022 and focus areas will be, of course, on the viva connection side of the house, as we are seeing more and more gradual adaption of that which is natural.

C

It takes always a while for people to start using things until they see the ga release happening and then there's a really cool thing for classical ask for spf x, which is overriding of the new and edited and view experiences in the list and library forms and that's coming up in the this 1.15 release.

C

As well and a lot of kind of a technical update so coming up with or updating to, typescript 4 updating, the note, 36 note, 16 and updating the latest themes, sdks and all of that stuff as well, so a lot of other investments on there now. The last thing on the slide is, is just pointing out on something which will most likely go to the beta in 1.15, which is boot driven adaptive card extension.

C

So you can actually create a bot in the future, which is said to be actually providing adaptive cards and reacting to adaptive cards in the viva connection site. So it's cool to see all of the technologies getting more integrated between each other across the stack. But that's it a quick update from the engineering side around this. So let's move to a next last slide. I guess it's you, patrick or julie,.

A

C

Thanks for that update.

A

Visa very excited to see uh the stuff coming to 115. A lot of long-awaited features for folks, that's gonna be a really great update to get out there and julie was having some technical trouble. I'm gonna glance. I don't hear her, so I'm gonna go ahead. Real, quick and just cover our pmp.js client side updates. We did publish a version 213 released on march 11th that had a fix. um Those fixes now for v2 are going to come from community submitted prs. We are not doing any lts for v2, uh it's just.

A

We don't have the team to really support that right now, but if you find something, you want to submit a pull request for v2 happy to merge that and get that out uh in a future release. We did also release version 3.1 on march 11th got some docs updates in there working on this esm stuff for node uh working through that there's an open issue there. I know that's another friction point with this new release: we're working through uh fix some bugs and then uh as well.

A

I want to remind folks don't forget about our nightly build, so we've got npm install at pmp. Slash sp at v3 nightly and that will get you uh the latest updates built each evening. So if there's something we've added, uh you have submitted a bug perhaps and we've got it fixed, but we haven't yet to do a release. You could try it as soon as the next day so encourage you to check those out and uh we'll look to keep going with those nightly builds. If you have any questions there, please check that out.

A

Links there to our docs, follow us m365pmpjs on twitter and thanks everybody for all the great feedback around the v3 release and now moving on to cli for microsoft. 365. we've got a new preview version: v: 5.1 out, validating sharepoint framework projects, downloading teams, app packages, improving spfx projects, automatic copy device code, support and removed some commands that are obsolete for one of the communication apis. You can install that preview api there using the at next version target and then some release notes there.

A

You follow the link at the bottom, so definitely check out the cli as well available natively in the azure cloud, shell, as a reminder, so very easy to grab that use it, and uh you know, get your projects nice and standardized around setup and configuration and maintenance.

A

Next up is the reusable components, so we've got uh two sets of reusable components. The first react controls currently at 372 is going to give you controls for use within the body of your web parts and application extensions for the react controls there will get you a nice jump start into your project and as well the react property controls.

A

360 will get you stuff for the editor pane of your web parts, allowing you to get a very great out of the box appearing uh experience with a lot of great reusable controls to make your solutions really pop very quickly. So more information there at the two links on the bottom s, p, dash dev, dash, fx dash property dash controls and then sp dev dash fx dash control dash react so check those out great way to get your project going quickly.

A

And finally, we got our update on modern search. You can always go to ak dot, msl search for the latest building modern search experiences with flexible web parts. We did the february 2022 release, which is four five four, and then we had a december 2021 release of 323..

A

Remember that v3 branch is sort of uh you know in maintenance mode. Only at this point and uh if you can or when you're able uh upgrade your projects uh and your sites and customers to use the version. Four branch of things, that's where all the updates and new features are going, so encourage you to check that out, and next up is going to be hugo with an update around our samples.

D

So we have two repos where we store lots of samples, one around spfx extensions, aka, ms spfx dash extensions uh and one for web parts at spfx-webparts, and so these are the updates. uh Since our last update uh the first one is a upgrade to spfx112 on the application insights, advanced extension by sudarsan and on the web part side, we have a whole bunch of new web parts. One is a web part by sandeev.

D

Dev 365, again mean parents that gave him this name, but we have a hide list, webpart, which actually uses a documented approach to hide or show lists, and you could normally do this with powershell rest api or power animate. But now you have a web part that you can use to do the same thing. We have an update by anub tatty on the cascading managed metadata using graph api. We now use spfx114.

D

We have a new, a frequently asked question property field collection, metadata web part. It's one of the many faq web parts that we have, but this one uses property field and thanks to arun kumar perumal. For this update, we have a new adaptive card post control that uses the pnp uh adaptive card host control, and so now we have at least three samples in there. That shows how to use adaptive cards within spfx, two of them that build it from scratch, and this third one which actually uses the pnp control moving forward.

D

I would recommend you use the ppcontrol, because there's a lot of awesome work, that's being done! So thank you fabio for this update. We have a new cherry picked content by christoph cherrypick content. If you remember the good old content editor web part, you know one of the reasons why this webpart is uh not as readily available in the current platform is that it was easy for anyone to go in and put some script in there. That could have malicious results.

D

So christoph's brilliant idea was what, if we had the same web part, but the only way to call script would be if the script have been. They come from an approved source of scripts, a library or libraries that allows you to curate the list of scripts that you can use, and that's really what this web part does.

D

Omar el anis has updated the hero web part. You know, I love this, because some users requested the option to add a collage of images using a flex grid layout, so he's added that he's added things like placeholders.

D

uh You know some issues with uh web part, not loading, more maintenance on unused imports and things like that and better css and updating author information.

D

If in case there's issues, the quick poll webpart by niels has been upgraded to 113 company stories by luis mannis has been upgraded to spfx 114 and uses the latest mgt.

D

There's a few shout outs too, as well that I wanted to do. um Denny small itself has actually done over 10 full requests to add dev containers to some of the web parts that didn't have dev containers. So if I just listed the updates, there would be a page dedicated to that it's here, but I also wanted to thank abdaraman mujahid, who is constantly contributing to the issues and helping people solve issues again. Every contribution matters, it's not just about creating new samples or updating samples, helping people out is a great way to contribute.

D

So thank you to that and with that in mind, milan uh holmen's has actually uh you know, started helping out as well in the in the issues and thank you for jumping in and helping people. We appreciate your work if you want to contribute, please go to these repositories, we accept contributions and we welcome everybody's feedback. Thank you, patrick and back to my friend david.

D

B

Thank you. uh We have one new ace this week from siddharth on dynamic announcements, it uses card view and quick view, and it allows you to drive those announcements dynamically from a sharepoint list, so it's very, very cool to set our thank you still open for more contributions and again we're going to be having our viva connections. Adaptive card extensions sharing is caring coming up soon with the conference season and all that it's just a little crazy, but we are wrapping it up and it's going to be awesome so be on the lookout for that.

B

Patrick back to you,.

A

Thank you david. Thank you, hugo for those great updates and now we'll go to visa for optional picture.

C

Time, okay, let me share my screen. uh It is that screen most slightly, I was practicing with my full screen setup, so it's hard to know which tough damage to shirt. I think we got the right one. uh Let's wait for the 15 seats to fill in. It would be really cool to have a 200 people at some point in this.

C

I I I know that it's coming sooner or later, but I don't know when uh let's wait a while still, let's wait a while, let's wait a while, let's play a while, still few more seats, few more seats in the room. Yes, I guess that's the last row which will fill in uh what is that in the second row. What is that printing? It's actually not rendering. Probably I will with the recording on uh wait, wait and I will we will then crap the waving our hands in there.

C

I think we're full for completely in here. Let's do some hand fiving everybody. Thank you once again joining in here awesome to see familiar faces and people who join on this together about things also every single week, so welcome. Thank you. Thank you and ac. I saw that face. Thank you thanks. Everybody awesome great to have you in this in this community, thanks patrick, take it away.

A

All right with that, uh we will hop over and start our first demo, which is going to be with greg hichon, uh creating a workflow engine with sharepoint framework greg. If you want to go ahead and take over the presentation.

E

Sure will do my name is greg hitchon. I am a software developer of an engineering company in canada and we have been working on a workflow engine to do a variety of things, and that includes so.

E

uh Basically, we want to solve technical problems as well as business related problems, um and we need to support human attraction, so task make work task based work, access to protected resources, so accessing the graph, creating files deleting files whatever and some key goals we had here- was to have both a hybrid workflow, where we could have low code by default and then drop into more of a code-based solution where required and then also hybrid forms, so have a ability to have a simple low-code form and then drop into a more complex form where required.

E

So some examples of these problems are creating technical reports, uh business side like a vacation, request, onboarding process and some existing products to this, be like temporal dot, io some bpmn type engines, intex power automates. So all of these are great solutions and as as is classic in software development, we were like. You know what we're going to do something different. So um but we didn't rebuild, you know any of these. So how do we do this? uh Basically, our stack here from the ui side. All this is very microsoft centric.

E

So I'm using spfx react at for for the the ui, basically building a little website inside of sharepoint fluent ui pmp stuff using react, query and react router for our data and api call management and then react router for navigation um and form wise. We have the adaptive cards, we're using for our low code solution to forms and then react hook.

E

Form is just a library within react and we're using that for our more complex forms and for workflows we're using xstate, which is shifted over like they created a new company, stately and they're, doing all sorts of good stuff there in the last year or so for our low code and then durable functions for our more complex stuff and then data access we're using asp.net core I'll, oh data api.

E

um So that's basically and then within sharepoint framework. um We've been working on this since the early days of spfx. But lately uh you know, with the improvements in um you know, react test hooks and all this stuff, um it's been it's been beneficial. We've found like the the react faster stuff is, is really helps in in our workflow when you have a more complicated uh web part. So, uh since the early days, the the whole stack has gotten a lot nicer and we have like the ci cd stuff.

E

So everything is, at this point fairly fairly clean. um So let's do a demo. So what does this look like? So we have a couple of just simple, simple demos here, so this is uh just an app page that we have- um and this is a generic sort of list that um has configured for different entities, so these are very similar. There's some changes in the naming and stuff which is configurable and basically when we create a new app just, can reuse a lot of this and it's just a very generic thing.

E

So what does this do so to create? So this is example is just for a for a document review request, but really it's just a sample, there's not much in this in this workflow, but this form is is customized, so you can have any any inputs you want into uh to this.

E

F

E

To submit this document so let's say I'm, you know a person submitting some document for request or for review. I might have some additional fields here. um This then will populate and what's happening in the background. Here is just some some api calls and then x8 is running. um You know getting some events. Persisting some state and then durable functions is, is also kicking in to create some uh create some records in a database.

E

So we can look at this and we've created a task. So all this stuff is it's just task based we've created a task has some some properties, and what we also should get here is is an email, so this email is using a 1-4 adaptive cards, and so here we have some some simple, um some simple inputs and we can see there's some some validation. So one of the nice things about 1-4 adaptive cards is this validation, which is blessed, and you have to worry about.

E

You know sending it back to the server and then adjusting and then sending it back, which was a pain. um So so we get this card with this task that we can fill out directly in the email um and then we also have um within sharepoint. uh We can, we can see we render the same the same card, so basically this is just a again sort of a hybrid approach where, if we're working within sharepoint or teams for that matter, we can just fill this in directly.

E

We don't have to recode another form for the different environments, so um we can submit this.

E

You can submit this from from within within sharepoint and there's a bit of a difference with 1-4 in terms of the updating which still haven't figured out cleanly. If you want to return like a refresh card, it refreshes once automatically, and so if there is a lag in between like um when the data is getting updated, uh this this won't get updated right away. um So once it does, though, we get this refresh card, and we can see our comments here um and then also here if we refresh from within sharepoint.

E

Obviously we see we see the same same comments um and then this workflow is gonna. You know update in status, it's gonna be complete whatever, so that's kind of an example of of using the low code form approach, um and then this start card, so this is more of a business process that we're actually using. So we can add in uh you know our some some photos and uh some bunch of data and this this again.

E

This is something that you can't do in in adaptive: cars right now, for instance like upload a file, so we can't do this directly in in the email. So we need to drop into like react. um You know hook forms to I mean you could do any framework, but we have to drop into spfx to do this, and so here there's there's no tasks within this little workflow. uh Basically, all we're expecting here is for uh this.

E

This card to get submitted um and then once this workflow completes it'll just send us an email uh with uh with with that pdf of of that that card.

E

So if we look at the workflow here, uh you can see this is this has completed, um and if we go in and look at it, we can see some of the data that get that we've we've submitted and then um get a message here with with like a pdf, and this is happening in in the durable functions world, where we're taking that data generating a pdf in like an async fashion and then once that's completed, we're sending this email.

E

So obviously, here these are very simple, uh very simple workflows, um but the when we have a number of them that are also quite complex. Lots of approval stuff- and you can have drop downs, approve, reject all this stuff um and and yeah. So that is that, um and let's take a quick look at some of the like what some of this code looks like.

E

So, for instance, this code is for that start card submission that we we just did so you can see it's pretty simple, so we've abstracted some of the complexity of the form stuff and just just put it into you know these these text inputs. So basically, we can spin up like a simple form for for grabbing some data, pretty quickly like there's, not a whole lot going on here, um and then this just drops into the that generic sort of framework in terms of the low code stuff.

E

So this is similarly what this looks like in the adaptive cards world. So you can see, there's some air handling and we have just like a json type schema. We could also just design this in the designer, so this is something that is a lot easier to design, because you have.

A

E

Designer and and then you can tweak it a little bit um for any customizations um and then in terms of the workflow. So xstate looks something like this again. It's json and there isn't an editor now live for forex state.

E

So there's a visual editor that you can scaffold out your workflows in and then convert them um into or drop in little snippets into your actual code base, um and so this this invoke is invoking a like an api call, basically which, which then kicks off some some additional uh work, and this is the sort of code side of the workflow. So this is c sharp. This is in durable functions, um and you can see here like uh this is just a sample example where you get some data from a task.

E

You wait for some event, get in some some input from an email for instance, and then, if you can, you can do anything. So if you wanted to do some specific thing in code that you didn't wanna or couldn't handle in the in the you know json sort of stuff, then you can do any kind of logic you want here and then take any kind of action. So this is all in c sharp, so you know for creating pdfs or like accessing some data.

E

I mean it's all very, very straightforward and there's a lot of a lot of resources around um around that, so that is, that is pretty much it one. Other thing that um is is of interest. Is this details list? So this is something that took a while to get to it right um and the details listed in fluently eyes is a pretty it's a pretty beastly thing, there's a lot going on in terms of configurations. So one thing that was was useful early on and I would definitely suggest doing.

E

um Is we created a wrapper and then we create another wrapper on top of this wrapper actually to to abstract away some of that complexity. So, um where you have uh some of these lists, like I mean all of these, are, are using that that list and you can have some different views and stuff like that and different search and and refreshing and whatnot.

E

So this this list component is was was pretty useful in terms of just uh putting together a ui that that made sense, um yeah, and that is uh that's pretty much it so uh that is um and yeah. That's. That's all so. um Stay happy stay beautiful and thank you for uh thank you for watching and listening.

A

Thanks great great stuff, exciting to see that demo, thanks for coming and sharing it with us, really neat uh use of a lot of different techniques there. So I hope folks can check that out and now we're going to move over to alexander for a docker love, sharepoint framework demo.

A

Yes, yes, great.

G

Let me show you my slides here.

G

You can see them now.

A

I've got it, take it away.

G

Great yes, my name is alex and I'm gonna tell a little bit about the containers and how you can make even greater experiences on such platforms as sharepoint, viva and teams etc. Whatever platform you're delivering to using spfx framework.

G

But let me get started with just a usual example usual case. For example, I want to I'm asked to join in some project to fix some bug or improve some features. So what I usually do, I'm cloning a project like this and then I'm going inside.

G

And look in the structure, I can see that it's just a normal fixed structure, so node modules are not installed, so I run npm install like this but hey. I don't have any npm on this machine uh and I don't have node gs on my machine and the reason why I don't have it.

G

There are a few reasons. First, I pursue consistency so, whatever version we used for production for building and shipping production, I want to have the very same version for every developer in a team, and that means, if I work for many different projects, I need to have a different versions.

G

I need to use different versions on my laptop and, of course you can solve it with uh such tool as nvm, but I'm involved in many other projects, not just node.js and spfx. I work with python and terraform and pnp powershell, so I don't want to just have a niche solution for this consistency. I want to have a generic solution that I can use for any technology that I work with.

G

Second part is clarity. It means that I don't want to always keep in mind what dependencies are. I already installed on this laptop and what dependencies are not installed. I have pretty few laptops believe me and I I work with pretty few projects at the same time, so I don't want to always keep this picture in mind. I I want to focus on some more exciting things and the last but not least, is an asp is a security aspect. It means that when I run some co run a code from from a repository.

G

I don't want to even spend time on considering whether whether this code is trusted, whether it is mature and safe to run, I just want to run it in kind of isolated way, so it cannot affect my my laptop and cannot affect repositories. Other repositories that I have on my laptop and, of course, I work for many different customers, and I don't want to expose the expose repositories kind of between each other.

G

So to address that, if you put these demands into extremum, you could use some virtualization. Of course you can create a virtual environment, for example, a virtual machine for each project.

G

Every developer will have a dedicated virtual machine for every project. For example, those developers who work with the so-called I.t assistant project, they will have this virtual machine or they will have the very same virtual machines with the same software. We could. We could create a template of this virtual machine right. We could verify this template and then we could distribute this virtual machine across across all developers and they will have a consist very consistent experience uh very same version of node.js and npm and whatever, whatever dependencies are necessary for this particular project.

G

And if we work with a few projects, then we could use a few virtual machines that is totally viable. I love I work a lot with sharepoint uh on premise and I know that uh uh well, we deliver such projects for uh sharepoint and premiums where we uh develop on virtual machines and we automate preparing images for virtual machines. We automate provisioning. So this is all automatable no worries, but still virtual machines are quite heavy and even for running spfx you will need some about 10 gigabytes of disk.

G

For this virtual machine, you will need about four gigabytes of ram, etc, and even if you automate everything completely, you will still. There will be still some uh inconvenient situation for uh developers when they when they want to expose the machine on or refresh it or even start and shut down. So this is not optimal. Really, even if you invest in a development and in in this environment, there will be still some not satisfaction from from the developers what we suggest in studies using containers, which is another another way of virtualization, so it it.

G

It has the same idea of virtualization as virtual machines, but it's just a bit different okay, so you still can create a so-called container images and you can pre-install software there. For example, you can install uh you can use linux with a specific version, node.js and and npm, etc, and then, from this image you could create uh containers.

G

So these are also virtualized environments, again they're, similar to virtual machines, but a bit different. Okay, maybe enough token, let me show you how it works and you will see by yourself.

G

So from here from this folder, I'm opening the same the same project in github the same as we just cloned and here is the guide. So I just need to run a few commands here first to assign some permissions, and I need to put my pseudo password here and the second line is actually starting docker.

G

So for running this command, I need uh docker to be installed on my machine, and the point is docker is the only what I need to have installed on my machine when I worked with when I work with sharepoint, when I work with python, when I work with golang, I don't install anything I'll, just use docker and that's the only thing I have okay, so I run it and boom it's created already. So right now, with just one line, I created a virtual environment on my machine and it's up and running.

G

I have npm on this environment already and if we look, for example, uh what happens behind the scene, I run stats and I see this container is just taking about eight megabytes of memory. What do you say about that?

G

So this is a virtual environment, isolated with pre-installed software, and it just requires 8 megabytes for running it all right. So let's go further and I will go and go on and install the modules.

G

And as it will be installing, let me go back to slides and tell you a bit more about this command that we just run. So we told docker to create this environment. We told it to uh to map.

G

My directory that I have locally on my laptop. We map it to a virtual directory that there is on on a virtual disk space on on this container, so the when I run command in in in this container, it will work with the with my files, with my sharepoint framework files, uh just not even understanding that it is really working remotely.

G

So that's what we did here and then we say we need to expose two ports which we need for uh chrome or browser to work with, and we need to create this container from this image.

G

I hope you can see it well, uh but the image is a spfx image that is uh promo, promoted or offered by uh np. Community spmp community is maintaining this image of the docker and we use it all right.

G

Let's get back here, so it installed modules. It created a ssl certificate. Now I need to run gulp serve.

G

The only thing remaining is that the certificate was created inside this virtual environment, but since I will be using a browser on my real laptop, I will run this snippet and install the certificate on my laptop here. You go so now everything is up and running and I can just go ahead: open, workbench and add web part and start contributing. So you see I didn't have to install any additional software.

G

I came to the project just using just having docker on board and I started contributing already. I can go and fix debug. Okay. What do I do here? I go.

G

Let me open the this project in visual studio.

G

G

And, for example, I want to change some parameter here like I want this password that is generated by this web part. I want it twice longer. That's what I was told by my uh project manager. Leave update, is working and or maybe not working.

G

Let's refresh it yeah now we have it twice longer, uh so that is it. uh That was easy, but uh you may you might think uh well, yeah, I'm a sharepoint developer, I'm already demanded. Why should I spend time on learning this docker fancy things and maybe you're right?

G

Maybe you don't have to uh if someone prepares the project for running, for example, in codespace, which is a fancy technology effect fancy feature of github here. This is another example you can just use.

G

You can run this container somewhere in the cloud before we do that. Let me close this container that I run so I just type exit, and now we don't have any containers running at all. You see it was easy, create it like this and then, when you exit it's just removed, it's disposable and very lightweight. You don't need to wait until it starts and shut down all right, so this project is prepared for code spaces, and I go like this.

G

I start the codespace. This is a container that will be running in a git github data center. So from this I want to connect to visual studio.

G

Open in visual studio code.

G

G

From here I just want to run create a new certificate.

G

And I have modules installed before because I used this workplace or code space yesterday, so it's still holding my files here. I don't need to install again.

G

All right and now I run gold serve no browser.

G

And let's check that we don't, we don't have any containers running on my laptop, so I don't have to install any docker anything on my laptop to be able to develop in this solution.

G

So I just go with visual studio and say: okay github run this container for me and then then it's just running now it's running and I need to run the same snippet for handling certificates on my browser and we are, we should be good to go. Let's try it out.

G

Here you go, you see, uh that's the future, so um I don't have anything more to present right now um and I will. I will appreciate all the questions. If you put them in the chat, uh I will be glad to to answer them uh back.

A

To you patrick great work, thank you alex for that uh really exciting, to see uh more and more uh use of docker in these containers across the different pnp solutions and across the different uh methods of doing development, really uh cool cool stuff. uh I need something that I could personally learn a lot more about. So it's exciting to see these demos coming and really motivates me to learn more and for our final demo. Today, we're going to move over to paulo around using third-party apis and viva connections. Adaptive card extensions, paulo, take it away.

A

F

You patrick, and welcome to this uh uh short demo about how to consume third party apis in viva connections.

F

Like usual, let me share a few technical things and then I will move to the demo environment so just to set the context here, we're going to see how we can consume a third party api or a custom api which can be something built with an azure function or an asp.net rest api or whatever else you like.

F

We simply need to register the api as an azure active directory application in the target, azure ready tenant, and we need to expose an api, and we will see how to do that once you've done that, you need to configure in the package solution json file of your spfx solution, because an adaptive card extension at the very end is just an spfx solution. You will have to configure the web api permission request section to declare what kind of permissions you need to consume the target api.

F

You will eventually have to constant your application in a target tenant. If you are creating a multi-tenant solution and then you will have to grant the permissions to consumer api and you will be ready to use the ad http client that we have in spfx in order to consume the api and show the output in a car view or in a quick view.

F

So rather than talking, let me show you what I mean in practice, so I will start showing you an actual demo ace, which is simply based on the idea of showing a set of stock values and don't be scared. These are fake values, so don't jump on your chair if it is higher or lower than what is actually the current value of any of these stocks. This is just based on a fake list of stocks, so it is close to today's values, but not exactly the current values.

F

This is an adapted card extension running right now in the workbench, and if I click on edit, we can see that it has been configured in order to consume an external quote service, which is a fake one that I created for the sake of this demo and I'm providing right here as a setting a comma separated list of stock symbols that I want to get through my api.

F

So how can we create such an adaptive ad extension? How can we create the backend api in order to make it possible to create such kind of solutions? So, first of all, let me show you the sharepoint framework solution. So here we are in the adaptive card extension, and this is a very simple adaptive cut extension in which, in the on init method, I simply configure the state of the ace and in fact, in my state I simply keep track of the current symbol. Current quote and the trend up or down for the current quote.

F

Then we have in the node the initialization of the state, and we create an instance of an aad http client object that we have in spfx and as such, we have it in adaptive card extensions as well, and I simply get an instance through the adhdp client factory of an http client, adhd client for a specific target api which will be identified by the unique uri of my api as it was registered in azure active directory, and we will come back to this value later on in this demo.

F

Once I have my client, aad http client instance, I can simply load the quotes for my stocks. Simply using a custom mirror that I defined the load code 1, which will will execute asynchronously to speed up the initialization process of my ace and as such in half a second. I will start loading the quotes.

F

So what I do right here, I simply rely on some custom business logic. I will not dig into it, but I simply need to go through all of these stock symbols that I configure so one by one. I will make a query, but the interesting part of this demo is how we make the query so using the aadhcp client that we created before we simply make a get request, for example, because our api accepts a get http request and it will provide back the stock quota of this symbol that we will request.

F

So I simply provide the url of the backend service that I want to use notice that this is a property in the list of properties that I have in my adaptive. Account extension.

F

So when I say here in the ui that this is the url of my backend quote service, this is the value that I will find in the properties of my electrical extension instance and as such, I can simply build dynamically built based on the settings, the url of the backend service, and I will provide in the query, string the symbol that I want to use to get the quote.

F

Once I've done that, I will get back a json response which I can convert into an actual json object based on stockport info type, which is the actual type of the result of my custom api. In your scenario, it will be your custom type in my scenario. Stock code info is made of few information like the string representing the symbol, the quote, which is number the trend up or down, and the user who made the request. Why?

F

Because I want to show you in this demo how we can also get the security context of the user, invoking the backend api. In fact, whenever I make a request to my backend function, I also get back, who is the user, making the request so that we can see practically how we can get access to the information about? Who is the user, making the request so back to my load quota, function or method?

F

I simply get back the stock info object and I use it to configure the state of my adaptive card extension, as we already saw in some of the other demos in these sig calls. Once I have the state configuring. My adaptive code extension I can use it, for example, in the rendering of a card view, which is precisely what I'm doing right here.

F

So I have a car view, which is the one we see in the ui of the adapter carb and in the curve view we render as the primary text the symbol and as the description we read the state trend to see if we are going up or down and we render accordingly the arrow and then we render the quotes value which will be in uis dollars.

F

So that's the client side, part of the story, together with the package solution.json file, in which I configure that my application requires to have access to the stock quote function app with the permission, scope called read.stock quote, so I'm declaring that my spfx solution requires to consume this api. With this specific permission, scope, I create a package. I upload the package in the app catalog, which is something that we can do right now.

F

Actually, my solution is already running, but I will do it again, just for the sake of completeness. So if I drag and drop this application- and I replace it in the app catalog- we can see that this application is going to consume an external api and we will need to grant proper permissions to this application. And of course this is the demo effect.

F

So I don't see the dialog right now, but at the very end, in the advanced section, api access of my sharepoint admit center, I will be able to grant in the list of pending requests or to see that I already granted like I already did in my scenario. The stock quote: function app application.

F

I granted the sharpen framework to consume the stockport function, app backend api using the dot stock, quote permission. How is built the backend api? Well, it is a major function that I've built using visual studio 2019. As I said, it is a fake one. So I don't really read the real values, but I simply provide a hard-coded value for all of the stocks, because it doesn't really matter how we get this stock value.

F

This is just for the sake of making an example, but this is a function in which I first of all use dependence injection to get the claim principle of the user, making the request, meaning that easily and really in a straightforward way. I get inside the azure function, the claim principle of the user, making the request, and when I create my response, I simply provide all of the values, including the identity, dot name, if any, as you can see of the claim principle that I get as an input of the request.

F

So how do I get inside the claims principle, the identity of the user? And how can I call this api? Well in azure active directory, I registered an application in my target tenant, and this is the name of the application that I was using in spfx in order to declare the permission request. As you can see, I declared this application. I registered it and I decided that I wanted to expose an api.

F

This is the unique uri of my application and again this is the value that we use in spfx when we create a client through adhdb client factory. So this is the unique uri of my exposed api, and this is the permission that I'm requesting the grant for so I registered the application in azure id. Then I configured my application. My azure function app in azure id in order to work as the front end of my api, and here we are in azure in azure, and here we are in the azure function app here.

F

The hub could be configured either to use the authentication provided out of the box by the azure function, which is not the case in my scenario. But if you want, you can click on the on button here and you can configure to use azure active directory from the ui of the azure function or you can rather want to use at low level in your function, app the claims, principal information and do your authorization and authentication logic in your custom code right here. It is completely up to you.

F

I also configured sorry in the azure function that I will be able to talk with the tenant, the sharepoint tenant that will consumer api.

F

So, in the course settings I configured my function to work with the consumer under this tenant tenant.sharepoint.com and as such, my azure function will be able to be accessible by the sharepoint framework component that I defined and, in fact, if I go back here where I consume the api and I click on network, we can see that we have all of the requests for the backend api and we can see that thanks to the aadhcp client factory, which created an instance of the adhdp client, we also have injected in every request that will go to the backend api, a bearer, open authorization access token.

F

Let me copy the value of this token and if I will open, jwt or jot dot ms and copy that value, we can see that, under the cover of this really unreadable value we have inside this jot token. We have the information that we have a open authorization token for the api with this audience. So this is the unique uri of my target api. I can see that I have the read stock quote permission and I can see the information of the user who is going to consume the backend api.

F

This is the token which will be provided to my backend api so that inside the api, I can have my custom logic for authentication and authorization. So really simple and straightforward. You register an api in azure directory. You configure the api to be exposed as an api with a unique uri in the spfx solution. In the ace you get a client for that specific uri.

F

You use the rest based approach, so you make a get a post or whatever else, http method. You need to use to consume your target api and you need to remember to declare in the web api permission requests that you want to have access to that specific api accordingly, to the permission model that you configure for the api itself.

F

So that said, I think we can go back to you, patrick, thank you, and I hope you found it uh useful. Thank you.

A

Thank you, paulo, fantastic demo, as always, really great to see all those steps for connecting to an api there's a lot to do, but paulo laid it out very nicely and clearly there. So thank you for that wonderful demo and thank you to greg and alexander for what I believe were their first demos on a call. So thank or one of our calls. I don't know what else they're doing so.

A

Thank you very much for that very much appreciate your time and effort to put those on all great work from greg, alexander and paulo want to thank all of you for joining us on the call. Thank you very much for uh being with us here today. As always, the recording will be available in about 24 hours on our youtube channel. It is you're not going to have direct access to the recording from teams. We just can't do that of a call this size. You can follow us on twitter, at microsoft, 365, dev and m365 pnp.

A

Our next viva connections call an spfx call will be in two weeks on thursday april 7th at the same time, um and our next m365 general dev call will be next thursday march 31st. At the same time, again, all the community calls and all the other great information about the program is available to aka dot. Ms m365 pnp, and with that I say, thank you to all of you- have a great rest your week and look forward to talking soon bye, bye,.