Microsoft 365 Community Viva Connections & SharePoint Framework, 9 Feb 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Viva Connections & SharePoint Framework Community call – 9th of February, 2023

Description

Viva Connections & SharePoint community call on February 9th.

Demos: Getting started your SPFx form customizer journey with a boilerplate and Consuming Search API in Adaptive Card Extension.

Releases: PnPjs Client-Side Libraries – v3.12, CLI for Microsoft 365 – v6.2, Microsoft Graph Developer Proxy – v0.4 (preview), v0.5.0 (beta.1), plus 2 SPFx samples.

Announcements: New Microsoft Viva learning module – Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections - focus on the ACE development - aka.ms/viva/ace/learn

Please see the blog post for this call for project updates, news and events details. The host of this call is Hugo Bernier (Microsoft) @bernierh. Q&A takes place as always in chat throughout the call.

Agenda
00:00 – Intro – Hugo Bernier (Microsoft) @bernierh
05:43 – SharePoint Framework – Vesa Juvonen (Microsoft) | @vesajuvonen
07:27 – PnPjs Client-Side Libraries – Patrick Rodgers (Microsoft) | @mediocrebowler
08:57 – CLI for Microsoft 365 – Garry Trinder (Microsoft) | @garrytrinder
11:05 – Microsoft Graph Developer Proxy – Garry Trinder (Microsoft) | @garrytrinder
12:38 – PnP SPFx Controls – Hugo Bernier (Microsoft) @bernierh
13:35 – Viva Connections Toolkit for Visual Studio Code – Vesa Juvonen (Microsoft) | @vesajuvonen
14:06 – PnP Modern Search – Hugo Bernier (Microsoft) @bernierh
14:44 – PnP Samples - Hugo Bernier (Microsoft) | @bernierh
15:47 – PnP SPFx ACEs Samples - David Warner II (Microsoft) | @DavidWarnerII
16:14 – Together mode picture – Vesa Juvonen (Microsoft) | @vesajuvonen
17:17 – Demo – Getting started your SPFx form customizer journey with a boilerplate – Michaël Maillot (onepoint) | @michael_maillot
35:50 – Demo – Consuming Search API in Adaptive Card Extension – Marcin Wojciechowski (Valo) | @mgwojciech
48:30 – Closing

Learn more
• See the full blog post for this call in the Microsoft 365 platform community blog - https://aka.ms/m365pnp/blog
• Download invite for bi-weekly SharePoint Framework call at: https://aka.ms/spdev-spfx-call
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

B

To the Viva connections and SharePoint framework by weekly sync, my name is Hugo Bernier from Microsoft and I'll be your host. For today we have a lot of exciting stuff. Today we have the latest updates on the SharePoint framework. We have the patterns and practices updates and we'll be talking about the various open source initiatives that we have we'll talk about. Our latest samples and then we'll have my favorite time picture time with together mode, and then we have two demos with Michael and Martin.

B

But let's get started with talking about the opportunities to participate in the community, you may Wonder Hey. How do I get in on this on this community call. Well, there's a few ways you can do that one is, you can do a demo or a technical pattern on something cool that you've done and you can share it with the community and it doesn't have to be fancy. It can be sometimes just a basic introduction and sometimes it could be a very complicated solution. It's all about learning together.

B

You can also contribute on GitHub on some of the open source initiatives that we have and we'll talk about those initiatives shortly, and you can also provide feedback now. You can actually request to do a demo spot on the call by going to aka.ms community slash, request, slash demo, and let's talk about the open source initiatives that we have. We have a few.

B

We have our Microsoft 365 and Power Platform Community videos uh where you can stay up to date with everything that's going on, in fact all the demos that we do all the calls that we do are recorded and then we throw in some extra stuff once in a while. We have some open source initiatives on GitHub, so you can go to the various GitHub repositories that we have. We also have a plethora to borrow a word from uh from my friend David of samples in the sample Galleries and each one of the sample.

B

Galleries are actually rolled up together on adoption.microsoft.com, but you can also access them individually by going to the various repositories that are listed on the slide here and then we have other open source initiatives and samples, and you can get to All That by going to aka.mms, slash, M365, slash community all right, and we also have a bunch of community calls, and the idea here is the committee calls is your way to stay up to date with everything that's going on, not just within the patterns and practices Community, but also within Microsoft as well.

