Demo - Coding action command messaging extensions for Microsoft Teams

Key Takeaways

in the last video you saw how to create a project and register a bot with the microsoft bot framework to be used as a messaging extension in microsoft teams now in this video we're going to continue with that last demo and we're going to implement an action messaging command in our project now the next thing we need to do is we need to code the action command for the messaging extension our action command when it's triggered is going to present the user with a modal dialog where they can select a planet from our solar system and the modal dialog is implemented using an adaptive card so after submitting the dialog the action command is going to use another adaptive card to add details about the selected planet to our message so what i'm going to do is i'm going to add a data set about all the different planets so a production application is pre is typically going to retrieve data from an external source like a rest api or a database but for simplicity in this demo i'm going to use an in-memory data set so i'm going to go into my planet bot create a new file called planets.json and then just paste in a big json array of all the different planets in our solar system a lot of this data came from wikipedia so um just want to make sure that i give that disclaimer that the data is being reused from wikipedia now the next thing we want to do is i want to go create an adaptive card that's going to be used to display our data so inside of our planet bot i'm going to create a new file called planet selector card.json and paste that in this contains our adaptive card to display the modal dialogue now to simplify working with some collections which is what we're doing in just what we're doing with our our planets i'm going to use a library to simplify that work so i'm going to install two packages i'm going to do an npm install of lodash and then i'm also going to install the type declarations for it as well so do an npm install types low dash like that so now let's go back to our bot so our bot is planet bot so i'm going to import lodash two functions or two utility functions from lodash and the find and the sort by as well so now i can implement the action command messaging extension by implementing a well-known method to the bot so within our bot uh i'm going to update the import statement for our bot builder because we need to add a few more entries like a card factory a messaging extension action a messaging extension action response and a messaging extension attachment as well now let's add another method to our planet bot and now let me explain what this method is doing this method method is first going to load the planets and sort them as you see here by the order by their order from the sun it's then going to load an adaptive card for the modal update and and update the planet selector it's going to do that uh right here by changing the planet selector uh it's going to do which is a drop down box uh it's going to this drop down box is now going to contain all of our sorted planets and then finally it's going to return an object of type messaging extension action response that defines the task module implemented using an adaptive card to the bot framework and the bot framework is going to communicate with microsoft teams to display the card so at this point the first part of our action command is complete that's going to prompt the user to select a planet with the messaging extension that's all been set up now the second part of this messaging extension is to use the selected plant to reply to the message that triggered the extension with the planet's details or if the extension was triggered from a compose box it's going to add the planet's details to the new message so now let's do the second part of this i'm going to add a new file here to our planet bot called the planet display card dot json and this is going to be the adaptive card used to display uh our planets now we don't need to dive through all this but basically all this is doing is creating a nice little form and be able to set all these different values on our planet now let's go back to our bot and let's add another handler to process the message when the messaging extensions adaptive card is submitted so this method here the handle teams messaging extension submit action that is a well-known method for the in the sdk this first is going to retrieve the planet selected in the adaptive card from the in-memory planet's data set so you can see that happening right here it then uses a little utility function we'll see that in a minute to load and update the adaptive car with the planet's details and then finally it's going to return a message messaging extension action response object that sets the adaptive card on the compose extension property microsoft teams is going to use this to display the details of the planet that was selected so the last thing we need to do is to go implement our utility method called get planet detail card and all this is doing is just taking a planet that's been passed in it's going to go open up that display card or load that json for the adaptive card that's going to display the card and then because it's json i'm just walking through all this code finding a specific id and setting all those values uh on the actual card now we're ready to test our bot so i'm going to come back over to our command line and run gulp ingrock serve keeping in mind that i'm using a custom subdomain with the license version of ngrok but if you use the free version of ingrock this is going to change every time you um that sub domain is going to change every single time that you run your your that you restart ngrok and when that happens you're going to lose the the subdomain changes and so you have to go to the bot framework and change the end point of where that's going to show up so now let's go now that we see our app that's running we're going to ignore all these eslint errors as they don't really pertain to the demo and i'm going to go install the bot so i'm going to go to my more apps and i'm going to upload a custom app from me or my teams and we'll find our messaging extension and we can see we have messages insert content directly into the message so i'll then go ahead and install that there we go now after installing the app microsoft teams takes us to the one-to-one chat with the with the microsoft teams app showing us our first dialogue so i'm gonna go ahead and cancel out of this dialog um because i wanna show you like the full experience with this so in the compose message for our chat i'm going to select either the planet messaging icon or the dot dot icon you can see here below the chat box and i'm going to go ahead and select plant messaging and now you can see that's how my dialog is popping up when the message when the messaging extensions task module is displayed i'm going to go select a planet so let's choose venus and then i'm going to say insert the selected planet the messaging extension will submit the action handler back to the bot framework and the bot framework is going to send that to our web service which is going to get the response go find venus in our in-memory database and update that adaptive card and send that back to the two microsoft teams which updates uh the text that you see here we could also do this exact same thing by updating an existing chat by going to this like uh uh dot dot dot choose dot dot dot and then go over here and select our planet expander to get the exact same thing to pop it up and to choose a different planet so you can see there's two ways to do it and it looks like the image from mars has been changed so we can run it again actually let's try and find another image so let's try let's try jupiter and there we go now jupiter shows up so that's pretty neat and that's where that big adaptive card came from that we had and we added it to our project uh that is going to be it's just showing a display information about the bot itself or about the planet that we selected so in this demo we created an action command messaging extension for a custom microsoft teams app