Microsoft 365 Community Viva Connections & SharePoint Framework, 15 Jun 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Viva Connections & SharePoint Framework Community call – 15th of June, 2023

Description

Viva Connections & SharePoint community call on June 15th.

Three demos: Multilingual SharePoint Page Summarization with Open AI API and Microsoft Graph Pages API, SPFx framework at Microsoft - Accelerator Live Update Feature, and Viva Connections + Stage View in Teams.

Project releases: PnPjs Client-Side Libraries – v3.16 (GA), CLI for Microsoft 365 – v6.9 (beta), PnP Modern Search – v4.9.0 (GA), plus 5 SPFx samples and 1 ACE.

Screenshot summary for this call | https://warner.digital/pnpsummary06152023/

Please see the blog post for details on demos, project updates and activities.

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 – PnPjs Client-Side Libraries – Beau Cameron (Aerie Consulting) | @beau_cameron
07:08 – CLI for Microsoft 365 – Adam Wójcik (Hitachi Energy) | @Adam25858782
08:47 – PnP SPFx Controls – Hugo Bernier (Microsoft) | @bernierh
09:38 – Viva Connections Toolkit for Visual Studio Code – Adam Wójcik (Hitachi Energy) | @Adam25858782
11:30 – PnP Modern Search – Hugo Bernier (Microsoft) | @bernierh
11:59 – PnP Samples - Hugo Bernier (Microsoft) | @bernierh
14:12 – PnP SPFx ACEs Samples - David Warner II (Microsoft) | @DavidWarnerII
14:44 – Together mode picture
15:40 – Demo – Multilingual SharePoint Page Summarization with Open AI API and Microsoft Graph Pages API – Anoop Tatti (Content and Code) | @anooptells
29:04 – Demo – SPFx framework at Microsoft - Accelerator Live Update Feature – Daniel Turley (Avanade)
38:47 – Demo – Viva Connections + Stage View in Teams – Marcus Castro (Microsoft)
47:55 – 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

Welcome everybody to the Viva connections and SharePoint framework by weekly synced today is June 15th and my name is Hugo. Bernier and I will be your host for today we have a packed agenda today, we're going to talk about the latest updates on the SharePoint framework, we're going to let you know about all the cool stuff we've been doing with the community projects and so pnpgs CLI Microsoft graph and all the other cool open source initiatives we're going to have picture time with our together mode, and then we have three awesome demos.

B

We have anupathi who's going to show us the multilingual SharePoint page summarization, with open AI, API and Microsoft graph Pages API Daniel Turley is going to talk about SharePoint framework at Microsoft, accelerator live update, feature and Marcus. Castro is going to talk about Viva connections plus stage. U in teams.

B

Now we have a whole bunch of resources for you in the community. We can watch our videos in the Microsoft 365 and Power Platform Community videos where we'll post all our meetings and including this one. We also have our LinkedIn group for discussions and we have open source initiatives in GitHub, so you can go to github.com PNP office, Dev, SharePoint and Microsoft graph to view all or open source initiatives. We also have a sample Gallery.

B

Actually we have a bunch of sample galleries, but all these samples are rolled up into one under aka.ms, slash, Community samples and finally, you can find all or open source initiatives and samples and all the resources we've talked about by going to ak.ms, slash, Community slash home.

B

Now we have our Microsoft 365 and Power Platform Community calls that are regular calls. The Microsoft, 365 and Power Platform uh call is going to be on a summer break in July, so the last call is going to be on the 27th of June and we're going to be back on the 27th of August. That's our weekly call where Microsoft speakers present and let you know what's coming up and what's new in the community.

B

We also have our monthly Power Platform call hosted by our friend David, and we have our office add-in monthly call as well. Of course, we also have our Microsoft 365 and Power Platform Community bi-weekly and Viva Connections in SharePoint framework bi-weekly calls as well. You can get all these calls at aka.ms, Community slash calls and you can download. The recurring invites from there.

B

So again talking about our Microsoft 3c5 and Power Platform uh Community call by Microsoft speakers the uh the latest updates from Microsoft engineering we're going to have again the community together mode group photo and then landly and Kishore subedy are going to talk about Deep dive into science behind power, automate co-pilot, which is very cool and Sebastian levia, is going to introduce us to Microsoft graph toolkit version 3..

B