B

So we have the Microsoft 365 platform weekly call, which is usually hosted in demos by Folks at Microsoft, and then we have the Microsoft identity platform, the office add-in, the Power Platform Community call as well as our usual Microsoft 365 and Power Platform Community, which is bi-weekly, and the Viva connections and SharePoint framework call, which is also by weekly, and our next call is going to be the Microsoft 365 platform.

B

Call on the 14th of February and we're going to have the latest news from engineering on the Microsoft 365 topics we're going to have our community together mode photo and danwelling is going to talk about creating an Azure communication, Services resource I love, Azure, communication services and Sebastian levia is going to talk about what's next with the Microsoft graph toolkit and finally, Gary trender is going to talk about the team's toolkit, learn path and get started.

B

Building apps for Microsoft teams, using team still kit for visual studio code and if you haven't played with that, it's super awesome all right and now to talk about some of the guidance on how to get started with the community. We have my twin David Warner,.

A

I resemble that remark you go so. Thank you, uh friends. Well, what is sharing is caring. It is a program that is here for you to provide guidance on how you can get more involved in the areas of the community. What does that mean means that we're going to join live calls together? We're going to show you how to do things like submit a pull request, create a pull request. What is a pull request?

A

You can contribute to all the variety of areas that you're going to see everyone talking about today, but we understand that it might be a little Troublesome to learn how to do that, so these calls are live and their safe space. That means you can ask you need all questions, because we don't record them and you are safe and in a good area to collaborate and Converse with all your favorite friends and you're, going to meet some new friends so uh definitely be on the lookout.

A

We've got new sessions scheduled for February coming up in the next couple weeks, scheduling more from March all free all the time aka.ms sharing is caring. Now, once you have contributed, we want to recognize the amazing work that you're doing, and that is where our community recognition program comes in.

C

A

Is powered by credly, yes, that same credly that gives you those badges when you get certified, we give you the same thing, because you're, awesome and you're doing amazing work and it's our formal and official way you can share them on Twitter share them on LinkedIn, associate them to your blog profile, associate them to your LinkedIn profile. Put them on the fridge, mom's going to be proud. We are too so we do need you to opt in AK dot, Ms, slash, Community recognition.

A

If you've already opted in, don't need to do it more than once we got you covered forever, so you're going to be covered and we're going to make sure that you get recognized lots of new badges coming out this year. Adaptive cards, CLI PNP, Powershell list, formatting and spfx web parts and extensions and team samples is coming this week. So get excited everybody because I know I am opt-in, AK, dot, Ms, slash, Community, recognition, Hugo back to you.

B

Well, thank you David. You know I'm listening to David's uh speaking, and it occurred to me that David and I both missed an opportunity for a career in radio. uh He's got the voice for it and I have the face for it all right.

B

So, let's talk about uh the latest updates uh with Microsoft engineering for Microsoft Viva Microsoft teams and SharePoint extensibility with vesa vesa.

D

Excellent, let's go to the following slides, uh so uh just a recap: on the growth patterns, we are skyrocketing again on the on the SharePoint framework adoption all up. um It's, it's really cool to say the the growth and pretty much every single week or by week that we do an all-time record on the adaption. It really a bit depends always on the holiday season and all of that Monday Tuesday every single week. It's it's spiking, uh which is really really cool.

D

Just to recap, on the latest related on the guidance and especially now that this week we're rolling out the Microsoft uh Viva home. That is a new experience for teams and to really optimize the mobile experiences and desktop experiences.

D

That's now rolling out to targeted release, tenants and then, eventually, in later this quarter, uh it will roll out to all of the tenants, and you can actually extend the fever home also using SharePoint framework and building those ace cards, and we do have this learning path available for you to take advantage of that and learning how to do things following slide. Not the massive amount of updates here, 1.60 one is the latest version for production usage.

D

1.17 ETA is in the first quarter of this year, we're looking into getting a better version of that one out later this month and then the ga will happen in March 2023 for 1.17. So a lot of a lot of different improvements, technical platform upgrades and all of that in that version, more details, as we start pulling out capabilities.

