Episode #142​ – Creating Teams Tabs with Yo Teams v 3.x

Here you can find the transcript of Episode #142 of PiaSys TechBites.

Welcome back to PiaSys Tech Bites. Today, we start a new series of videos about how to create extensions for Microsoft Teams using the Yo Teams Generator version three. Specifically, with Yo Teams v.3, we can create tabs for Teams, which can be configurable, or personal tabs. We can create BOT, outgoing webbooks, connectors and, messaging extensions. As well as, provide support for localization. So, in this series of videos, one by one, we will see how to create each of them. And today, we will start with creating Teams tabs. Like always, let me move to the demo environment and let me show you how to do that in practice.

Let’s start creating a fresh new solution in a new folder by using the Yo Team search generator. We have, first of all, to provide the name for our solution. We can choose to use the current folder, which is my choice, and we can provide a title for the solution. And, as we saw in the previous video, we can also provide the name of a company. We can choose the version of the team extension manifest, and 1.8 is a good one so far. We can choose to use the simplified or quick scaffolding, so that we will see a smaller number of questions and prompts in this tool. So, I will choose ‘yes’, and I’m going to create a tab.

The tab will be eventually published at a specific URL, and I can specify here what the URL will be. And then, I can define if I want to see a loading indicator while the tab will be loading. I can provide a name for my tab, which will be ‘My First Tab’, and I can choose if it will be a configurable tab, so it will be included in a chat or in a channel, or if it will be a personal or a static one, so it will be included in a personal app. So far I want to create a configurable one. It will be included in a team, and I can eventually enable single sign-on, which we will cover later on. So, right now, I will simply reply with ‘no’. I don’t want to see this tab in SharePoint Online, so I will answer ‘no’ as well here.

Now, the scaffolding is running, and in a matter of a few seconds, I will have my solution ready to go. The solution is now ready. So, by running code dot, I can see the source code of my solution, and we can dig into it. As you already saw in the previous episode, we have the environment file where we can configure all of the settings about our solution. Specifically, I want to configure an ngrok subdomain, in order to host my solution in a specific ngrok-based subdomain, which could be, for example, YoTeams3Tab. And, I will prefix with my company name for the sake of adding a unique URL. And, I can save the environment file.

Then, in the SRC folder, we have the server, the public and, the client part of the story, as well as the manifest, as we already saw in the previous episode. So now, if I dig into the Client folder, we can see that in the My First Tab sub-folder, we have three TSX files. One represents the actual react component for my team tab. The other one is the configuration component that we will be using to configure the tab when we will add the tab with target channel in a team. The tab remove TSX component, is the one that will be shown to the user when the user will eventually remove our tab from the target team channel.

So, let’s start focusing on the tab content, and here we see that in Yo Teams v.3, we have a React Hooks. So, for example, we useTeams to get information about the fact that we are, or not in Teams, what is the team and what is the context of Teams from an SDK point of view. We also define a couple of useEffect hooks, so that we can understand that when the component is rendered inside Microsoft Teams or not, and so on and so forth. Then in the actor render of the component, we use the fluent UI components from React Northstar’s package, and these components are defined and available at the following URL. So, fluentuiz22.web.core.windows.net, not a very friendly URL, but here you can find the whole documentation about these components, and you can see what the components are, and you can play with them.

So, let’s assume for example, that we want to slightly customize the tab that we just created. So, for example, we want to add an accordion to the content of our tab. So, we can go here and we can import the accordion component. If we go back here, we can see that the accordion can give us a UI, which is based on the well-known accordion behavior, we can expand and collapse items. So, in order to do that, we will need to define a collection or an array of panels that we will render inside the accordion. For example, this one, I have three panels. One will include HTML content, the other two, which will simply include the text-based content. And then, we can include in the render of our tab, the content of the accordion. And so, we can create a div and I can include inside the div an accordion component.

So, I will say ‘accordion’, and that will provide the panels that I want to use for my accordion, which will be the array of panels that I just defined. And, for example, I can define that I want to have an exclusive behavior. So, just one panel will be open at a single point in time. I can do that. I can also eventually customize the behavior of the button. So I can say, for example, that my button will be the primary button of my UI, and, rather than having the click event right here in the onclick, I want to replace it using another hook of React Hooks, which will allow me to define that unclick event for my button.

So, I can get immune port for the useCallback hook. And, I can define inside of my code base that I want to handle the click of my button, with a handle click that I will define, and which will be based on the useCallback hook. And, it will use in a synchronous method to manage to handle the click on the button. For example, you can see, you just clicked the button, okay. This will be the behavior of my hook, just for the sake of making an example. So, once I have done that, I also have to eventually provide for the useCallback, a dependency, which I don’t need right now.

So, I will simply provide an empty array. And then, I can move here and I can replace this inline event with my handleClick that I defined right here as a constant. Now that I’m ready to run my solution and to test it, we can start the terminal window. And, we can say gulp grok-serve. This will start the local server and will configure ngrok to be a transparent proxy to my local server. And once it will be ready, I will be able to publish my solution, my extension in Microsoft Teams, and to test it. So, let’s wait a few more seconds and once it will be ready, we can switch to my Microsoft Teams, and we can add this custom solution to a team.

For example, I can now go here in my team, in my development environment, and I can say manage team and under apps, I can add a new app, uploading a package. The app will be YoTeams3Tab, which is the one I just created. Let me select the zip file of the package, and let me add it to my target team. By doing that, I will be able to add, for example, in the general channel, a new tab, which will be based on my solution. And, here we can see the configuration window, and this is my custom setting that I can provide through the configuration react component. I can save. And, I will see that I have my first tab with my button, which is implementing the behavior that I created, and I have the accordion with my items. So, you can easily customize the content of your Teams tab, using the Fluent UI components and using the React Hooks.

And, you can do that as well for the configuring and for the remover tab. Then, in the public folder, we have a still for the tab a set of HTML files, which will simply render the react component that we saw. And, in the server part of this story, we will simply have the export of the tab, and some additional behaviors, for example, here to prevent my HTML content, to be rendered in frame, which are not rendered inside that the Teams UI. Just for the sake of preserving the behavior of my solution and being sure that my solution will be run just, and only in Microsoft Teams. So, that’s it for this demos so far. Like always, thank you for watching this video. I hope you found it interesting. And, I’m really looking forward to seeing you next week. And, remember to subscribe to this channel. Thank you.