Now, if you see all these Community calls and you're like hey I'd love to present something you can actually request to present. We welcome everyone to present a demo on these calls, and all you need to do is to go to aka.ms community, slash, request, slash demo and let us know what you'd like to present on and hopefully we'll see you there now, if you're interested in presenting- and you don't know how to get started, or you want to contribute to your open source initiatives. We have some stuff for you.

B

We have some guidance that we offer and David you want to talk about that.

A

Absolutely do I want to talk about it. Yes, so uh friend sharing is caring is a program that we started many moons ago uh to take care of working together and learning together. So we know that the landscape of GitHub and other variety of things trying to accomplish in the community can be a little scary, but these are live sessions that we get together in teams together in a safe space, meaning we don't record them, and we accomplish things like.

A

Maybe you've never done a pull request in GitHub we're going to do that together and you're going to leave feeling confident and enabled now we do know. We absolutely know that those sessions schedules have been a little sparse and we are working on that because we are looking for volunteers, so check out that AKA dot, Ms sharing is caring. Volunteer link fill out that form if you'd like to help out.

A

We know a number of you had we're spinning them up we're trying to make them scalable so they're, available on times all over the globe for our wonderful Community as you are all over the world, and we want to make sure the times are friendly for you now once you do contribute, we want to recognize you now. uh You've noticed likely that some areas of the recognition or badging has been let go of learn has made an announcement about that.

A

We just want to let everybody know that the community recognition program is not dead, it is alive and In Living Color and we are growing it in fact, so we just expanded the uh the opportunity that we have with credly, in fact, so we're excited about that so be on the lookout for more campaigns. uh We're updating the way that you manage your information and your registration using MailChimp right so uh yeah, and that was a that was a real chimp. I got next to me.

A

So there you go I uh yeah, it was real, um so definitely go register you can update if you need to AK dot, Ms, slash, Community recognition will give you access to that uh and please do opt in. We want to recognize you for all the amazing work that you're doing. Can you go back to you.

B

Apparently David has gone analog with his soundboard all right. Let's talk about our open source projects. We have a whole bunch of Open Source projects where we welcome contributions and we want to make sure that you're up to date with what's going on and first to talk about bmpjs at client-side libraries, uh we have my friend Bo.

C

Oh I'm, your friend today, I'm so excited.

B

Thank you, I didn't hear the you're, the Kim catral to my Sarah Jessica Parker.

C

I'm not old enough for that reference. So uh yes, some updates. uh This week on PNP JS speaking of community updates, we did get a PR from uh a Community member named Hilton, um who fixed an issue with um working with files with special characters in their names. So, thanks to uh him, we had various documentation updates. um There was a fairly significant uh bug fix as well for a circular reference issue that you might have seen recently. If you were using PNP JS um trying to initialize webs so that's been fixed.

C

um We also added a new Microsoft graph share module um to our endpoints too. So, if you want to access shared items, Drive items that's now available. uh As always, uh we do have night nightly, builds so check those out and we're currently still working on V4. So there's an issue in our issues list 2678. If you want to provide any insights, thoughts, uh concerns or things that you love about, V3 or or you would like to see in V4. uh Just let us know back to you, Hugo.

B

Awesome thank you Bo, and to talk about the CLI for Microsoft 365. uh We have Gary Gary.

D

No actually Gary is on holiday and then oh, that's great. Instead yeah.

B

So that I'm right here.

D

Go ahead, Adam, that's fine, and so totally uh it's the middle of the month. So we are in the middle of ours is 6.9 uh uh version I'm working on the is 6.9 So. Currently we have the 6.9 beta beta ready for you to download. We have new commands for SharePoint purview and the first thing we did in the in the new version is: we migrated our dots to tokazarus. So if you want to give it a check for sure, let us know and provide feedback.

D

I will I will be progress in a good direction and also check out our new AI enhancements in our docs page. There were many many other enhancements like we counted more than 50, opened and closed PR's in two weeks so and an enormous amount of enhancements. Thank you for all the awesome contributors and all your awesome work, and also the maintainers to that process. This.

D

If you want to get a hold of yourself latest beta, you can do it using NVM install with the at the next tag, and we also support Docker with the ethnic stack as well check out the release, notes at the aka.ms CLI M365 notes, and if you want to join and opt-in join our community join, uh join our Discord server to you know, ask any kind of question or just chat with us in a safe place and be sure to check out repo to work with us and to help us shape this product together.