B

Thank you Visa, so we have a whole bunch of Open Source projects and we want to keep you up to date with them and to get started. uh Let's talk about pmp.js uh pmpgs is a library that helps you make API calls super easily get access to data and all sorts of cool things if you've ever had to hand write these functions. You know why the pmpgs, client-side library is awesome and to talk about the updates. Here's, the father of the patterns and practices, JavaScript, library, Patrick, hello,.

E

uh So we've got version. 3.12 is coming out this Friday February 10th. We're really excited about that. We got some great updates on documentation.

E

uh Some bug fixes for uh some unhandled promises rejections uh as well as uh updating and fixing typings for site data so requesting sites, uh site collection, information, that'll, be typed now uh as well for git document libraries, which is exciting, we've got another request, digest fix uh I've had no idea how many people leave tabs open for 30 minutes or more, uh but I think we've got those all resolved now and then uh we've got a create group for site method.

E

uh Example is coming out as well as a few other little bug fixes, and things like that that will be in changelog. Do not forget about our nightly builds. You can always install those. Those will have all the updates that were checked in uh up to it, including the previous day. So that's a great way to try out stuff or unblock yourself. If you happen to be waiting on a specific fix from us, that's all I've got. Thank you so much Hugo and good to be back for a little bit. Talk to you soon.

B

Awesome sorry I was busy closing all my tabs all right to talk about uh the CLI for Microsoft 365 and that's a command line interface that allows you to interact with your Microsoft 365 tenants. We have our friend Gary Gary.

F

All right here you go. Thank you very much, uh so updates for CLI uh we've had a new release, so the slide is not that much different to last week and but we've got tons of of commands that have now been added into the the latest uh release.

F

So if you, uh if you want to get new commands for OneNote, Power, Platform, SharePoint purview teams, and some in that, we've got some new things on the way, some some things that um is going to be really exciting, something um that's called CLI context and we've added some new commands there. That's something that's going to be coming, we'll we'll give you some uh documentation of how that can be used to make using the CLI even easier. And so, if you want to get the latest package, you can go and get that from npm.

F

Just use the latest tag, and also you can use the latest uh tag as well. If you are using our Docker container and all the release notes are available in our release, and one thing I did want to mention this week is we're already. In the the ninth day of the month, we have 18 new commands already in the next beta version and which is incredible.

F

um So, if you're wanting to check out what the latest is go along to the repo and check out the the new latest version- and that has basically happened because of the contributions from the community and one notable uh contributor Nico declare has hit his 100 PR's uh pull requests for the CLI, which is absolutely incredible, because it's only been working on the CLI for about six months uh to put in context. Waldek who has been working on this for about five years has over around 500.

F

So you can see how many he's actually done it. It's it's absolutely incredible! So thank you very much. Nico um okay. So we have a new release. uh Two new releases actually of the Microsoft graph developer proxy. This is a command line tool to help you test your applications that use um any API, so any API, SharePoint, apis and graph apis as well use the tool to simulate throttling scenarios, simulate errors and responses without actually touching any of the the apis.

F

The proxy does the hard work for you, so in version 4, which is our latest released. We've made updates to the console output, and so we've made that a lot nicer to uh to read and we've added guidance for um for Microsoft graph, beta endpoint detection. So if you're using beta endpoints in your app, we will show you guidance as to why you probably shouldn't be doing that and we've also added functionality.

F

So you can go and build your own plugins, add in your own behaviors for your own apis as well to the to the proxy um we've released, the our first beta version, so uh 0.5 beta, and that has a number of bug fixes in there. So thank you for people who are giving us uh feedback. It's got a few changes in there as well. um So one notable change is: we've shortened, the name of the executable to uh uh to to four characters.

F

So it's easier to type out and we've added some guidance around paging as well, uh when you're working with graph and all these will be rolled up and released at the end of the month, which you can expect at the end of February. And if you go back to you.

B

Thank you all right. We have a bunch of reusable controls that helps you speed up your SharePoint framework development, uh so we have uh updates with the react, controls and the react. Controls are the one that gain embed in the body of your spfx web parts. So we have the enhancement for dynamic form and site picker. We have added spfx, 116 support and various fixes, and you can find the release notes at the URL provided here.

