Microsoft 365 Community Community Demos, 8 Sep 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building SPFx solution with Azure Communication Services integration

Description

In this 15-minute developer-focused demo, Hugo Bernier shows how a pre-built ACS composite chat component is used in a SPFx web part sample called RoomChat – created by João Mendes. After an overview of ACS, create a Communications Service. Visit the ACS UI Library (sandbox) – and pick up a chat component. Step through core code elements of the web part. Use property panes or SharePoint Online tenant properties for storing information used by your web part. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on September 8, 2022.

Demo Presenter
• Hugo Bernier (Microsoft) | @bernierh

Supporting materials
• Documentation - What is Azure Communication Services? | https://docs.microsoft.com/azure/communication-services/overview
• Tools – ACS UI Library | aka.ms/acsstroybook
• Sample - Room Chat - João Mendes | @joaojmendes | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-roomchat
• Documentation - SharePoint Online tenant properties | https://docs.microsoft.com/sharepoint/dev/spfx/tenant-properties?tabs=sprest
• ACS Quick Start - Get started with the calling hero sample | https://docs.microsoft.com/azure/communication-services/samples/calling-hero-sample

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

Hi everybody, my name is hugo bernier, and today I'm going to be talking to you about building sharepoint framework solutions using azure communication services, integration and we'll talk about what that is uh very shortly, but the sample that I'm going to be showing you today is actually was actually built by joao mendez, and you know it's it's a like everything that does it's a very cool sample that is very comprehensive in terms of how is built and everything and the one thing that I want to make clear is that you know sometimes in our spf example, we have some samples that are very simple because they illustrate a concept and we have some samples that are you know I I would say academically perfect there.

A

They have pretty much everything included in this sample, and this is definitely one of them. Don't let that scare you, the sample, is a great way to understand some of the advanced concepts. It is again it helps. You understand, also how to structure your solution and things like that, and we want to make sure that you're not always stuck with only advanced samples.

A

We want to want to make sure that sometimes you have samples that are just to show you a concept, because everyone has to start at level 100 at some point, but once you're ready to look at more advanced samples. This is definitely going to be one of them all right. So let's talk about azure communication services.

A

What is azure communication services? It's basically an azure service that you can use to do some really cool stuff, including things like voice and video, calling rich text, chat, sms and email, and I'm not a smart person. So when I think about azure communication services, I kind of think about teams as a service right. So imagine if you could actually take all the functionality in teams and put it as a service in azure and that's really what it is now. A much smarter person might actually think of it as communication platform as a service.

A

That's really what the official term for azure communication services is now if I go to azure and I go create an azure communication services, all I need to do here is I go to azure. I click on create a resource and then I'll search for communication services. If I can type properly there you go and I'll just click on create.

A

Now, once I create this I'll have to pick my subscription again, I like to use my my uh msdn subscription and I'll create a resource here now. I already created a resource before this, so it's going to scream at me, but I'll just pretend I'm creating a new one.

A

Alright, and once that's created I'll, get something like this. That will say: here's your azure subscription, here's, your your resource and you'll see that right away. It allows me to do things like building some chat and telephony and voice and video services, but the the magical thing here that we're looking for is right here, the keys.

A

If we look at the keys, we have connection strings that we can use and the connection strings are going to be pretty much the the thing that we're going to need to integrate into our applications to be able to connect to this communication services from our own applications.

A

The other thing that you should probably take a look at is that there is a quick start section in the azure communication services and there's lots of cool samples you can use, uh but one of the ones we're going to look at in particular today is the get started with the group calling hero sample, and so, let's do some demo when you go to the azure communication services.

A

Kind of sandbox um you'll actually get access to these components here and the cool thing about this is that if you think about the complexity of building a chat, functionality or video, you know video functionality uh or anything like that. That teams provides you. You have to create a lot of components and connect them together and everything. So the azure communication services folks have actually created uh composite controls uh and ui controls that you can use to actually build your samples, so you've got a whole bunch of different use.

A

Cases that we can use here and there's you'll see that there's two types of libraries there's composite controls like I said, which are combined components together and those are designed to make it easy for you to integrate with fluent ui design, to actually have your kind of layout control in a in a very consistent way, and you can inject some data model. But if you want to go even further, you want to inject your own css or your own experience, and things like that. You can use the individual ui components.

A

The individual lego blocks, if you will and put them together. So, for example, here we have a call composite component that allows you to um to actually call the functionality and it'll pretty much create the experience for you and if you see all you need to do, is you import? You know an adapter, you can import the composite and then in your code, you'll actually call this component here and say this is what I want. I want this adapter I want. You know these options and so on and so forth.

A

Now I've actually built that for you and here's a chat composite if I just wanted to do chat functionality. Well, let me show you the call composite so here I have the call composite it's running as a website and azure and I'll actually join this meeting, see if this is like uh inception meeting section.

A

So this is this meeting. We should be able to see if the demo gods are with me. Let me just make sure that I pick the right camera here. uh Yes, my nvidia broadcast turn it on and hello, and what I'll do here.

A

Should be able to see this exact presentation.

A

Now I'm going to mute myself here.

A