D

B

And then I'll talk about the reusable spfx controls all right, so a reusable spfx controls are controls that you can use in your web parts and in your property controls, and they look professional and you don't have to rebuild all these controls by yourself, because some awesome people in the community have done so for you. So we have the react, controls 314 that was released on uh the 19th of April and we have the property controls uh 3.13, both of which support spfx 117 and we have some cool enhancements.

B

We want to thank everyone who have contributed to to the spfx controls. You can go, find out more information at the links that are provided here and join us at Twitter at im365bnp controls and now to talk about the Viva connections. Toolkit we have my friend Adam yeah.

D

It's me again, so the FIFA connections toolkit is a visuals to your code extension created by the PMP Community, together with Microsoft, to boost your productivity in spfx area. So if you are creating any kind of SharePoint framework solution to extend Outlook office teams, of course, SharePoint and any of the viewer products, then this is the vs code extension for you to try out and give it a check.

D

It's powered by the Yeoman generator the same Yeoman generator used to to scaffold the SharePoint projects by CLI for Microsoft 65, of course, and by the PNP Community web, pass extension Asus sample. So many cool stuff. We already have a V1 major release, so it's ready for you to be download from the vs code Marketplace or directly for the vs code extension tab.

D

If you want to read more more information about the full capabilities about this product, be sure to scan that QR code at the bottom right corner uh to read the blog post with all the features about this product, it will help you scaffold a new project not from scratch, but also from a given sample. So you have a Kickstart upgrade your solution, validate, deploy it package, everything everything and we already have a roadmap for the V2. As you can see on the slide, we are we're going to provide new features that will help you code.

D

This spfx solution generate a CI, CD pipelines and many many more awesome stuff a way ahead. The first thing is already done and it's available for you as a pre-release. So when you install the Viva connections toolkit, you will have an additional button to switch to the prerelease, to use the greatest and latest be sure to check out this project. This vs code extension, if you are developing any spfx solution and provide us that awesome feedback thanks a lot wonderful.

B

Thank you. We also have the PMP modern search which can be found at aka.ms, BNP, Dash search and it's a series of flexible web parts that you can use to build a modern search experience we're at version 4.9, and we want to thank everyone who have contributed to it.

B

We have a whole bunch of fixes uh security, fix added new scenarios and please go take a look at the release, notes on the website to find out more now we have some samples as well, and so samples are actually GitHub repositories for both spfx extensions and esbfx web parts, and these are the latest updates. We have a new application, insights and cost management, dashboard webpart by King kazal, and it's really cool because it allows you to if you ever have tried to share. You know the cost information with your your stakeholders and shareholders.

B

It typically requires them to use the Azure dashboards and it's a nightmare to manage the permissions. So this sample solution really allows you to display the dashboard directly in a SharePoint site or in a tab in Microsoft teams, which is very cool. We also have a new Advanced page property, or a new update to the advantage based property uh has updated by adding support for multi-line fields, which is very cool, has also updated.

B

The RSS reader to fix bugs with the handlebar helper calls and initial feed service and direct feeds, which a lot of people had reported issues, so that was I believe three separate issues that Kelly has fixed in one submission. The advanced comments Box by Amy Thomas, has been updated to spfx 117.

B

If you haven't looked at it, it's a great way to add, really rich comment capability on a page. It's definitely awesome and then finally, rishab Shukla has created an invoice generator. That's a new web part that allows you to actually produce invoices from content in the list and, uh let's reshab is a fellow Canadian. Who's new to the spfx webpart repository I believe previously was making contributions to the extensions. So welcome. Rishabh and I'd like to thank everyone who have been contributing to the samples. Everyone is welcome.

B

If you have a cool sample you want to share, please don't hesitate to submit your your samples and you will get a badge for your hard work now. We also have adaptive card extensions and to talk about them. uh My friend David, yes,.

A

Thank you. uh So we have a bunch of Education samples that have been created. We likely have seen those friends on all those Tuesday calls with Jethro Seekers. uh He had been showing those off quite a bit, so they have been approved and uh merged into there as official samples, so go check them out and still love new samples, and we also have that Ace badge for you as well. So definitely take advantage of that. You go back to you, wonderful.

B

