Microsoft 365 Community Viva Connections & SharePoint Framework, 23 Mar 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Viva Connections & SharePoint Framework Community call – 23rd of March, 2023

Description

Viva Connections & SharePoint community call on March 23rd.

Three demos: Building advance interactive world map for business information with SPFx, Creating Viva Connections extension with user presence status using Microsoft Graph Presence API and SPFx, and Exposing business data in Microsoft 365 using Azure Data API builder and SPFx.

Six Releases: SharePoint Framework (SPFx), PnPjs Client-Side Libraries, CLI for Microsoft 365, Microsoft Graph Developer Proxy, Viva Connections Toolkit for VS Code, plus 3 SPFx and 1 ACE sample, 2 conversations.

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
06:50 – SharePoint Framework – Vesa Juvonen (Microsoft) | @vesajuvonen
08:19 – PnPjs Client-Side Libraries – Hugo Bernier (Microsoft) @bernierh
09:00 – CLI for Microsoft 365 – Garry Trinder (Microsoft) | @garrytrinder
10:34 – Microsoft Graph Developer Proxy – Garry Trinder (Microsoft) | @garrytrinder
12:02 – PnP SPFx Controls – Alex Terentiev (Microsoft) | @alexaterentiev
13:33 – Viva Connections Toolkit for Visual Studio Code – Vesa Juvonen (Microsoft) | @vesajuvonen
14:07 – PnP Modern Search – Hugo Bernier (Microsoft) @bernierh
14:35 – PnP Samples - Hugo Bernier (Microsoft) | @bernierh
15:04 – PnP SPFx ACEs Samples - David Warner II (Microsoft) | @DavidWarnerII
15:39 – Together mode picture – Vesa Juvonen (Microsoft) | @vesajuvonen
16:38 – Demo – Building advance interactive world map for business information with SPFx – Sergej Schwabauer (Aurum GmbH) | @spfxappdev
29:17 – Demo – Creating Viva Connections extension with user presence status using Microsoft Graph Presence API and SPFx – Yves Habersaat (Sword Group) | @yhabersaat
39:44 – Demo – Exposing business data in Microsoft 365 using Azure Data API builder and SPFx – Davide Mauri (Microsoft) | @mauridb & Paolo Pialorsi (PiaSys) | @PaoloPia
56:24 – Closing

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

A

B

To the Viva Connections in SharePoint, freightmore, bi-weekly sync, my name is Hugo Bernier and I will be your host for today's call. We have a busy agenda. We have the latest updates on SharePoint framework. We have our patterns and practices updates where we'll go through the majority of our of our initiatives and talk to you about what's happening. We'll have picture time with together mode where you are welcome to share your camera and we'll do a cool picture with that, and then we have the best part of these calls.

B

The demos we'll have Sergey schwabauer, who will talk about building Advanced, interactive world map for business informations using SharePoint framework, we're going to have Eve habersat? Who is going to talk about creating Viva connections, extensions with user present status, using Microsoft graph presence, API and SharePoint framework, and finally, we'll have navida Mary and Paulo Pia lorsi, exposing business data in Microsoft 365 using Azure data, API, Builder and SharePoint framework.

B

Hey I see a theme Here all right and if you want to stay up to date with what's going on in our community, you can attend our Microsoft 365 and Power Platform Community videos, and you can follow the links here at aka.ms, Community videos. You can also go to our LinkedIn groups for discussions. You can go to our open source initiatives which are all located in GitHub, and you can contribute to these initiatives.

B

You can also visit our sample Galleries and now we have a lot of sample galleries, but they all roll up under one place that aka.ms slash Community samples and we have our total open source initiatives and samples. If you don't want to remember all the links that we've listed before or shown on the screen, you can just go to one aka.ms, slash, Community, slash home and speaking of community and Community calls. We have our Microsoft 365 Empire platform. Community calls coming up.

B

We have a weekly series with Microsoft presenters called the Microsoft 365 and Power Platform, and then we have our monthly Power Platform Community call. We have our Microsoft identity platform monthly call. We have our office ad in monthly call as well as, of course, the Microsoft 365 and Power Platform Community call, which is bi-weekly and the Viva Connections in SharePoint framework by weekly call you can get all the recurrent invites and they'll show up in your calendar at aka.ms. Slash, Community, slash calls.

B

And speaking of community calls, our next call is going to be the Microsoft 365 and Power Platform, which is again run by Microsoft speakers on the 28th of March at 8 A.M Pacific time, and we're going to have the latest news from directly from Microsoft engineering on the Microsoft 365 and Power Platform topics we're always going to have our community together mode and we'll have demos by Luca, bandinelli, John, gulian, Alex trentiev on dspfx 117 release.

B

What's new and what's there money was, is also going to talk about the kyota SDK generator and Gary crainder is going to talk about deploying a teams app to Azure, using teams toolkit for visual studio code and, if you're interested in speaking at any of these Community calls you can request to present. Everyone is welcome to speak at our community calls.

B

