Microsoft 365 Community Microsoft Teams, 4 May 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building Conversation search experience for Microsoft Teams with SPFx

Description

In this 19-minute developer-focused demo, Siddharth Vaghasia and Kunj Sangani show a modified out-of-box form customizer that will get you up and running in no time. The presenter essentially walks viewers through his form customizer article, UI and code while delivering tips for fine tuning and debugging along with a historical reference. One time saver is the ability to toggle between form customizer, list and Item on form. Works only if running SPFx v1.15 or greater.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on May 4, 2023.

Demo Presenters
• Siddharth Vaghasia (BinaryRoots) | @siddh_me
• Kunj Sangani | @sanganikunj

Supporting materials
• Sample - Teams Tab Conversation View | https://adoption.microsoft.com/sample-solution-gallery/sample/pnp-sp-dev-spfx-web-parts-react-teams-conversationview/
• Documentation - Build Microsoft Teams tab using SharePoint Framework – Tutorial | https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab
• Documentation - Build your first app with SPFx | https://learn.microsoft.com/microsoftteams/platform/sbs-gs-spfx

Learn more
• 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

A

With spfx, this sample was added to spfx sample Gallery uh and was been developed by collaborating with kunj, also who could not join today, but I am taking over the demo for him uh before we start a little bit about myself. I am Siddharth vakasia I am a Microsoft MVP and also Microsoft 365 consultant I love to work on SharePoint in their Power Platform Etc. uh These are some of the social headers through which you would be able to connect with me, uh then also I'd like to introduce my collaborator kunj.

A

uh He is also a technical consultant working around SharePoint Office 365, and he is also an active PNP contributor, wherein he also contributes to various samples, writes articles blogs, Etc, and these are some of the social Hunters through which you would be able to connect with him.

A

So uh this is the link uh to the report which we are going to talk about today. uh So what would be? What was the driving Factor? Though? First thing was, you know, with uh Team suicide and everything, and if we talk about A team's Channel, a typical teams, Channel conversation which would be built for a particular project, we would see there would be so much of message.

A

Passing will be done or so much of conversation happening in a particular Channel conversation, and it becomes sometimes difficult to find the right message within that conversation uh and also it becomes difficult to scan and locate the relevant information there right now. This was a idea which I got probably an Year back or so you know like how we can simplify the conversation which are available for us to quickly go and find something, and that is when I started.

A

Exploring and I started the web part uh with a very simple idea of displaying the conversation in the tabular view, and uh then what happened was I. We I I showed it to kunj and he came up with other idea of to enhance that particular web part to have a different kind of view, and that is where you know we kind of collaborated on this webpad and we were able to complete it and we have submitted in the SPF example gallery now.

A

These are some of the summaries or the features of what this webpart would do. So, first of all, this is an spfx based web path, which is kind of enabled for a team step, because it is a web part where, in whole, functionality of the web part is dependent on a channel and its conversation. uh So it needs to be. It would only work within a channel conversation as in team step. Okay, what it will do is it will basically display some of the newest conversation first of all, on the top.

A

So when we are talking about conversation, we are talking about the top level conversation which happens, and then you can deep dive into a specific reply within a specific conversation. Then you would have an option to navigate from directly to a specific message or within reply to the conversation. It means you would be able to directly go to that teams uh post messages for you to reply, or for you to refer that particular message right uh then you would have different filters depending on uh what you want to use.

A

You can filter it by the body such text. You can filter it by who has sent the message you have to. You should feel able to filter it by mention from and to wait and with attachment. Okay. So these are some of the basic filters which we uh we have implemented. So idea was to you know like sometimes you might remember that.

A

Okay, this message was been sent by this guy or your colleague, but you might not be able to filter it based on who has sent that message right and if you at least you know that okay I wanted to find all the messages sent by a particular user on so and so date or if it you know that he has mentioned you, you can also filter it. Based on that and typically search text also is available same way. You will be able to apply all the same filters to the replies within that conversation.

A

Then you have two types of options. That is what I said: uh tabular View and then you have chat format you, which you will see in the demo and there would be a decent icon on the message where the current user is mentioned.

A

So if you are logged in with and uh your account on the teams, Tab- and you are doing that- what you would be able to do is you would be able to say, icon, saying that this message you have been mentioned and of course um you know, we have explored to use graph toolkit in spfx based web part right.

A

So if anyone is interested on getting started of how to use spfx uh based solution and enable it Microsoft teams, these are the reference links to which you would be able to use it, uh the first one being a typical way of creating an spfx web part and enabling it manually, but uh definitely if you want, you can also use the visual stream Studio toolkit for enabling or creating a teams tab using spfx.

A

So second link is uh specific to that with that, uh let's quickly go to the demo, so what I have done is I have kind of installed. The solution and uh plus I have also deployed the solution and added to a particular team's Channel conversation, and we created some samples and conversation around it right.