Well, David, if you don't mind sharing your screen, we have optional picture time, and so this is the opportunity to turn on your camera and say hi to everybody. This is the proof that you were here uh if you need an alibi, but, more importantly, it's a way to actually show to everyone how awesome this community is and I didn't realize the Avatar showed up in the picture to get the together Moon, that's awesome. They.

A

Do yes excellent, so we get a few more spots. Look at those filling in excellent Excellence, all right, somebody's getting ready practicing their uh cardio there ready to go.

E

A

See Stephanie awesome. Let me all right we're recording, let's give everybody a wave Joel.

A

B

All right we're ready, perfect.

A

Some more even better awesome all right, take it back over. Thank you.

B

All right, our next presenter is Anup tati who's, going to talk about multilingual SharePoint, page summarization, using open, AI, API and Microsoft graph Pages API Anup. The floor is yours, feel free to take over the screen. All.

F

Right, thank you very much, Hugo right, so this presentation is about using opening AI API in spfx projects. My name is Anup I'm, an MVP developer at content cloud based in the UK, and those are my those are the links to my social profiles. So you can follow me on those platforms if needed right. So the agenda for today is start with an introduction. Then move on to the demo take a look at the overview of the open, AI API, how to set it up.

F

How we can integrate that with spfx a couple of use cases and then the core walkthrough and then we'll conclude so AI it has been. It is everywhere, so you open your Twitter feed or LinkedIn feed. You see a lot of posts uh about artificial intelligence these days. uh It is helpful to us in many ways take, for example, co-pilot that have been launched by Microsoft or or will be launched by Microsoft uh GitHub co-pilot, that's already there. We've got chat GPT.

F

So these are the different examples which you have already heard of uh that use. Ai and apis are provided uh for us in order to use AI in our applications, and we will use those apis in spfx projects and that's what we'll be looking at today.

F

So, let's look at the demo first and then move on to the code. So if I just go into my Dev tenant, what we have here is a page in SharePoint which has got some text content, some images and some text content again. So it's just a normal news article. So what I'll do is I'll just code and edit this page and add a web part which is called summarize and then republish that and then basically what what this does is.

F

This web part gives us a multilingual summary, so in English, French, Spanish and Swedish of the text content that is present on the page. So basically we use open AI. We we send the content text, content to open AI, ask it to give summary in four different languages, and this web part displays the summary in four different languages.

F

So now that we have had a look at the web part, let's take a look into the details of the web part itself, so uh you might have heard of open Ai and Azure open AI. There are some differences to it. So if you just go on the internet and search for differences between opening and Azure open AI, uh you will come to know what they are. The main thing is both open, Ai and Azure.

F

Open AI provide us apis, which we can use in our projects, so in in this particular demo, we'll be using the apis provided by open AI. However, the same can be changed to use Azure openai apis instead, but whatever it is before working with production data, and these are open, AI or Azure open AI make sure you read the data policies that are uh given by open, Ai and Azure, open, Ai and then then decide on which one to use and whether they are uh okay with your company's data policies Etc.

F

So that's one important important thing to remember now: open AI API, so it's a tool provided by openai which gives access to the advanced AI models with a simple interface. It helps us integrate AI into our applications very easily.

F

The the AI models use deep learning algorithm to provide high quality responses to the queries and it can be accessed through variety of programming languages. So, in order to you know, look into this open, Ai and play with it.

F

What we can do is we can simply create an open AI account by going into the open, AI site and we can obtain an API key and if they've got a playground on the website itself, with which we can look at the different uh API endpoints that are provided right now, let's look at how we integrate open, AI API with spfx. So what we do is uh we are. We have our spfx projects on the left side.

F

We use Azure function as the middleware uh which, which will communicate with open AI, so request is sent from spfx to Azure function. Azure function then sends that request to open AI using the opening, I key and then open AI Returns, the data which is then provided back to spfx.

F

So if we just take a look at the details, so on the spfx web part, what we do is we get the data, which is nothing but the content of the page, and that content is passed to the Azure function and the Azure function then constructs something called as a prompt which will have a look in a minute and that is sent to open AI by calling the openai API and then open AI uses that prompt provides us the high quality response, in this case the summary in different languages that is returned back to the Azure function.

F

The Azure function, then sends it back to uh or other yeah sends it back to uh SharePoint framework part, which then displays the formatted data in a nice way.

F

All right, uh some of the use cases uh of like using open, Ai and SharePoint are you know. One is the one that we saw summarizing, SharePoint, page content in multiple languages. uh The other use cases might be showing possible titles.

