DEMO - Implement a Teams channel tab

Key Takeaways

in the last video you saw how to add a channel tab to an existing microsoft teams project and in this video we're going to see how to implement that channel tab as well as how to include a configuration page in the tab now the last step is to implement our channel tab so let's go back to vs code and let's find our tab that we have so what i'm going to do is let's add in a couple other controls so like i need an input and input props those are two more import statements that we're going to need and i'm also going to create a new interface so my interface i'm going to have is export interface we'll call this the i config math tab state and this is going to have a math operator which is just going to be a string it's going to have an operand a which is a number operand b which is also a number and the result which is a string so i have an existing use state let's go then let's make another state thing here another state entry or state property so i'm going to add the following statement this is going to define a variable to contain the state for our our current tab so i'm going to say const math tab state and then set math tab state to follow that same convention this is going to be use i use use the hook use state that is an i config math state and it's going to pass in the math operator is going to be something as the iconfig mass state so the default state we're going to have is add so we're by default we're going to choose we're going to if the state hasn't been selected or if that we don't know what it is the operator is just going to be add now let's implement the channel logic so let's look for the effect our current effect that depends on the microsoft team's context and that is this one right here so we can see that because it's passing in the context now what we want to do is we want to update this to do some new stuff so we want to leave this set empty id to be equal to the ndid that's passed in but i also want to do the set math tab state i also want to pass in and say look at the current state and i want to use i'm going to pass in the current state and we're going to have our math operator context.nc the entity id dot replace the math wherever you see math page and we'll replace it with nothing so i want to strip off the math page property that we see there and this is going to be as i config math state and that's to closing right there and then we have that okay cool so now everything's in good shape now i want to also go ahead and add in a couple event handlers uh to our class now these event handlers let's go ahead and add these and i'll explain what they do so so these three different event handlers they do a couple different things so the uh change handler a and change operant or change operand a and change operand b both of these are going to run when our when the user enters in some text for our input boxes that we're going to add in just a minute so what they're doing is they're going to update the state of the um of our app um the next thing that we have here is when the operand changes so when someone changes from you know addition to subtraction or something like that we want to we want to change that up when the operand changes we're going to redo all of our results here so we can see here that we got a couple different string results that we're generating and we're passing in the string results into our state for the actual app now the next thing to do is to implement the channel page user interface so let's find our return statement which is down here at the bottom and i'm going to replace our return statement it's just going to grab all of this and let's add in what we see here so what is this doing so what this did is you can see that it's listing out we have two input boxes one for our input for the operand a and then one for operand b and it's going to allow us to then go through and to click this calculate button and it's basically going to come in and say let's go through and recalculate the results and based on the operand that was selected in our settings that's how the value that's how the value is going to get updated it's going to get or get calculated so at this point at this time so at this point the channel tab page is complete so if the web server is not running which we can see something fail while we were coding it up that's fine we will just restart it with gulp ingrock serve so let's go back to our browser and let's go off of our tab and now we'll come back into our tab and let's take a look at it so here's our config math tab so we can see we're doing the add operation so let's go ahead and add two values together so i'll do a 5 and an 8 and click calculate 13. fantastic so now let's go in let's change the value that's going to get run so instead let's do a multiply so i'll hit save and now we'll do a 5 times 8 equals 40. so we can now see how our app is responding or our custom configuration tab is setting the values our configurations page is allowing us to change the operation we want to run and our configurable tab is allowing the user to enter different values in and then it's using the setting for our configuration page to figure out what math operation it should perform so in this demo we created a channel tab with the configuration page added it to an existing project for a microsoft teams app