If you have something cool to share, we would love to see it so go to aka.ms, slash, Community, slash, request, slash demo, we like our slashes, and you can actually uh just tell us a little bit of what you want to present and you too could be a presenter at one of these calls.

B

Now, if you are interested in presenting or you're interested in contributing to some of our samples, we have some guidance to help you on how to get started and to talk about this. Here's, my friend David.

A

uh No, you covered it. You go back to you, I'm just kidding everybody all right, yes, sharing is caring. What is it it is live? It is Hands-On. It is safe space opportunities for us to work together more and, as you had mentioned, it is here to help you do more in the community. That means contributing a pull request on GitHub if you've never done a pull request or if you're looking to demo on these calls, we've got some first-time presenters all the time we want to support you, so these are always getting scheduled.

A

We've got more coming up in April, we just retooled our first time contributor uh beta tested it with some MVPs. It is really going to be great. So look for new dates for that in April and May again, safe space. We don't record these sessions and so you're free to ask any and all questions that you would like now, once you have contributed to the community in a plethora of opportunity, ways: yep I just said: opportunitable made him making words up.

A

You are going to be recognized for that in the community recognition program powered by credly. Yes, that same cred leader gives you those badges. When you get certified, we got them too, and we want to recognize you for the amazing stuff that you're doing in the community in a variety of ways, we're always coming up with fun new themes as well that are uh calendar based and short term, so that you can have a lot of fun with us in the community. Just need you to opt in for this AK dot, Ms, slash recognition.

A

Excuse me slash, Community, slash recognition. I only need to do that once and we're also setting up some new ways for you to be able to tell if you've already opted in, and we will ensure that you are recognized and taken care of, so don't hesitate, check out the AKA Hugo back to you.

B

Thank you David, and we have a few upcoming events, uh pening and I believe this one uh Visa is going to talk about and if he was not planning on talking about it, he now knows that he's talking about it. Yes,.

C

I know that I'm talking.

B

About it, so next.

C

uh Is this, this is actually I'm double checking the date uh it is on next Wednesday at a 9 A.M Pacific time. There's gonna be a special event where we're going to talk about extending the Microsoft teams application uh across the Microsoft 365. uh This is something which we talked about a few times in the past as well, but there are new announcements which are kind of really shared within that event, of course it's recorded and it will be available uh on demand later on now.

C

The next slide also, we want to call out uh the the Microsoft 365 conference happening in early May and there is a huge lineup on the Keynotes there, uh just to make sure that everybody is aware that there's going to be a new announcements and the best cvps and precedence in Microsoft are flying over to Las Vegas in May, 2nd, May 4th to talk about the latest Empower platform, Microsoft Diva, Microsoft teams and SharePoint and and again it's just a recap- a lot of a lot of new stuff uh related on co-pilot, open Ai and all of that stuff is going to be talked about within that conference.

C

Then we go to the SharePoint framework now, on a SharePoint framework side, uh just to call out we had a small data outage uh pretty recently on the stats. That's the interesting bump on the top right left corner but all-time highest usage data usage is currently in 20th of March, which is great. It's awesome to see The Continuous growth worldwide, where spfx is being used across the Microsoft 365, so not only on SharePoint, but also Microsoft teams and in the Microsoft Diva. Let's go to the following slide: 1.16.1 is the current the in production version.

C

We did release beta 3 of 1.17 and on Tuesday this week and it's expected to go to GA within upcoming weeks. I would say two weeks to two to three weeks: we're heading to release to 1.17 and that will include updates uh on the Microsoft team side, also in Microsoft Viva side, technical updates on dependencies and and a lot of other small, uh smaller updates here and there plus issue fixes.

C

Now, next Tuesday we will go more detail on a code level and with live demos, to show you what are the all of the different features and capabilities in 1.17. So that's on next Tuesday's Community goal at 8am Pacific time. Let's continue Hugo on other topics. Thank.

B

You we have many open source projects in the Microsoft 365 and Power Platform community and to talk about it, we have all the people that are helping with these initiatives and the first one to talk about is the PNP JS client-side libraries.

B

So we have the version 313 that was released on March 17th, where we've added the get current memberships and the new publishing site Pages import that we fix the typing issues with as cancelable wrapper and drop references uh to in stream, dot d dot TS, and we fixed this set stream content chunks to fixed unhandled promise.

B

You can actually go, get all the documentation on this on pmp.github.io pnpgs and make sure to follow us on on Twitter at M365 pmp.js, and our next is to talk about the CLI for Microsoft 365 and to talk about this is our friend Gary.

D

Thank you Hugo, um so yeah we've got new Beta release of CLI for Microsoft 365, so this is 6.4 and we've got new commands for planner power, automate, purview, SharePoint and also SharePoint framework. So we've added support for upgrading new projects to the latest uh Beta release. So if you want to test out your SharePoint framework projects on the uh on the latest version, then the COI is the easiest way for you to do that, but we've got lots more enhancements and updates as well. So please check out the release notes for all the details.

D