F

For a page so that the editors of the page can look at the possible titles and then decide which title to use, if if they are okay with the response, the other might be showing possible thumbnails for a page, so a few thumbnails can be shown and then the editors of the page can to choose a thumbnail and then set the thumbnail of the page right now, let's look at the core, so all this code is available on GitHub under the samples repository.

F

What I have done here is open the the web part and then highlighted uh the summarize.tsx component, which is a react component and uh I'll, be navigating through various files and then showing the important bits of the code. So in the web part we've got this main component called as summarize.tsx, which I've highlighted that particular component has a method uh in order to get page content using graph API. So for that we use the Microsoft graph Pages API, and then what we do is because we are interested only in the text content.

F

We filter the uh the content to Target only the text part. So, as you can see over here, we are using microsoft.craft.text paper, which gives us only the uh text webparts present on the page. So once we have that we get the content of that uh of the text web part, and then we need to pass that page content to open AI for that we use Azure functions.

F

So there's this method called as get summary using open AI, and this ultimately calls an Azure function now in order to use Azure functions or call as your functions I'm using a react talk, but this is not compulsory. This is just one of the ways of calling Azure function. We can call Azure function uh correctly from the you know, using other code, you will have a lot of samples which explain that, but in this particular case, I'm using react hooks, which is called use, Azure functions.

F

So what we do is we get the aad, HTTP client first and then this particular method that or this particular piece of code that I've highlighted over here. What that does is it checks whether it's a get request or a post request? If it's a get request, we append parameters to the query string. If it's a post request, we compose the the body uh and then what we do here is we call the Azure functions.

F

uh So we call the Azure function uh by passing in the headers and the body uh and then once we get the response from the Azure function, uh we just collect that in a variable.

F

Right now, with respect to the Azure function itself, uh we've got two Azure functions. uh One is called as summarize, which gets the data from openai API and there's other Azure function called as update page, which I'll come to in a minute. So, firstly, we'll look at this summarize function, so this particular Azure function gets the page content from the SPF Express part. So what we do is we take that content into a variable called as content, and then we need to construct a prompt which needs to be sent to the open AI.

F

That prompt is nothing but a Json. So what we do is we have to construct that Json, so I have put that Json in a file called as data.json and in that particular Json file, which we'll look at in a minute, we'll replace uh the content with our with the content that we have received. So if we look at the Json file, as you can see over here, it says that we are using a particular model of uh of open AI.

F

Then we have to send some messages and some other parameters uh to the open AI. So the main thing is the message. So in this message we say: please give us a one short sentence, summary in in all the different languages that we need and then towards the end. We've got the content in curly braces and that content will be replaced by whatever content is passed to the Azure function. There are other parameters as well, which we can play with if needed.

F

Right, as you can see over here, we get the Json and then replace the content in that Json and then uh what we do here is uh from the app settings. We get a couple of couple of settings. One is the API endpoint and the other one is the API key. Once we have that record and call this invoke web request. I should have mentioned that this particular Azure function is a Powershell Azure function and all these are Powershell functions.

F

So we call the invoke web request function by using the endpoint that that we get from the app settings uh so which then goes ahead and calls to open. Ai API gets us the data, and then we just format it to get. uh You know that data will be nested, so we need to get a particular object from that next structure. That's what we do over here and then once we have that once we have the summary, uh we return the summary back to SharePoint.

F

Now we don't want to do this every time. Someone goes ahead and opens the page right. So that's why what we do is once we get the summary we store that summary against a a column of the page, so the metadata of the page is updated with this summary, and how do we do that? Of course, we use PNP power server to do that. So there's another Azure function called as upgrade page. This this function gets called once the summary is returned back to the spfx web part.

F

So what we do in this Azure function is uh simply go ahead and connect to the site.

F

So if, if we are debugging locally, we have to use client, threading and client secret, uh but if, if your, uh if we have deployed this in the cloud, there are a few options we can use manage identity as well, which I quite like very much so yeah we connect to the site and then what we do is we use the uh we get the the page item and then call the set PNP list item function which goes ahead and updates the value of the of the column.

F

In this case the column is summary, and we update it with the summary that we have got from openai and once once we update the uh the metadata we go ahead and publish the page, so that's it from Courtside and in summary, open AI provides us with some apis will provide us some apis. We use those apis in spfx projects. Azure, open AI provides us apis.