A

uh So this is the channel which we are talking about, and this is the teamstep spfx, so at the top, what you get is you get a two kind of view uh whether it would be a chat view, which is this, which we are seeing right now, and that would be a tabular view also where you would be able to see the conversation message in the tables right and then you have all the filters around it now these are the top conversations which would be there.

A

So if you go to the post and if you see most of the top level conversations which we are seeing right now is kind of displayed at the top and to go into this particular detail, uh replies of that conversation once you hover over it, you would be able to see an icon and you click on this view, reply. That is where you would be able to see all the replies of that particular top level conversation which will happen Okay from here.

A

Of course, you would be able to go to that particular channel, uh just a particular message within the post itself, so that you can reply Etc plus wherever based on the current logged in user. If you are mentioned in that particular message, you would see an at the rate symbol so that you know that these are the messages where it was specifically targeted to you, or you were mentioned in that message.

A

Okay, now coming to the filters, uh if you see here if I wanted to filter based on a particular user like I, wanted to just filter messages being sent by a particular user, if I click on apply, I would be only able to see that particular message then uh same way. You can also mention it means you can also uh filter the messages where somebody else is mentioned.

A

So if you know that you have sent a message- and you have mentioned somebody- you- you click on mention and if you can tap on apply, then it will come up with the message which is there now. uh One thing other thing is uh by default. What we are doing is we are not showing the HTML formatted message.

A

What we are doing is we are keeping it as a simple text message and displaying it for general purpose, because the idea here was to find a conversation and then use the conversation message button to go to that message and find the context Etc right, uh then you can also filter uh any messages which are with attachment. Okay, plus, if you click on that attachment, you would be able to directly go to that attachment. Also, and of course there is, you know from date and to date.

A

So if you filter a message based on a particular from day to date, uh you would be able to uh filter that message, Etc right and also the body text messages. So if we say like weather and if you will apply, you would only see the message, which is that, so these are the basic filters which we thought would be useful for us to basically drive that conversation right now.

A

The other thing is uh once you go to the reply. Once you go to a reply of a particular message, you will get similar functionality, which is available wherein to I. Don't know why this yeah, okay, uh you will get similar functionality, wherein you would be able to filter based on all the uh filters which are available for the messages also, and then there is that tabular view.

A

uh So tabular view is where you would be able to directly find from in a simple formatter way, but in a way very much similar to what you are seeing when it was been sent. uh If you want to go to that message Etc, so this is a typical way to display the conversation in a simple way, so that, if you wanted to find something, you would be able to use this paper to Target to a particular Channel conversation and you would be able to kind of use this web part.

A

We don't have an option to show which columns and to show to hide, but that is the idea which we can implement. But overall uh you can kind of expand policy columns which are available, uh which you can basically do it. Okay now. So this is everything about demo. What I'll do is I'll quickly go through demo of Code walkthrough of the the part uh first thing is, uh as I said, it is an SPF Express web part, so more or less.

A

What we are doing is how we are programming, our spfx web part, and uh what we have to we are doing is we are using graph API to basically get the conversations or the messages using graph service client to get all the messages for that particular Channel and displayed so initialization part.

A

We are initializing graph service, the graph, client and everything next is the main file, wherein we have the state object, which would basically kind of hold all the variables which would be required to get the required functionality depending on whether it is a chat message, filtered messages, next link, expanded message, ID. So, basically, this is the typical State object which we are doing, which we are using uh then within the main component. In the render method. This is where kind of all the components come together, so we have segregated the components between different functionalities.

A

So header component is the one which is basically nothing but displaying the search, conversation, header and the grid and the tabular go icons which are there. Then you have filter component which basically takes care of rendering this filter component here, which is there and then, depending on The View being selected. You have a message View and you have a table view uh component, which is there, and this is where we are passing a typical data- has been passed to that component. To basically render it so next I would go and see.

A

uh Next, we will see some important messages like uh get teams messages. So what we are doing is we are using uh the teams kind of SDK to get the current context. Group ID and the channel ID now group ID would be basically uh the teams ID and the channel ID would be the channel ID in which the current web part would be running.

A

And then we have the graph service provider method which we will see shortly, but to just get the messages and set the state to object and use that state object to pass to the components which is available next. uh This is a separate method for get message replies because the graph endpoint to get the message requires for a particular top level. Conversation is different, yet you need to pass or the endpoint is different and also you need to pass the message ID in inside which you need to get the reply.

A

So this is a separate message, but very much similar. uh What you get is you have to pass the group ID channel ID, but the extra thing you would pass is the selected message ID on which you are getting all the replies from next. This is the graph service provider class. Basically- and this is the class wherein we have all the methods which actually makes the graph API call using the graph client, uh the first one being the team, slash, Channel, slash, Channel ID and the messages which will give us all the messages.

A