If you want to install and run the new beta, then just use the the at next tag from npm or the next tag on on Docker as well.

D

um Please, uh if you not use Clive, Microsoft 365, yet check out our docs, uh follow us on Twitter CLI Microsoft 365. join our Discord um as well uh through our new short link. It's a bit easier to remember this one AKA dot, Ms, slash, CLI, hyphen, M365 Discord, and we're really excited that the community is growing and we've seen lots of activity on there as well. So if you've got any questions around CLI, that's the place to post them and I'm sure you'll get to get answers.

D

um If you're using the CLI and you've not hit that star button on GitHub, then please go and do that now. So Microsoft graph developer proxy updates.

D

um So we've not got an update this week, but just to remind everyone that we had uh 0.5 release uh at the end of last month, which included a new recording mode and execution summary as well. So when you're doing the recording you get nice output of all the activity and requests that the proxy has intercepted made it easier to start the proxy by reducing the name of the executable down to four characters.

D

um So that's less typing for you to do and we had lots of other bug, fixes and internal improvements as well as we go through the iterations to to our V1 release and but at the end of the month. uh Well, next week we have the next release coming up, so that'll be zero.

D

Six uh with upgrading to.net, seven uh looking at CI, CD and playwright support, as well so being able to use the proxy to InStep requests and and add some chaos into your UI testing using playwright and also adding more guidance for rate limiting paging and client request IDs as well, and so, if you're interested in testing your applications against apis, simulating throttling errors and responses. Go check that out and you can get the the latest version. Aka Ms, slash graph, slash proxy, slash, download back to you. Hugo.

B

Thank you. We also have a set of libraries called a reusable spfs controls that you can use in your applications and to talk about the update. Here's a man who actually sees the world as a bunch of reusable controls, uh Alex trantev Alex.

B

E

You Hugo so yeah uh if you're not familiar what is reusable computer spfx controls, they help you to think about business, Logics more in your spfx Solutions and not about the UI. You can just import the controls to your solution, reuse them and in most cases they will look similar to Out of the Box UI provided by the Microsoft. Currently we are on version 3, 13 0 for react, controls and 3 12 0 for react, property controls. uh We had a bunch of uh fixes in these latest versions and some new controls as well.

E

uh Next release will be after uh spfx 117 to support 117 uh special thanks to all the contributors who made these releases possible and feel free to contribute as well. If you see some bugs in the controls, please submit issues in our repos or, if you feel comfortable, please is create aprs, with new enhancements, fixed boxes and so on and so forth. Thank you very much and back to you, Hugo.

B

Thank you Alex. So in case you were wondering gee I haven't. We haven't heard from vesa in a few slides. Here's vesa to talk about Viva connection, still kit for visual studio code, I'll.

C

Be super quick in 10 seconds because we're running out of time for the demos so viewer connection toolkit the latest here- is that we released in the late new version of the video series, so at akms forward slash Viva forward, slash vs code for restless videos. That's me Hugo and David showcasing. What does this extensibility provide? So we would love your feedback. Is this useful or not? So we know that if the engineering should be investing on this kind of a tooling for Viva development and spfx development, so please do let us know.

B

Thank you. Our PMP modern search is a series of flexible web parts that you can use to build a modern search experience. So we have a version 4.8 available and we are looking for contributors. So, if you're a programmer- and you want to look at our issues list, we welcome your pull request and you can go akms, slash, PNP, Dash search and speaking of contributing to open source repositories. We have spfx samples with extensions and web parts. We have an update to the birthdays web part by valeras narboutes, who updated it to spfx 116 1..

B

We have an update to the page, Navigator baterman mujahid and we have a new webpart called devops tasks which actually shows your tasks in Azure devops. We welcome your contributions and you will get a badge if you contribute to the spsx webpart samples and to talk about the spsx ace samples. Here's my friend, David awesome.

A

Thanks and uh yeah Amery has brought one to us this week, most like Pages, very, very cool allows you to kind of see what is the most like some of the details behind it uh being able to use the benefits of those Aces or adaptive card extensions to compress the information, but it didn't expand it later when you want to see more detailed information. So thank you, Amy and, of course, we're looking forward to a demo today that was highlighted a couple weeks ago on uh the graph presence.

A

So uh thank you all again badge contribute back to you. Hugo.

B

Wonderful, thank you. David and I've been making my hair pretty for the picture time. So, if you want to participate in picture time, you can turn on your camera. We'll grab a snapshot and we will post that in social media to show how awesome this community is and.

C

Absolutely uh yeah yeah yeah I'm here I'm here I'm here I'm here you can see my screen there.

B

We go there, you go.

C

It took a while, so here we go and let me put the computation on um I'm.

B

All waved out now, though,.

C

Yeah I I know, but I haven't I'm, not recording, wait, wait, wait, wait, wait, wait! Wait! uh Now, let's put the recording on uh three two one and I will put the the camera on as well and let's wave excellent, everybody is getting excellent. That's more than five seconds for the gift animation. Awesome! Thanks everybody for joining and let's move to the demos of today, all right and.