F

As well, which which can be used instead and there are other scenarios to explore here- are the resources that were used and with that I and it over to you Hugo. Thank.

B

You so much. This is a great example. um Definitely putting a lot of Cool Tools together. I'm gonna have to watch this demo again but slowed down a few times to make sure I understand everything all right so now to talk about the spfx framework at Microsoft. Accelerator live update, feature here's Daniel, Turley Daniel, all.

G

Right, thank you. Hugo all right hi, my name is Dan Turley and I'm. A full stack developer at avenard I've been working with SharePoint for over 10 years, starting with SharePoint 2010., most recently as part of the productivity Studio at Microsoft, utilizing SharePoint framework to build business apps today, I'll be presenting on the live, update, feature in our spfx solution, accelerator, but first a quick overview of the accelerator. It's a set of patterns, reusable code components and tools.

G

I created for building business apps on the SharePoint platform, has evolved over the last six years and have used it in the we've used it in the productivity Studio to build a dozen business apps. Over that time. The accelerator is open source and we've published a complete app to demonstrate its features. The SharePoint framework sample is named, react rhythm of business calendar.

G

The accelerator has the following high-level features. We have guidelines for solution, structure, to organize your domain model, Services components and schema. We have a robust domain model with features like change, tracking validation and relationships, there's also a services framework with provided services for SharePoint list data, time zones and users and groups and more.

G

We also have Dynamic versioning of SharePoint lists for app setup and upgrade experiences. There are react components for view edit panels and dialogues, asynchronous data live update, controls, a wizard and more. We have tooling to support development teams and environments and, last but not least, live update, ensures users are always collaborating with the latest data, and this is the feature that we'll be discussing today now I'd like to go straight into a demo, because I think it'll be easier to talk about the nuts and bolts after seeing live, update and action. I'm.

E

G

To share my screen all right: I have here our rhythm of business calendar app open in two windows under two different user accounts on the left is my account and on the right is Megan a test user in this tenant. First thing I want to show you is Megan, adding a new event to the calendar, I'm going to do this from the right side, and then this event will appear on the left screen without me having to refresh a page or click a Reload button, I'm going to call this test event, one.

G

G

Set some values here for the refiners.

G

Okay, that's saved now we'll give it a moment here to appear on the left side, so we're using a package named SP list subscription and what this does is allow us to subscribe to changes to SharePoint lists it's using websockets instead of polling, and it's usually pretty fast, but we are relying on SharePoint to notify us when anything changes in the lists.

G

So we have this little indicator. That shows me that this is a new item. So, as part of the accelerator, we have a live update, react component where you can pass in an entity through props, and so you get to choose where you'd like to render this little indicator dot when building your UI. So I'm going to take this one step further. What I'm going to do is start editing.

G

This new event from my side on the left and what I'm going to do is I'm going to change the title I'm going to call this sample event two and then I'm not going to save this on my screen. What I'm going to do is go back to the right side and I'm going to have Megan edit.

G

This same event and she's also going to change the title she's going to call this Showcase Event three and she's also going to change the team, because I want to show you something else in a minute and I am going to have Megan save these changes so remember: I.

G

Have this open I'm, currently editing this record in my window and Megan also, has this record open and is editing and is going to save all right, so the live update came through uh what we see in the corner that says that the record was updated if I click on this I can see. Who recently made the updates and when now you'll notice that the title field didn't change to Showcase. Event three still has my value in there. Why is that?

G

um So this little indicator here will tell me who else has recently changed this field.

G

Now the reason was because I was also editing the field, and so, if you click this little icon, you get the pop-up, and what we see here is uh three versions of the field value. First, we see what I was editing, uh what I, what changes I made a moment ago.

G

We also see what Megan made um a minute before that, and then we also see the original value for any of us started making edits. You also have these three helpful action buttons. So I can pick any of these versions for this field.

G

So what I'm going to do is revert this to the original value test event, one now that was just a plain text field, but I also want to show you that this pop-up supports custom, rendering of the values so remember, Megan also changed the team's refiner and so I want to show the pop-up for that live update.

G

You can see she changed it to the leadership value. We can custom, render the pill with the colors for the refiners. So what I'm going to do is keep this change.

G

Now I'm going to go ahead and save this record.

G