B

We also have the react: property controls version, 3110, property controls are the ones that you can add in the property Pane and we've updated with spfx 116 support as well as many fixes. We have tons of contributors that are helping with building these controls. We appreciate each and every one of you. Thank you for helping and again everyone is welcome to contribute to this open source, Repository and next to talk about the Viva connections toolkit for visual studio code, we'll send it back to vesa.

D

Yeah, nothing really traumatic here, except we will release a new video series on getting started with your connection toolkit and for visual studio code within I think next week as we're processing the videos- and we took me and David- and that's basically showcasing. How can you use this tool also with any SharePoint framework solution? It actually simplifies development, so you probably want to check it out. It's in a really good shape already.

B

So the modern search uh we are again with the modern search, we're building modern search experiences with flexible web Parts uh lots of questions on GitHub, uh the site, usage or the usage is growing and version. 4.8 is now here. That's the espc22 release you can get to it by following the URL here, but we'd like to thank all these contributors who have helped build this.

B

This is our spfx 1152 update, we've added support for actionable adaptive cards like Viva, and we have lots of release, notes with fixes and new features, and with that, let's talk about the spfx samples, the spfx samples are repositories. Where, again, you can create samples to share with everyone. We have extension samples. We have web part samples. We have two updates.

B

One is a new webpart by Nico uh the chat, GPT webpart, which is very hot right now, and people are concerned about you, know AI, but people should not be afraid of AI, because it's a tool, that's created and controlled by humans to assist with tasks and solve problems.

B

Ai systems do not have their own motivations or desires, but instead follow the instructions algorithms set forth by their human creators, so, instead of being afraid of AI, we should embrace it as a powerful technology that can help us to achieve our goals, and you know that was totally not written by an AI and I for one welcome our future robot overlords.

B

um We also have an update to the Azure application insights dashboard by Kinga and which was updated to spfx 116.. We also have another repository for adaptive card extensions with Viva and to talk about it. Here's David.

A

Thanks you go well not much to share this week folks, but we are always loving new samples. So please don't hesitate to get those in. You can see all the amazing a samples at AK dot, Ms, slash, spfx Aces. If you have any questions, don't hesitate to reach out. In fact we even have a demo of one that was amazing today on the call. So we look forward to that. You go back to you.

B

Awesome and here's my favorite time picture time, uh we'll pass it to vesa to share his screen and everyone you're welcome to turn on your camera. uh Put on a happy face. You know, use it as your alibi show.

D

That you're here, let me animate myself and put the camera on and let me try to find where the themes actually went. This.

B

D

So here we are so here we go. It's always the same mess we still have a few seats uh on the room. I am well I can put the recording on let's wait for a while. Let's wait for a while: let's wait for a while, after a while, I still, while still while I still, while do we get any more people there, we go.

D

There's a few more people, a few more people, let's do some hand waving for crop a key FUNimation out of that again, thank you for joining once again on the community call really cool to see you a big pixelated picture this time. Sorry for not, but thank you for joining excellent local animation out of that as well excellent, awesome stuff!

D

Thank you! Hugo! Let's go to the stars of the.

B

Day we have the stars of the day today and we have two demos uh and first to talk to us about getting started with the spfx form customizer with a boil plate. We have uh Michael Mayo Michael, you can take the screen. Okay,.

G

Good morning, good afternoon, good evening, whenever you are around the world, this demo will focus on some key points that are that matters matter to me. When you start customizing list forms, my name is Michael I'm, a 265 solution developer at one point, I live in a beautiful town, called notes, which is the West part of the France and I contributes to some PNP Solutions, such as CLI for Microsoft CS5 and the PNP reusable controls.

G

You can reach me out on Twitter GitHub and also have my personal site when I share some stuff so list from customization. What was before remember those in the audience.

G

What was it before was about customizing through infopass SharePoint designer and for the luckiest of us through visuals to June, just mentioning uh customized list form and SharePoint should be enough to lose everyone, not in the audience, but not because you don't understand, but exactly because you know what I'm talking about remember when you had the opportunity to crash a whole shopping farm with just a few lines of server side code anyway, good memories, so before SharePoint framework Solutions the package we use to deploy. We are called wsp yeah.