B

For the best part of the day, we have demos and our first speaker is going to be Sergey schwabauer.

F

So um hi, my name is Sergey schwabo and I work as a lead developer at Autumn in Nuremberg, Germany I have more than 13 years of experience in SharePoint development and recently I started a Blog where regularly write and publish my Solutions spfix app Dev I would be happy if you visit my website and today, I will present my spfx web part interactive. The world map I will go to uh the ID in the Highlight. What packages I use and then show a demo before giving a summary. Okay, let's talk about the web part.

F

As the name says, this is a web part that displays a world map. Now you might think wow Sega, that's nothing new. It's already exists by default in SharePoint. Yes, of course it is, but the default Bing Maps Fair part has very few configuration options. The only possibility is to define a label and whether it should be displayed or not, and, of course, the position or address itself. Here you can see the standard webpart looks like so everyone understands what I mean. My web part has the following features place as many markers as you want.

F

Shell, marker tooltip on Hover, configure, pin color, icon, color and icon handle the click event, Cloud, study, markers change, the look and feel of the map, style layer, Define marker categories and show the The Legend for the categories make the map, aesthetic, Define, the start, location, page load, configure map, Zoom settings and so on. This is um how it looks like before I show the web part I would like to briefly describe the techniques I use.

F

The web part was developed with spfx 1.14 I use, fluent UI components for the map itself, open street map and the well-known leaflet.js Library cauliflate, and there is a react package and also I use the leaflet plug-in marker cluster and the reactly flat marker cluster package and then PMP controls and property controls.

F

All markers are stored directly on the web part and not in a list or something similar for the whole webpart I invented about um 24 hours and the code itself. There is nothing really interesting or cool or special to to show because, in my opinion, it's a normal web part. Therefore- and we come directly to the demo on this page, you can see my pre-configured wrapper. I have simply mapped a few Microsoft locations, one for each continent. Here you can already see how the cluster looks like this one or that one.

F

For example, if you click on this cluster, you will be taken directly to the this location. That way, you'll see two markers one shows the headquarter and the other one another Microsoft location. Here you can see that the I can differ while the headquarters I can custom configure the other one uses a category. The advantage of categories is that they only need to be configured once and then they can be reused. If the category is customized, all markers that use this category are automatically updated.

F

In addition, the category can be used to display the legend like that. um The marker, in this case, is set up to to open a dialogue. This that displays um SharePoint page.

F

This is an embedded iframe, the dialog or the page behind. It also uses this web port. Here you could write, for example, more information about the location. The map should be used more as a header in this case.

F

That's why I configured it that the map is static. That means I can either zoom in nor move. So it's nothing happens if I, zoom or a tracking drop, although all buttons like search, Zoom or Legend, are hidden. The header has become very large here, I know. So, let's look at the marker for Microsoft Germany.

F

Here, as of the page, was opened in a dialog and as you can see, the map of the or the header is a bit smaller here um here. I have additional configured the marker as a panel. If I click on the marker, a panel is shown, the content of the panel is configurable, of course, there's only one of many possibilities that can be met with the web part. Others could be, for example, marking all customers on a map plan the next team event and show the meeting points, including the information about it and so on.

F

Now, let's see what configuration options are available for this I place, a new web part on a new page.

F

The web part is called interactive map and the web part can also be placed in a pool with them by default. If I create a new record, London is visible because some will have latitude zero. Let's leave that specific. If you want to set the location somewhere else when loading the page, you can easily Define this to do this. We go to the location we want and right click on the map. For example, let's say we want this: this View, then we click right click and say make this view as start position.

F

The position that means latitude and longitude and the zoom level will be saved. As you may have seen. You can also create a new marker by clicking clicking right click. Let's try.

F

The configuration of the marker is simple. You can either choose a category or Define each marker individually. You can Define what should happen when the marker is clicked. If a panel, a dialog or a URL should should be opened or if nothing should be happen at all that one, you can choose the pin color.

F

F

And the icon, color.

F

Here's a preview Additionally, you can define a tooltip text.

F

This will be displayed when hovering over the marker and depending on which type you have selected. You can also Define a dialog and a panel content panel header panel content is this: is a PMP Rich, Text control and same for dialog, because for the URL you can also Define how the link should be opened um in the same window, new window or embedded as an iframe.

F

um If you have selected a category, then fewer options are available because the category specifies the pin, color, icon, icon, color and tooltip. It looks like that so for now, I don't have any categories, but we will create one get one and leave it as it is now. I use this as category and as you can see, I have no other um options to to define the color or an icon, and so on. So, as already mentioned, all markers that use the category are then automatically adjusted when you change something in the category.

F

I would like to show this briefly as simply create more markers and select. The same category doesn't matter where, let's say here: okay and here, okay and now um all markers are black I want to change that. Let's say we use red for now. We save that and, as you can see here, all um the markers have changed the color at the background color of the of the PIN okay. Now how can I delete or move a marker?