And in a few seconds, we should see that update on Megan's screen on the right okay. So let's talk for a minute about how we implemented live update. So this works by extending the change tracking capabilities of the entity class. That is part of the accelerator.

G

When you define an entity such as the event entity in the rhythm of business calendar app, you define a state object which will store all the entities, internal State, and then you write simple, Getters and Setters to expose that state outside of the entity class, such as to your UI.

G

When the current user decides to make edits to an entity, we take a snapshot or a copy of that internal state so that we can compare the before and after values for each field. That's how we Implement basic change tracking now for a live update. We actually have the possibility of creating yet another copy of that internal State. We do this when SharePoint, using that SP list subscription package notifies our code, that a list item has changed.

G

So in the scenario where the current user is making edits to an entity- and another user has also made and saved edits to that same entity, we will have three versions of that internal state. The first version is the current version, which is the edits the current user is making. Second version is the snapshot version.

G

This is what is currently saved to the SharePoint list, which includes the other users recently saved changes, and the third version is called the previous version which I like to refer to as the state of the world before anybody started, making edits, and now that we are tracking these three different versions of the state, we can build UI components that can compare the values of individual Fields across each of these states, so we can show the user their current edits, along with any other edits.

G

Other people have made and the original values before anybody started making edits. How do we build a UI using live update so on the left? You'll see a live text component, and this is part of the accelerator, and this one takes an optional label the entity and the name of any property. You want to watch on that entity and you can provide a render function as a child element of the component.

G

So this is how you can custom render the display value and it automatically renders the live, update, icon next to the label and on the right you'll, see an example of a live text field.

G

We have live components built with react for every major input, control text field, toggle date, picker drop down, Etc and they're, mostly simple wrappers around the fluent UI components, so all of the regular props can be used and you should be able to easily build your own wrapper around any other controls.

G

There's even a live relationship component, which enables you to render experiences around entity relationships such as. If a child item was recently added or deleted, or even just reordered, all right- that's all I have for today. Thank you. So much back to you, Hugo.

B

Thank you for your cool demo, all right, so our next demo is uh Marcus. Castro Marcus is going to talk about Viva connections plus stage views in teams Marcus when you're ready uh take over the screen.

E

Okay, okay, so first about me, my name is Marcus Castro I'm, a senior product manager and I work in Microsoft teams, and today I'm going to present about stage view with people, connections and custom Ace card that I have built for some customers.

E

So the scenario is I'll, give a connection to the mean I want to be multiple Microsoft forms in the dashboard, so we had some customers that had about 12 different Microsoft forms. So, as you can imagine, there are some problems with that approach. So the way you should do that now would be. You know, create one card per form and we have no custom built-in cards for Microsoft form. So we use a web link and you just add the link to your Microsoft forms and so there's some issues right.

E

You end up with a very big connections: dashboard with 10 different cards. Also, one issue that we found out is when the customers were using mobile clients. There was some issues with SSO, so when you open Microsoft forms, users would be asked to authenticate and then they would be able to respond to the Microsoft forms, and that would work without authentication for one week or so, and then they would need to authenticate again and and so on.

E

So we got some I will show later on view connections how we did to to solve that question. So we developed a custom Ace card and instead of just using the web link, we are opening the Microsoft forms in stage view in teams and the same for powerapps. So exactly the same scenario. I have a question that has 10 different power apps and they want to show those in your connections again the same problem.

E

You would need a lot of different styles there with your dashboard and space can be one more thing to consider, especially for users that are using mobile. Desktop is okay, you have more space, but in a mobile, if you can just bundle all apps together, it looks much better and other thing that we found out with the powerapps.

E

Is that many times the the SharePoint to the me and the the Viva connections that they mean is not the team's admin person so true, they would need to ask somebody else to go to teams, admin, Center and upload the app manifest and install that using an app policy for all the users. So then they could start using the app and as I'm going to show you with Stage view, you can actually jump that step. You don't need to install the the application for all your users.

E

I'm gonna share my demo here, okay, so we are now in the connections and I have here a normal web link that opens on Microsoft forms. So this is the usual way to do it right, so you just click it and, as you can see, Microsoft forms will open in another tab. So that's one way you should do it. Another way is to form uh the uh stage View and using deep link.

E