G

It reminds us the good, the good old days and also the worst, because the the wsp could contain a whole shopping site structure files such as list content types fields that choose. We usually relied to your customizations.

G

Imagine a whole package which contains structure and could deployed at once separated by features it's not as perfect as it looks like. But anyway, when you wanted to customize a form, you started with a custom disform.aspx, but also with the dot aspx.cs and the database.design.cs. You have the backend and the front end and the same solution wow.

G

Let's imagine that you deploy the whole solution with your structure with your customization on your sharpen farm, and then you have your product owner. That wants you to add a new field to a custom form which means that you have to add it also to your control type as a custom field and add it to the custom form and you have to deploy the whole new thing so great because randomly you could encounter some bad surprises.

G

For example, the problem regarding synchronization and other problems regarding the structure and you have to redeploy the whole stuff or you have to adjust it. You have to upgrade it. You have to you, you, you are enjoying the moment right now, so this this. This was good memories anyway, before the release of the version 1.15.

G

If you wanted to give users some specific interactions with your list, you could do it through web paths that you could deploy as an app application pages. You play with query parameters, or you could also include a new solution. The legacies came out at XML file, which could which includes the list declaration and also properties regarding the URL of the different form States edit new and display form again. This was not supported by Microsoft, even if it was working.

G

I remember one year or two ago, a Community member made a demo that was using this approach, and it was why it was it was working anyway, starting from 1.15. We got a new extension called form customizer, which works by being hosted on a specific page and for which you have to link to a content. Type, so at its work you have a specific hosting page, which is called as per list formed at aspx.

G

It's the same way that, uh as the the one you use when you deploy a web part as a team's personal app, which is hosted in a specific page, then you can associate the component with less content type documents that content type other content type hub.

G

Then you have some specific events that are available through the phone customizer lifecycle, the demo. The important thing here is that when you just get started customization, you only have a few things in your hands to work with your list item and when you create your first form customizer and run it locally. You will see that the interface is really poor. You have quite nothing available in the interface and it is displayed like this.

G

Here we have only the mg65 bar the top navigation or sharepoint.navigation, and this is the content of your custom form. So in terms of experience it can be frustrating.

G

Let's see, um how does it work currently with a list for the demo? This is based on an existing list, template which is available. uh When you create a new list, it's called the employee on boarding. As you can see, we have the SharePoint a bar. We have the common bar here. We have the separator the breadcrumb when I click on new I got on the right panel, the the the form the list form available here and when I click on the existing item. I got also the right panel display here.

G

I can go from display to edit state, and this is great Okay. So when we saw the default interface and then the default customization here, let me show you an example of some phone customizer that I already that I'm already running locally on my computer.

G

And here we are okay, so except the uh SharePoint up bar that isn't provided by the spls form hosting page. uh We produce the command board separator and the breadcrumb. Also you can see that we I have all my fields that are available. I can save, I can cancel it and we are some parameters that are really important during the customization. Well, first, the debug manifest file. Here we have the component ID.

G

We have also the page type, which indicates the state of our form, which, which is the display, display new or edit States. We are the related list, relative URL we are coming from and we have also the ID, because we are currently working with with a list item. So let's have a look now at the code.

G

Here we are in the extension declaration class some information provided by the context that are specific to the to the form customizer, where, for example, we have default the info where the list we have the item id the item and the item is specific to the 1.16 version of a shop and framework, if I'm not mistaken, and we also have other information regarding the form customizer context, such as the display mode.

G

So, like I said we got here the information if you are in edit display on you and based on those information, we are creating a new list, item object or loading, an item, logical item through pnpgs. We are getting all the fields that we need to to interact with. We are saving the e-tag e-tag is the unique identifier associated with a list item State and which guarantee that if you submit it, when updating a list item SharePoint online will give you two responses.

G

Two possibility of response. The first is: uh okay, you've got a new e-tag because you update the items of the e-tag has been has been updated or the the item has been updating in the meantime. By someone else, so you got a concurrency here, HTTP error code, which indicates that you have to update first your item before submitting it again in order to get the latest e-tag version, then I'm clearing some odata info that I don't need to, and my item is ready to be sent to my form, customizer components.

G