F

Just click on an existing marker, for example, this one and now two new buttons are available, delete and change position.

F

The delete button deletes the marker and change position always another way of moving it. um I will show you that quickly change position. You can now move pet, drag and drop wherever you want. When you have the right position, you can save it or, for example, you can. If you plan to to cancel the same, it will be moved back to the to the initial position.

F

Okay, now, let's take a look at the web part settings.

F

First, you can Define how far you can zoom in or out you can also Define the height of the map and enable dragging um in map allows the user to move the map to another position, or in other words, if the option is disabled. The map is static, like in my headquarter example and the header, a page header example. Finally, you can determine if the tooltip should be displayed or not.

F

Now, let's move on the next category eye layers. This is actually a very cool feature because it allows you to customize the map layer. There are many free layers, but um also paid ones. So if you have a map box map, Tyler or whatever provider already you, you could use them here, as we put a link here with some layers um here.

F

I have just an example of layers: let's choose one, for example, open to home app so and then we need to copy this URL and insert it here and, as you can see here, it's changed and you need to do the same. For that attribution.

F

Okay and that's it, it's cool, isn't it the next setting category I have called plugins and controls here. You can, for example, activate or deactivate the marker cluster.

F

Or hide the zoom control.

F

Us here and not visible, there's some control and um additional the search box. The search box is use, I think they open stream API to search for addresses, let's say um version 10.

F

And here it will be attacked you there immediately. The last setting option is about the categories you can manage the categories here as well. The dialogue is the same as for the markers expect. You can additionally show and hide the legend.

F

Okay, um that's it with the settings and basically else with the web part. A quick summary I think you can see that the report has a lot of configuration options. It is available in PMP samples and also my own GitHub repositor. It's very Dynamic and flexible I hope you like it and have fun with it. It's also available for teams. uh Tabs here are the links for repositors and my blog article about the web part.

F

B

Thank you so much. This was a thank you sample, Sergey I wanted to say you know, I I, really like how you've actually used a lot of the PMP controls to make the web part look and feel like it's just an out of the box. Sharepoint webpack. It looks fantastic. Thank you again uh and let's uh move on to Eve we're all ready for you feel free to start sharing.

G

Thanks Hugo, hello, everybody, so today, I will present you um sample that I've made about present API.

G

Just a few words about me before my name is what group, as a consultant so I'm, doing a lot of different things regarding to Microsoft 365 as rural Dynamics, 365, and also a poor platform I'm living in Switzerland uh I'm, a Microsoft MVP, m265 development and uh Microsoft Microsoft certificate trainer also so feel free to reach me out on my social and website. If you have any question or query to ask so for today, I will talk about Microsoft graph presence API.

G

Actually you have a V1 endpoint, but for this sample, uh I took the B type beta endpoint, sorry to have a larger wide of capabilities, and all this API are collected to the user's presence. For example, you have capabilities like you can get the user's presence you can set the user's presence. You can clear the user's presence set a status message and also you can track. You can track the user's presence with a change notification and a little bit more for the available API method.

G

You have a wide range of method like uh to get the presence you can get the presence of multiple users. You can set the presence here. The present you can set in here the user preferred present and also set a user status message. I've highlighted the concept of session of an application that is really important to understand and basically I will describe to you. What is it and basically, to use some of this API method?

G

You need to pass the ID of the present session and basically, what it means uh you can have multiple present session that can be active with email and for specific reasons like, for example, if you are using a multiple teams. Client, if you have the web desktop and mobile client, but also if you have Ace web art or any line of business applications that interact with the API.

G

So for this return you have the concept of present session and each session May, timeout and expire, so the application or whatever it could be ace web part or whatever needs to call the API before the expiration in order to keep the session alive. And if you can't keep the session alive, it will reset to the default status. State.

G

Sorry with spfx, it's a little bit important to understand because, for example, when you are developing, for example, with the spfx latest version you you can use Ms graph client D3 to connect to Microsoft graph API and behind the scene. Zit Ms graphy implements as you can, as you might know, as your ad Pro principle.

G

And basically, behind the scene, the session ID parameter that is required in some method is nothing other than this application, ID or service principle in Azure age. This is what you oh. It works for spfx, just an example of how to set the presence of a user. You have two endpoints me or users in the first.

G

You need to provide the user ID and the second is for the current user and, as you can see, you have a body and you have session ID, which is a service principle ID of Japan online, and you have also availability and activity, and all these parameters are a fixed list of combination. You cannot set what you want. It's fixed, it's a fixed list and you have also an expiration duration. uh It's a nizo.

G

86101 format default is five minutes PT 5 home, but in this example, you see pt2h 30m, which is 2 hours and 30 minutes. This is a concrete example of how to set the presence, and also, if you want to play like I, am like I've done. You can use the graph Explorer to deal with some uh endpoints and it's it's a great tool if you want to start uh playing with this API now, just a quick demo, because uh this sample just implements a lot of different method to just show you how it works.

G