We are getting top 45 messages, and then we have load more button uh below that, wherein, once you will click on load more button, it will go and get another 45 messages by using the next click icon. This is just two kind of way of getting the latest messages and then kind of trying to find all other messages. If you want to do it, then this method is where you would be able to get the data based on the next URL.

A

So if you are getting the second page, basically, we use the next link, which would be written in the response and use that to get the next set of data which is available, and then this is the get message replies which would give us the messages replaced based on the endpoint teams. You pass teams ID channel the first channel ID messages and then the message ID and then you say the reply send, which will give you solve the replies which are available right next thing is the component.

A

So what we have is this is the message view component within message. View component in terms of the UI Library, which we are kind of utilizing here is we are using react. Node start to get the chat, chat, item kind of object to get the required look and feel so that you don't have to develop. You know that kind of similar experience, then what we are doing is uh we are also using a read more and less, which is a basically a react Library, which is to kind of handle.

A

The read more read less button on a particular content, which is very much easy to implement. uh We will see we will see that now coming to the imported component, okay, so this is where we are converting the HTML text to the plain text so that we don't have to take care of rendering the messages as it is, but rather than kind of displaying and using the inner text of the leave element to just display the messages which has been displayed there right now.

A

What you would uh now. This is the main component method, wherein you have the chat component to display a particular chat within that that would be a chat item and within that there would be a chat messages. uh This is how a typical you know, react. Node style, chat, components, library has been used, you can. We can use that what it will do is it will basically uh kind of display the top level messages which is there and then again below down.

A

It is very much similar, but that is where you would able to see all the replies to that particular messages, or you would see all the related messages there. Okay and we are also using graph toolkit to basically use the person component to display who has sent these messages Etc uh within the spfx paper to get the required look and fill. So this is the message view component, which is available and then mention icon.

A

Of course everything is kind of available and all the logic whether to display the mention icon and everything would be typically based on the filter of the mentioned user ID versus the current user. Ids object ID so that you know that that user has been mentioned in that particular messages or not. Right now, now, let's say The tabular View.

A

So if I go to table view, a table view is also very much similar.

A

It's just that we are using the detail list view component from the equivalent UI to basically display the data in the tabular format, and what we are doing is we are overriding on render method of each of the columns to get the required, look and feel, or to basically use certain properties to display whether it is a chat icon or whether it is a file or to format the date time message created data messages, Etc and also to display the body content messages within the column itself.

A

So this is how a typical tabular or the detail list view control can be used right. So, overall, this is the base functionality or base code, which is basically taking care of implementation. A very honest on a summary level. What we are seeing is we are seeing that we are using graph API to get the data.

A

We are using teams, SDK context, teams, context within spfx web part itself to get the current context, group ID, channel ID, and then we are making the graph API call and when using the graph, API equal to basically display the data in that format, and it makes more sense when you are using this web part within the team's Channel conversation, so that it can be used as in an extended feature of what is already available within teams for you to kind of read in a way what you kind of free to do.

A

That okay, last couple of points I wanted to highlight here is for web API permission because we are using Channel messages. So we need this channel message, read all permission to be applied for us to kind of use graph API to get the channel messages. So this permission and this scope is important which we can which we specified in the packet solution. And, lastly, how do you enable this spfx web part as in teamstep? So for that in the webad manifest.json file? What we do is in the supported host.

A

We are specifying that the supported host for this web part is the team step, and that is how it would be available now, once an SP effects, solution is deployed to the app level. Catalog I mean the tenant level app catalog, uh because you are using and you want to make it as in enable for, as in the team step, which would be available for user to install that within your team State. What you would have to do is you have to make sure that you know.

A

Once you have deployed the solution, you are basically deploying it to all the sites. First of all, and also you are syncing it to the teams. Okay, this option would be enabled- probably it's just taking some time, but basically this is where it would be. Allow us to enable and make this tab, or this web part available for user to be used within your team's application Within in the tenant itself. Okay, this one. If you want to know about eight, uh the links which I have said in the reference link would help.

A

You give you step by step reference on what and how you can. Basically enable your existing web part to be enabled for a team's team and, depending on whether your web part is just for a single supported host, which is a team stab or you wanted to also use it in your SharePoint. Accordingly, you can use the sdks which are available and you would be able to kind of find uh whether your current web part is running within the teams or whether it is running in the SharePoint.

A

Okay, so yeah, so that's it from my side. Hopefully, this web part would be also useful to the community, or it will give you idea on how to kind of extend it. That's it from my side over to you Gary.

B

It was a fantastic demo. Sit off, uh yeah I could see in the in the chat. There's a few questions, so uh it obviously people see some some interest in in what you've done. In a great example of you know the different technologies that you've used as well in this solution, I absolutely love the code tool that you've got as well to kind of guide us through this. uh This solution, um as well um so yeah fantastic. Thank you very much for coming on to the call today and sharing with us.

A