So in this component a very interesting things to to show we got the command bar the separator, the message bar and the background which are available to for display to to keep consistency with the user, the SharePoint online user interface. We also got G.

G

On click, edit item method, which goes from display state to edit state by just changing the query, parameter page type and I, don't think that there is something that's very visual method provided by the phone customizer context to easily let us going from from display to another so going through the your research programs.

G

um Then we got here on the submit, save item I'm going to just get my item properties states to sending them to my extension declaration class and I can also handle error during the saving process. Like, for example, I said the concurrency issue. When you're working with the e-tag, you can get a 412 error status code and display an appropriate message to your user or display another message depending of the error source.

G

If we go back on the extension class saving method here, I'm just clearing some information regarding person Fields, because we are not working with this the same way when we are getting the percent fin or and updating it in order to be sent for saving so removing this video in order to avoid an entity set error and then updating my list item or adding it here and during the updates I'm sending also the etag I saved before now notice, two methods that are provided by the form customizer context, which which are form saved and form closed during.

G

When you are debugging Your solution. It won't behave in the same way as when it's deployed. If I take the example of the form closed here, which is called when I'm clicking on the console button, as I mean debug, I'm debugging, my solution, if I click on cancel I'm, going back to my shopping home sites, instead of the list I'm working with, which can be a kind of frustrating and the same for the save button.

G

So, to prevent this I've I'm, using a global variable available in spfx, which is called debug and a fam and debug in the debug state I'm, just getting the new e-tag value following my updates or addition and saving it.

G

So I can so in order to perform multiple savings during my debug process and, of course, if my solution is production, I'm, just referring to the form, State and focus which will both redirect to the list I've linked my form customizer to okay, we saw that we got a form, a custom form with all the fields that are declared here, with with also each field its events during changing to that estate Etc, which can be heavy.

G

There is another approach that is provided by the community here: I can just K, which is the dynamic form coming from the pin period, control I'm, going to update my code so to refresh also the user interface and during the the rebuilding process, we're going to have a look at the the pin control. So, as you can see, there are a few properties that are required and context.

G

The list ID the system, ID and events regarding saving closing an error during error method, which are provided on the submit error, full sum and Link the error 1K and during the saving process, but I just have to mention my extension declaration class method and save and close that I showed you just before, and that's it going further.

G

Just have a look at the how to deploy once everything's ready, so there's no user interface to handle the synchronization between your components and your content type. So once your app is deployed on your site, Collision catalog, or to not app catalog and of course you have to install the extension on the target site, you also have to get the content type of the resource. You want to associate your component to so here.

G

For the example, it was to the default item, content type, so for my list, employee and boarding, and see that I have my custom form component ID, which is a link to my three form, States edit new and display.

G

Just to sum up a better Dynamic form that I wanted to point out that it's the it's an easy way for this: pin this reusable control to handle the all the fields, because it's generated dynamically from the structure and starting from this, you have access to all your form and you don't have to worry about if the required fields are filled or not, which brings Quite Comfort.

G

But you have to you can't handle the buttons as a common bar like I, showed you before, because it's directly included in the diamond form, and the other thing is that for now the e-tag isn't handled in this control. But in the next few days there will be a new property and that lets you decide if you want to take the e-tag in consideration or not, which is quite great but okay. Let's say that I want to link my content type.

G

Let's hope that everything's will find okay great. So now, okay, so it doesn't work, that's great, but if I just perform a refresh and I hope that it will be fine if I click on new.

G

I got now my phone customizer linked to my list and, of course, if I click on Console I'm going back to my list if I click on an existing item, a majority to the display form and if I click on edit.

G

Now now the switch is automatically made, which is great Okay. So don't forget just to recap so, like I said to where is this, this user interface thing that is currently not provided by the SP list form that aspx but I assume that in the near future, this will be replaced by the panel thing on the right, like it's natively used.

G

So in the meantime, just consider that you have to produce some key points in the user interface to keep consistency for your users also make the distinction when you are debugging versus when you are deploying the solution, because it's not the same behavior when you're, using the redirection methods provided by the phone customizer etag.

G

Is your friend like I said because it's really something important according to me when you are working with list forms and if you want to be sure that your users get the latest version and don't override what your colleagues are working on and, as you saw uh there is the possibility to link a different form, different extensions for different form States.