So I will switch to my visual studio. So here this is the sample. The latest version, because the first version I've submitted is not really it's really simple and in this sample, which will be available as soon as the pull request will be approved, will contain a wide range of different capabilities. So I will just show you how it works. So this is the age and basically you see you have the status message and actually I don't have any status message defined.

G

If I click on this button, you see you have a an interface and I can provide, for example, my status message, which is, for example, hello entry. Shifa community, like this I, can put a status message: expiration, for example, I will choose four hours and you can set also the availability based on the combinations uh you can provide. So, for example, I will put do not distract if I submit. Now you see it's okay, I will close and you see now I have my status message to prove you that is working.

G

So yes, I'm presenting and the the status message is really is a good set with a display. Until tonight it's really working and after, for example, you can clear the availability. If you want this, will reset my availability to available or your preferred presence status. You see it's really working so I'm available now, and you can also just clear the status message to get everything back to the initial state and I will prove you that everything is okay.

G

You see no status message, it's okay, so now the code I will show you a little bit of code now because it's interesting uh I'm playing with two entities. The first is a present status, which represents nothing other than a present session with the session ID availability activity and exploration duration, and the second thing is the status message entity. So you see I have the message. You have a content and a content type.

G

In my case, it will be text and you have also the XP deck timer which uh which have the time and the time zone UTC by default, and this kind of stuff after I have made this little service, which basically expose everything uh to play with this API. So, for example, I have a first method that is called get the current user status message, I'm just getting the status message of the current user through the MS graph client V3.

G

The second one is, you can set the current user status message, I'm, just getting a status message and an expiration and, as you can see, I'm just calling this method and after based on what I've provided uh as choice, I can just put an expiration date and, after I have received this eye status, message object, which is my request body and I'm, putting my status message and the expiration date, which is in the iso format and UTC as a time zone. But if you want, you can provide the different time zone. Also.

G

uh I'm also have a method that just gets a Korean Twitter ID. If you need, because some endpoints requires the user ID. So you have this method, and you can also you see, set the current user availability so with the set presence and in this case, I'm just providing a present status and after I'm just setting all these. These things to the current user and the last thing is the get current user session ID.

G

As I told you, you need to request the specific service principle, so you see you have an endpoint for that application and I'm just getting the nap the app ID of this service principle behind the scene to be able to call correctly all this kind of API and after you have also the clear presence.

G

I know you see also in the clear presence you need to provide and specify as a session ID, it's mandatory to set the present and to clear the present, and this is the sample. uh Basically I can just show you the quick view, because it's really uh it's really simple, not really Advanced. But you see you have on action, method and I'm, providing everything to call this kind of of API, and basically you have everything uh we deal and to interact with this API.

G

Basically, that's all on my side and basically back two years ago,.

B

Wonderful, thank you so much and uh while we're concluding this, let's get let's give the floor to David and Paulo.

B

And someone uh someone awoke Vesta from his slumber uh David we see your camera.

H

Okay, let me follow you want to start with the slides. Okay.

I

I can share my screen, then. Okay, let me know when you see it: okay,.

H

Perfect and I can take control. So let me try.

I

Okay, I'll give you control just because you are a friend of mine of.

H

Course now that I have control I'm, not sure what to do, because I can't do anything. So let me just uh but.

I

I will be your demo monkey just let me know what to do and I will do it so.

H

Okay, yeah just uh so a little introduction about myself, I'm, a SQL I'm, a SQL guy I'm, a PM in the Azure SQL team, and lately we just released something that I think it could be very, very interesting for you. It's called Data API Builder, that's what I'm going to to show with the help of Paolo, and so, let's just move to the next slide.

H

I

And I'm Paulo I'm a solution, architect I work in a company of my own and you can find all of the info here. But let's focus on the demo so yeah. Let me move on yeah.

H

Yeah, that's that's what we're going to build right, the the areas that we want to build a to-do application, or at least to integrate the to-do uh list in no existing application, and to do that, you probably need to have a table, and then probably you need to expose some rest API to be able to connect with the SharePoint uh uh framework that that you have um at your end and uh and now today you can do it without writing code.

H

Basically, because we just released the last week a tool called datapier builder for Azure database. That's the full name, but you know names are maybe uh not exactly our strong side.

H

Api Builder is is something that allows you it's open source, it's a it's, an application that you can download and run offline or even, of course, a use on Azure that will take your existing database or new database. If you want to start fresh, uh specify a table and we automatically create the arrest and even a graphql endpoint, that's what I'm going to do with Paolo, so I will be taking a table, exposing it using a dub and then power will consume it into a nice application. Much nicer, the one that I can build myself.

H

This is how datapia Builder, uh basically the very high level architecture, and you have the link there. If you want to go and and see the source code it's available, you can download it and basically what we do is we just ask you to provide a configuration file, because we want to be super transparent in uh and and absolutely non-intrusive in the database. So we don't touch database at all.

H