Actually I don't need to mute myself. You can see that I'm in the demo- and this is going to start going crazy here, all right. So let me get out of this this demo and let me actually show you the web part that our friend joao built using one of those composite components all right. So we have here a this- is a screenshot from uh from zhou's sample.

A

He's got two versions of the same: uh the same web part in two different pages, so he can demonstrate here acting as two individuals, one who's fox and one, whose mouse and you'll see that show added the ability to pick your own avatar, the ability to have kind of this room chat, pain and then to be able to do things like who's in the chat leave. The chat, hide the participants and do things like that. It's a very cool feature here and if I just kind of mouse over here again, we have leaf chat.

A

We have the participants, the list of participants and we have even things like the typing indicator and things like that. A lot of this is actually provided by the composite controls. What's unique here is that joao put it together in a sharepoint framework solution? Let's go quickly through what the code does.

A

All right, so, first of all, like every other sample that joao builds, you know the structure is always awesome. It's very easy to understand so you'll see here. That shows broken the sections into assets and components and constants and things like that. But the thing that we're going to pay attention today is the web part itself. The room, chat, whipper and let's go into this in the render function of the web.

A

Part you'll see that all that schwa does here is he calls the room chat component, but he also passes the parameters or the attributes that we want.

A

The props, I guess, is the term I should be using and he'll pass two things in particular the topic that he wants to show and the connection string, which we saw earlier in my settings in azure communication services and then the where we get the acs connection string and the topic is in the property pane configuration so that thing that pops up, when you add a web part where we can now specify the topic we want to show and the connection string.

A

Now what draw does is he actually passes those attribute to the chat component. So, in my components, area I have a room chat component and the room chat component. Really. What it's got is something that calls a room, chat, control now, there's a whole bunch of other things about the global state provider, and things like that.

A

That just makes it easy for to store the information about the web part globally, but we'll skip that because we're limited on time, but inside of that I've got my room, shot, control and you'll see that the ring chat control is broken down into smaller controls as well. So I've got my errors. I've got my ability to join. I've got my configuration.

A

I've got my panel we'll focus on the panel, because that's the part that you saw in the demo today, but the panel is really again included in a chat panel control and I'll spare you from having to go into that, because the chat panel control calls the chat, control and the chat control has the same components we saw earlier where it's got the chat, adapter and the chat composite and the avatar persona data, which is exactly what you saw when I was showing you the composite controls from the azure communication services team.

A

What he's doing is he's actually embedding the chat composite component and he's passing the fluent beam from the web part and the adapter that will connect to azure communication services.

A

The adapter is actually created earlier using react hooks, and so what we do here is we do a create adapter and we pass things like the display name, the user id the credentials and the thread id and then, in the hook section this is kind of brilliant. What uh what joao does is he's got a use, acs api hook that he can use, making it easier for him to embed acs apis within his application.

A

So he's got the contacts here that he passes with the connection string and all that stuff he's got the person's email address that we extract from the contacts as well as their display name so that we can understand who's chatting and then we call the communication, identity, client from the azure communication services apis to authenticate and do all that stuff and guess what we get to pass that connection strain that we used earlier in our configuration.

A

So that's really how joao does all this information he's actually doing something beautiful by using a lot of components that were pre-built and then really wrapping it into sharepoint framework? Now, there's different ways to approach this. You know in this case, joao is actually using a connection string that is passed into a property pane.

A

But what if you didn't want your users to have to know the connection string, there's something that you could use in your web parts, which is called online or sharepoint online tenant properties and the tenant properties are things that you can use for your entire tenant and store them so that all the web parts and all the extensions can actually consume those properties.

A

So, for example, here I can use rest or I can use the online management, shell powershell or the cli for microsoft, 365 to set those properties, and then, in my web part I can retrieve those properties. So, instead of copying, the connection string in every web part are asking every user when they drop the web part to copy and paste the connection string. I could set that globally, so think of that in ways of if, when you have stuff that again, you don't want to share widely now.

A

The one thing I want to make clear is these properties are, actually you know, they're going to be read by the web part. So this is not hiding the connection string or anything like that. If you wanted to hide it, you'd want to use something like azure key vault or something like that. But you know this is a great way to centrally store things, and all you need to do within your code is to call the get storage entity and pass a key and then you'll get a response that will have the information.

A

So if I wanted to do this in my code, I would probably do something like this I'll say: get storage entity and I would pass a key called azure connection string. I would have previously stored the connection string using the methods I showed above and then I would get something like this, which would be a json structure. That would tell me all the information about the connection string, including the value which is hidden here, and I could use that in my web part. So those are again two different ways.

A

You can use property panes or you can use tenant properties to store information that you want to use in your solutions in your web parts and again, if you wanted to write the property you would just use like in this case. If you want to use the spo management shell, I would just set spo storage entity and pass the string, but that's pretty much it for the sample from joao. You can find the code at the url here now. Of course, I don't expect you to be able to type that really quickly.

A

If you go to akms, spfx webparts and just look for room chat, you'll be able to find it. If you want to learn more about the the controls that I used for the video part or the the joy you use for the chat part, you can actually go to a klms acs storybook, but that's it for me and back to you patrick, awesome stuff. As always hugo. Thank you.