G

But it's not because it's available that you should do it just saying and to finish here are some links that will be provided in the chat you have to getting started with the with the Microsoft learn documentation.

G

You have the article from which I I made this demo and also the source code, the documentation, I write about the dynamic form, PM periods of the control and, finally, a nice video made by Paulo about going further with the dynamic form, because it's about overriding the fields that are automatically generated in the form and that's it for me. Thank you for your attention.

B

Fantastic, thank you and thank you for the the trip down memory lane there at the with your introduction. I definitely had some uh some shell shock there. All right now.

C

B

Talk about uh consuming search API in adaptive card extensions, we have Martin, hopefully I, didn't butcher your name.

C

Hello good to be here, lovely to see you all. Let me share my screen. I do have PowerPoint presentation, but I'm too afraid to be honest to hit that five on this one. So so I could lose something context, respect to myself faith in my office skills. Let's keep it as it is search adaptive card extension. What will tell you this is what we will talk about. First, a few words about myself: I! Imagine you can find my LinkedIn Twitter he listening to my GitHub. If you find this interesting, maybe I didn't start to I.

C

Do you will also find interesting introductions aside? Let's talk about, why why anyone would like to play around with searching ace and I strongly believe that first of all, adaptive cards got quite a lot of traction. Last year it's a big investment from Microsoft the whole Viva stories with shaping really nice people, whether the context of comprehensive solution and, of course, it's significantly faster than um let's say well, but would do which would do the same thing.

C

So another good thing. A good point in using adaptive cards is that we can actually expose our ascensionisms. Almost natively in Mobile, that is almost because we know there is actually a big bridge and uh useful technical details back to end User. It's effect, ively native mobile experience when you can use Ace and you can actually call search uh support for the new and the lovely feature, maybe not so new. For me, it's still new and lovely, so new Viva from experience on on desktop and finally necessary, relatively simple and relatively easy solution.

C

So, even if you not want to copy the sample and use it somewhere, it's really easy to actually Implement something like this yourself, which I hope I will justify in a second. So how to do this? We need such API client, and the key is that this client needs something like set query.

C

This is a little bit more implementation related. Nevertheless, that's the key. We need set query to give you all. That will be some heads up, because you can use both sharepoints Central API and you can use a graph search. Api I tends to use Graph Search API only because in the lab, search, API I believe has much nicer a response model, so you don't have to go through that key value, at least to actually extract your objects from the search results.

C

This is by go with graph API sense, but, to be perfectly honest, SharePoint API will be a little bit faster, but, on the other hand, we'll have a bigger response. So whatever you feel like both are absolutely fine. Once we have that we need to actually create adaptive card extension. I didn't pay much attention to be honest to the card itself. I focused on the quick view, and in that quick view we need to Define our search input and our search button.

C

Finally, thanks to rang, I was able to implement or actually copied from his solution, a very lovely, a quick view to actually render the documents that are the results. And finally, it would be nice to have some kind of navigation events and by navigation events, I mean. If you don't like the query. Rented you go back. You can enter different query without closing them.

C

uh Without closing that they have a quick view itself, so that's it and finally, you have to enjoy yourself implementing something like that and I see I've been talking for over three minutes right now, only with presentation. So this is the time we hit the demo lovely. So, let's take a look at what we have here and here we do have new beautiful little home experience and, as you can see, I have two search adaptive cards here. One is just a generic search and the other is new search.

C

If I want a quick view, I want to find some test documents. Normally, let's search, we have some test documents, I click test and I'm. Opening that native lean themes. What a lovely lovely thing let's go back, let's say: I want to actually look for some news again. This is my testing for environment, so documents in the user usually test named test.

C

As you can see, we click it and we got navigated to you so as you can see one adaptive card, but quite versatile, quite a lot of quite a lot of contamination. We can do. Let's take a look on how we can do it.

C

This adaptive card has just some very simple thing called initial coil initial query is something that will be applied or appended actually to user query. Here we have just. We are looking for documents, but not aspfx files, and in that case we are looking for specific content type. Not so nothing too crazy, I believe as a final step, because I believe now them of mine will be fully completed without some proper hacking and something a little bit unsupported.