We just use it, but of course we need, for example, to understand what is the URL that you want to use to expose some table, what tables or story procedure or reviews you want to expose all right. So we just use a configuration file. Then database Builder starts read the configuration file read the metadata, which is basically the relational schema from Azure SQL in our case, but we also support postgres, MySQL and Cosmos DB for Cosmos DB.

H

You need to provide a graphql schema because we need a schema um and then once we have all this information, we just expose the rest and the graphical schema. Now this is this is going to be, you know, kind of obvious, so you say: okay, that's easy, you know rest and graphql, but what is what was not easy? Anything that adds a lot of value is that we also support security.

H

So we also allow you to specify not only which resting point you want to make available, but within the rest, endpoint also which rows of data will be available to someone. So we also implemented something. We call policies which by all means are row level access, Securities um right, and that is something I will show you and uh let's go to the next slide and then I think we can go to the demo yeah. This is exactly how you install it.

H

So if you don't care about the open source part in the sense that you don't want to develop with it or at least contribute to the development uh you just do.net tool install and then it will be installed on your machine and it's a CLI application and then once you um once, you have installed it on your machine. The first thing you have to do is dab init that will initialize the configuration file and then tab add to add whatever you want to add as uh to the configuration file and then tab start.

H

So three commander and you're done, and that's exactly what I'm going to show you um something else I wanted to highlight is that, of course, this is also hosted in Azure. So if you want to sell fast in Azure and that's what I'm going to do, it's super easy. You just run it in a container and it's done.

H

If you don't even want to take care of Hosting, you can use a static web apps to basically have a full stack uh kind of environment at your render in just a few line of code, because we also integrated with static web app. So if you are familiar with the SWA, the static wrap CLI, it's all integrated, so you just have one tool to do everything from front and back-end database, which is pretty nice. In my opinion.

H

Okay, let's go to the demo. uh Let me share my screen here. We go so here. I have a very simple table right, a to-do table and we have the idea the title completed and that's the important part now I kept everything single, very simple, but basically owner says who is the owner of a to-do item?

H

Public means is has been created by an anonymous user and therefore anyone can see it, and if you have an ID, that's belonged to the ID of the user, who created it and of course, I can only see my own stuff. Paulo can only see his own to do and, of course you know it goes like that. So that's the table I want to expose. What I I need to do is first of all, dab, inita and I already done it and what you get once you do that in.

H

It is just this configuration file here which basically says what is the connection string and the database you want to connect to internet information like do you want to have rest enabled do you want to have graphql enabled- uh and this is the important part for for you for sharepointing for SharePoint usage.

H

um The provider that you want to use to authenticate in our case will be Azure directory, and this is uh uh Paolo's tenant and an Azure active directory configuration and then, and then aside, the runtime configuration you need to specify which entities need to be exposed in this case, I am exposing something I will call to do that is based on the table dbr table. It will answer to the password to do, and here you have the permission.

H

So if someone comes in and and doesn't present any token, because that's rest right, so you have to present a better token. You will be anonymous, and so you will only be able to see the item for which the column of the owner ID is equal to public and you you can do any thing on that. I could just say: okay, I only want you to be able to read, but let's say I I want to fully support public objects.

H

Then, if you are authenticated, we will allow you to see the items that are marked authenticated kind of a semi-private thing here, but that's the important one sample roll one. uh So we just generate the roles that comes from in this case: Azure Azure active directory because the authentication provider you configured is azure active directory. So any role that is available there can be used here and we created a sample role, one and if I present my token and the token has a sample or one then I will be identified as a person.

H

With this permission and what I will be able to do is do anything on anything as long as the row on which I'm operating has the same value of my Ed in the claim. So you have with the policy the ability to exactly Define who will be able to see what and and also the action that is uh or are able to do on that. So it's pretty flexible and Powerful.

H

Now to run this, it's super easy. Once I have configured my file which, by the way it is just a Json file. So if you don't like uh dub, add kind of operation, you can just create the configuration file with any tool you want as long as it's a valid against this schema that is published here. So uh if you want to automatically expose all the tables, you can easily create this file on your own, and now all you have to do is tap starter. This will start locally.

H

My um the application, and now it's listening on localhost, 5000 or 5001, which means that with the uh insomnia, arrest, client or Postman I can just go here. Let me zoom in a meter and then I query. So, of course, this is the one on Azure.

H

Let me just use the local, the local one lost five thousand one, and that will be uh you know connecting to my lock a lotabase, and my local database is now connecting to to Azure, and this is my table right and, as you can see, I can only see the public item because right now, I am not providing any um any any better token right. There is no. Actually this is disabled, and probably this better token is is expired.

H

So if I try to do that, I will probably get an error uh because of course now the token is expired. um But that's that's to show you that everything first of all can work offline, which is great for a development experience if I want to deploy. It is super easy. So, first of all everything I'm showing you is available on a GitHub repo that I created just for this sample, and here you have an Azure deployee file, I'm I'm, more confident with a shell file than Arma and bicep.

H