I can open here the forms in a stage view one benefit of doing this way already is that the user is kept on River connections. You don't have a separate Tab and you know you just close it and you can open another form, but the way we do with this customized card is with one single card. You can have multiple forms and I can open. It opens in stage view I can respond to that. I can close and again open another one.

E

So, as you can see, it's a yeah, it's search better for a user experience for the user. I can also like if it's not a Microsoft form, it's just a external URL, then okay, the user will be redirected to that external URL and perhaps the same thing. So I can just have a web link and just open the app in a separate Tab, and that works like this, but one better approach would be open in stage view. Oh, this is actually I'm actually publishing the powerapps in teams and redirecting the users which that power app.

E

So, as you can see, the load time is is bigger and if the user has to do something else of your connections, I have to go back and again it's just waste of time. For for the user. Another approach that you can do is using stage view, so you just directly open this. The app here in stage view. So again, the user is kept here on the context of viewer connections and it doesn't have to somewhere else to go back youTube. Your connection and another approach is use our custom edit card so again here.

E

I can just bundle multiple, multiple power, apps and just Open Stage View, and do what I need to do here on this app.

E

So if I need to raise an incident, I can go here and I can close and I can just go to another app and do whatever I need again and just close and again uncapped here on your connections, other benefit of using the stage view is I'm gonna switch users now so I have one user that does not have installed one or app right.

E

So I have this instant app and if I use the traditional approach of just redirecting the user to the app it's gonna ask the users to install the app, but if I use the same approach but using stage View, so actually the app opens and the user doesn't even have to install the application so again, I don't need to chase the teams that mean to go there and install and use application policy to install that for every user. It just works.

E

Okay, let me share my slides back again and yeah just to show you how the structure of this customized card works. So basically it's just a SharePoint list and we have only four columns uh title: an image, a description and a link. The link is multiple lines of text just because sometimes with four apps, you have a bigger URL, so more than 255 characters. So the hyperlink column doesn't work for this scenario and basically that's the configuration that you have to do.

E

You just have a title for the card, a description and just a site URL and the grid of of the list, and that's it. You just add there. Your URL of your Microsoft forms or the URL of your power apps and and that's going to work. So it's pretty simple and that's how we generate the the stage view uh it's kind of science here. So basically you have you. You have to sign that you're going to open stage and for Microsoft forms.

E

This is the ID of the teams app for Microsoft forms, and then this this is the URL of your forms. So if you try to do that yourself to Open Stage view, that's what you need to do if you want to adjust a single card, but if you use our custom base card it does that for you and the same for for our apps, just the app ID that changes.

E

So this is the app ID of the product app in teams and if it's any other URL, uh it's just gonna, redirect the user to a separate Tab and- and it won't change anything so yeah. That's it from me. uh It's already live there on our samples. You can get here on the chat, the links and also we deep link generator app. One colleague of mine actually created and just helps building these stage view URLs, so it works with a SharePoint page with Microsoft forms with four apps.

E

You just sometimes just add the ID of the app or the forms. Url and that's gonna generate the stage view link for you. So if you just want to send that to a chat, for example, you can just use this deep link generator and it's a lot easier than do it manually yourself, okay, yeah! That's it! If you have any questions just send here on the chat and I'll be happy to answer.

E

B

You so much uh you definitely have to share that link as well for the Deep link generator. uh So uh I would like to thank all our presenters, anoop, Daniel and Marcus uh great job. Everything that you showed was awesome. I really appreciate it. Now, if you'd like to give us some feedback on how these guys are going, please rate the call. The content provide input on how we can improve.

B

You can go to ak.ms community slash calls feedback, and if you want to have more discussions with us, you can definitely join our official Discord server and where you can connect, learn and collaborate, you can scan the QR code here or you can go to our URL at ak.ms Community, slash Discord with that I'd like to thank everyone for attending the recording, for this call will be available in about 24 hours on the Microsoft 365 Empire platform, Community YouTube channel at aka.ms, slash Community, slash videos, please don't click on the link uh in the in the chat, uh because if you're, not a Microsoft employee, you won't be able to access the recording.

B

But again we will post it in YouTube, for you in 24 hours, feel free to follow us on Twitter, at Microsoft 365dev and at Microsoft 365bnp, and our next Viva connection and spfx call will be on June 29th and our next Microsoft 55 Empire platform. Community call is going to be on June 22nd. All committee calls are available at akms, slash, Community, slash calls and with that. Thank you. Everyone have a great day.

A