C

Let's say we would like to debug stuff directly in the new experience.

C

If we want to do that, we hit F12 as usual: let's inspect our lovely home experience and bear in mind at the end of the day, this is actually new beautiful new page in SharePoint, hive and I have my new teams snippet right here. It is available on my GitHub I believe run, and here we have login in method called debug page debug page, and here we go now you're actually selling our world adaptive cards from from localhost lovely.

C

We like it now, let's dive a little bit deeper into the implementation, details and I believe I, have it here and already properly zoomed in I hope the zoom is correct. Yes, yes, yes, so the Adaptive current entry point so self-adaptive card extension.ts. Of course, this sample is also available in the Adaptive card, PNP samples.

C

So you can walk through this on your own. What is happening here is first of all, we are building graph, client and I mentioned. We need some kind of search provider here, I'm using search provided from my LPM Library I'm, not sure if we want to go too much into the details, just maybe to show you roughly how it looks like we have that set query method and effectively it abstracts away all the building of Century, Quest, pagination and I believe. That's it nothing to special.

C

Let's look at the data provided we have to register our quick views. As you can see, the current is just out of the box can't view, but we have quick view which is the out of the box quick view and essential results, quick view. The important thing here is.

C

Here, nothing, nothing too too fancy the trick is: let's go to the quick view. It's very simple. What we are doing is on action. So when we click our Etc, maybe I should actually search shows from the search works and then indeed that input. So we have input. We have sub bit button when we click that start bit button. We are setting the query to our data provider.

C

You can see here is this data provided- and this is something I also highly recommend to play around with, because every quick view or to be honest, everything you the life, you had it from a base. Adaptive card you can play around with dependency injection here, just to clearly clear up stuff, a little bit more play around with simulation of concerns.

C

So we have our data, provided here we said query we call get data and then, when the data is obtained, we set our state of adaptive card extension and we use crypto navigator to push New View, then start new view is live somewhere here in a quick view, whether we are just pass to our adaptive card, the results which are currently added to State object.

C

Now, if you're interested in templates preview template very simple stuff, as I mentioned, we have one input. We have one option: nothing too fancy when it comes to the search results in this a little bit more complex as I said: I, wouldn't do it myself. So once again, so thank you very much. We have some columns images, title I, believe last minute find location and just modify date, and here the only action is Select action, open, URL and that is effectively eat, open, URL, lovely and I believe that will means.

C

There is only some few words to finish up, because few importantities I might have missed quickly. Navigator object very nice, highly useful, uh as I mentioned I'm using my own language like this, for the search client, but if you feel more comfortable with pnp.js, if you want to just call search the direct using a speech, TPAC client or graph Gap client, whatever works best for you and as I mentioned, that initial credit property can significantly change the context of our search because my limitation was effectively.

C

But my imagination was a little bit limited by my own experience. My experiences I either would use on documents, but you can imagine even by getting to our search search by search. Do you remember that correctly? Yes,.

C

We can look for five sides: people news images whatever you like, you can actually have a nice search with relatively nice and adaptive candy a little set. Okay.

B

C

So I believe that would be all from my side as always clever being here. Thank you very much.

B

Thank you that was great and I like how you're saying you know it was very simple when uh you know it doesn't look that simple, but uh thank you for making it uh simple for us all.

C

Right I was told, I might be a little bit dismissible when it comes to complexity. So this is why, if benefit was not clear, don't hesitate to ask I love talking about the code.

B

No, it was, it was fantastic. Thank you. So thank you again for both our our demos today, uh Michael and Martin. We really appreciate your contributions and we look forward to looking at code I'd, like also to thank everyone for attending the recording will be available within 24 hours on the Microsoft 365 Empire platform. Community YouTube channel do not try to click on the uh the recording in the channel because you have to be a Microsoft employee to be able to access it, and so I'm.

B

Just saying that in advance, uh you can follow us on Twitter at Microsoft, 365 Dev and at m35pmp, and our next Viva Connections in spfx call is on February 23rd. Our next Microsoft 365 Empire platform call is on February 16th and you can find all the community calls at AK and mess Community slash calls and with that, I would like to wish everyone a great day and look forward to seeing you again thanks. Everyone.