So everything here we just use AZ to deploy basically what this thing here uh web app that uses a container behind the scene. So if I go to the configuration, uh there is a that API Builder is also published as a container on the Microsoft public registry, so here I'm, using a container and and basically what the container is doing behind the scene is just using uh dotnet instead of wcli to execute a data Builder engine and that's it that's that's! Basically what you need to do um once you deploy it is.

H

You will see that we are taking the image from here, so that will be the the latest one and then I can just go here. That's what I already has prepared before so and now I'm I'm going I'm going to the DMR web app, the the basically the same website. You have here yep, that's the same website now again I'm using insomnia. But what will happen right now is that of course, I still get access to all my items here right all the public one. uh But this time I'm uh has been served by Asia.

H

So in just a few minutes, you can literally take any table that you have or views or start a procedure and just publish it on Azure in this case, using that API, Builder and everlasting point that is fully working, which this enables you power to do something pretty neat right.

I

Yeah definitely so I'll take this screen sharing. Thank you, David yep. Let me know when you see my screen, please we can do you at least I can okay yeah perfect, so this is an Adaptive card extension that I've built using SharePoint framework in order to consume the API. That David just showed you built with the data API Builder, so just to give you an idea of how it works. Well, I can see a list of tasks which are related to my own account. I can play with them.

I

I can add new tasks, for example a new one with PMP. Let me add it and if I will go back to my list of tasks, I can play with it. I can set it as completed and stuff like that, so you can play with it using SharePoint framework and creating nice adaptive card extension Solutions. How uh can we make it well? First of all, as David showed you, we have an application registered in Azure act directory in the Target tenant.

I

This is the application ID that you saw in the configuration file of the dub settings file, and here we have an exposing API setting where we have this application, unique URI and we have a permission, which is the endpoint.access permission now from a SharePoint frame or point of view where I created my adaptive card extension I simply have my adaptive card extension, which, in the on init method, will rely on the service scope pattern.

I

To give you a clean and well architected example here, using the context of SharePoint framework, I simply create an instance of a custom service that I have defined in my solution. This service implements an interface i22 service which will do all the or will provide all of the activities that we need to have for our to-do list. So we can list it to do items. We can get a single item to the add, update and delete, so the crude queue operations.

I

Every single to-do item will be made by an idea: title A completed status and the owner ID, as you saw in the SQL table, and then we have the actual implementation of the tutu service. In my solution here in the Constructor, I simply rely on the AED HTTP client Factory object that we have in SharePoint framework so that this object. This type is provided by add my access.

I

Sp, HTTP and I can simply use it to create a client object to consume my unique URI, the one that you saw before in the Azure active directory settings.

I

Okay, now, whenever I want to consume the resting Point provided by David I will simply need to rely on this AED HTTP client instance object and I will simply have to make my request, which can be a get request, for example, to get the whole list of uh to do items or it can be a post or a patch if I want to add or to update an item, but no matter what I want to do against the API.

I

What is really important to know is that, in order to have proper authentication in place, I will always need, while consuming a data. Api Builder exposed apis to use the adhdp client instance, providing a set of options in the options. I need to provide a custom header. Let me go into this method in this get request. Headers I will simply add a custom header which will be called XMS api-roll, in which I will have to specify the role that I need in order to being able to consume the API.

I

This is precisely the role that we see in the up role so defined here in our Azure active directory application. As such, when I make a request from here, let me show you with F12: I can make or actually better from here. Let me make a request now for the to do API right here in this page, and you will see that there will be a to-do request right here. If we scroll a little bit down, let me make much more room here. We have the hopes most likely.

I

We have the access token right here, the bearer access token. This has been inserted in the request by the SharePoint framework infrastructure. We don't need to take care of it because it is provided out of the box by the aadhdp Handler, and here we simply have a request with an access token, with the sample roll. That dub is waiting for in order to grant me the permission to get access to the Target to do items so from a SharePoint framework perspective. It is really really really easy. You simply rely on the adhdp client Factory.

I

You create an instance of the adhdp client object, it's like, as it would be. I love you. It is provided by dub and you will simply need to add this custom Adder to have Security in place. One more and last thing. You need package solution, Json file of your SharePoint framework solution that you need to have the permission, endpoint dot access, which is the custom one we defined for our own API registry, nature, director and, of course, in your solution.

I

This will be your own permission, because the application is ready will be registered by you with your own custom, permissions and settings. That said, I think that's all, and it is a really powerful capability that you can leverage back to you. You go and thank you.

B

Thank you. Everyone uh for for presenting uh our recording will be available in 24 hours. uh Please don't click in the chat uh when you see that the recordings available, because it's only available for Microsoft employees, we will share it on YouTube within 24 hours, make sure to follow us on Twitter at Microsoft, 365 Dev and at Microsoft, m365pmp and again. Our next call for Viva connections and spfx is on April 6th. The next Microsoft 365 platform call is on April 13th and all Community calls are available at aka.ms. Slash, Community, slash golf with that.

B

Thank you. Everyone have a fantastic day. Thank you. Bye, bye,.