Demo - Using task modules with bots for Microsoft Teams

Key Takeaways

now in this section of our demo we're going to add a task module to the bot so let's update the hero card to add a button um that the user can select so in our bot file let's go back to our project and find our bot file which is inside of server there it is right here i need to locate the constructor where we can see here's our constructor right here and i need to up locate our switch statement and specifically the default statement that for the pat inside of our on message handler that's actually writing back uh learn microsoft teams so let's make a change to this uh hero card to where in this array we're gonna pass in an object and the object we're going to pass in it has a type property called in with a value of invoke it's going to have a title which is watch task oriented interactions in microsoft teams with messaging extensions that's the name of our video and then the next one is our next value is our value which will also be a type task fetch task module is a player and the video id that we're passing in is a h o r k 8 c r 6. so now let's see how this works so let's come back over here to our uh we can see in their terminal or our console that everything is running let's go back and try our bot out again so this time we'll just say hello to so notice the new card that showed up when we sent the a different message back or just our hello to message back this actually returned a card back to us the bot framework is now looking for messages of type invoke with their value.type property set to task fetch which you saw that in the code once for each one that it finds it's going to pass it into a handler the handle teams task module fetch method to handle what happens when you select the action and then which you want you're going to want to have it go implement the method so we can see it showing up now let's go back to our bot and let's actually implement that handler so i'm going to come over here and add in a new handler this is our handle teams task module fetch now once once it runs when it receives it uh coming back the response coming back where we can see our task module is player notice here it's looking for the request that the bot framework gets for the player so it should respond back with this video and you see it's using the video id that was passed in right here so let's go test this out so now i'm going to try uh enter in another message hello again the bot should respond and now if i select this you can see that the bot framework got the request it's not finding the video because it's probably a video that's now been deleted since i i grabbed the id but we can see our player is running and it is actually showing the the task module player card that we had created so let's go change this again so let's go back to our code and let's create a few more buttons so where our card is being defined up here we're going to actually go ahead and add in a few uh different cards here so we can see here we have one for watch uh this video or watch this video or we have an invalid action that'll run as well so let's see how this comes back so i'm gonna go back over to our code or to our to teams we'll type in another message and we should get a couple buttons back there we go so we have one to launch our video for this task oriented messages we have another one for watch teams embedded web experiences yep so there's a totally different video that just showed up and then we have this invalid action which it doesn't know what this is for that's where we got that kind of a bogus response there so the next step is to add a task module that is going to actually submit data back to the bot and the bot can respond to it now in this section of the demo we're going to add an action to the hero card that displays the task module using an adaptive card the task module will submit the data back to the bot that'll will use the value to display the specified video in the players in the player task module so in the bot files let's go back to our bot and we're going to add another card uh another action to the very end of this so i'll go ahead and add a comma and then we'll add in one more so you can see here this one is using invoke and it's also passing in fetch with a task module of selector and a different video id so what i need to do is i need to chain two task modules together the first one is going to display the adaptive card selector what we just added and i'm going to do that using that existing teams handler test fetch module and so to do this to chain these together or to actually add in a new selector we want we want to use the selector task module that we defined in the previous demo so i'm going to add that in right before the default and so you see here that we're going to use the same kind of setup that we have up here but this one i'm going to be getting the selector adaptive card and that's the adaptive card that we defined in our previous demo so now i need to add in another method to go fetch that adaptive card all right so there's our get adaptive card passing in the video and now we have a totally different card that's being generated here this is a very programmatic way of creating the exact same adaptive card experience that you saw from the previous demos now i want to add a handler for our adaptive card handler method so similar to that task fetch that we did earlier when we need to handle a submit from the task module with the bot framework i need to handle another process called or another type called task submit so i'm going to do this by adding in the following method so notice that before i had this method called task module fetch and that was responding to when i had the type task fetch as you see here so now what i want to do is i want to add in another one of these handlers but this handler is going to be for the submit action so this will be task submit and so that's what you're seeing right here so this one is going to take the video id and it's going to display the player so step one is going to be to show our um to collect the id from the user of the video they want to watch and then the second one is going to be to display the video that was actually selected so let's grab a video id so here's the microsoft teams web experiences let's just grab this video id so we can actually see this work correctly i'm going to come back over here to teams and let's do this one more time and here we can say watch a specific video so the first time i select this it's going to prompt me for what video you want to watch so we'll put in an id and then i'll say update this is going to be sent back to the bot and the bot framework is then going to send back to microsoft teams the instructions to launch the task module for our player to show the video that we specified so in this demo you learned how to use task modules with bots in microsoft teams we saw how to create and add it to an existing teams app then how to extend uh the app to have support for bots and how bots can interact with task modules as well thank you for watching i hope you've learned something now remember that this video is part of a series of videos on this microsoft learning module this video is also part of a playlist that includes all the videos that are associated with this module so that you can watch them in order the playlist and all its included videos are associated with a microsoft learning module that includes hands-on lab exercises and additional resources check the notes for this video and the associated playlist for more information and where to find the microsoft learning module