{"id":12082,"date":"2022-10-25T08:00:21","date_gmt":"2022-10-25T15:00:21","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=12082"},"modified":"2022-10-24T11:58:02","modified_gmt":"2022-10-24T18:58:02","slug":"roll-a-dice-building-a-command-bot-for-microsoft-teams-using-teams-toolkit-with-visual-studio-code","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/roll-a-dice-building-a-command-bot-for-microsoft-teams-using-teams-toolkit-with-visual-studio-code\/","title":{"rendered":"Roll A Dice! Building a command bot for Microsoft Teams using Teams Toolkit with Visual Studio Code"},"content":{"rendered":"<p dir=\"auto\">Previously, in\u00a0<a class=\"fui-Link ___m14voj0 f3rmtva f1ern45e f1deefiw f1n71otn f1q5o8ev f1h8hb77 f1vxd6vx f1ewtqcl fyind8e f1k6fduh f1w7gpdv fk6fouc fjoy568 figsok6 f1hu3pq6 f11qmguv f19f4twv f1tyq0we f1g0x7ka fhxju0i f1qch9an f1cnd47f fqv5qza f1vmzxwi f1o700av f13mvf36 f9n3di6 f1ids18y fygtlnl f1deo86v f12x56k7 f1iescvh ftqa4ok f50u1b5 fs3pq8b f1hghxdh f1tymzes f1x7u7e9 f1cmlufx f10aw75t fsle3fq\" tabindex=\"-1\" title=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/beginners-crash-course-to-build-apps-for-teams-using-teams-toolkit-for-visual-studio-code\/\" href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/beginners-crash-course-to-build-apps-for-teams-using-teams-toolkit-for-visual-studio-code\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Link Beginners\u2019 crash course to build apps for Teams using Teams Toolkit for Visual Studio Code\">Beginners\u2019 crash course to build apps for Teams using Teams Toolkit for Visual Studio Code<\/a>, Rabia and Zhidi explained new features in Teams Toolkit and how the tool simplifies your experience. In this tutorial, I will show you a practical example by walking you through how to build a command bot. We are going to build a dice bot, which returns a random number between 1 and 6, when a user sends a command, &#8220;dice&#8221;.<\/p>\n<p dir=\"auto\">So, let&#8217;s get started! \ud83c\udfb2<\/p>\n<h2 dir=\"auto\"><a id=\"user-content--setting-up\" class=\"anchor\" href=\"https:\/\/gist.github.com\/girliemac\/b2b2b4f5f9801a8460a1cb262f70ea7a#-setting-up\" aria-hidden=\"true\"><\/a>\ud83d\udd27\u00a0Setting up<\/h2>\n<p dir=\"auto\">If this is your first-time using Teams Toolkit, please first go to this tutorial, <strong><a href=\"https:\/\/dev.to\/azure\/using-vs-code-toolkit-for-teams-app-development-2o0g\" rel=\"nofollow\">Using VS Code Teams Toolkit Extension for Teams App Development<\/a><\/strong>, follow the <strong>Prerequisites<\/strong> section and then <strong>Installing Teams Toolkit section<\/strong>. The tutorial was written for the earlier version of Toolkit, but the initial setup process is the same.<\/p>\n<p dir=\"auto\" style=\"text-align: left;\">I have created a YouTube video this time, so check it out!<\/p>\n<p dir=\"auto\" style=\"text-align: center;\"><iframe title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/BSxanVdealA\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h2 dir=\"auto\"><a id=\"user-content--scaffolding-a-command-bot-template\" class=\"anchor\" href=\"https:\/\/gist.github.com\/girliemac\/b2b2b4f5f9801a8460a1cb262f70ea7a#-scaffolding-a-command-bot-template\" aria-hidden=\"true\"><\/a>\ud83c\udfd7 Scaffolding a command bot template<\/h2>\n<p dir=\"auto\">In the Teams Toolkit extension in Visual Studio Code, click <strong>Create a new Teams app<\/strong>\u00a0then select the\u00a0<strong>Command bot<\/strong>\u00a0from the menu. See the screenshot below:<\/p>\n<p dir=\"auto\"><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/01-create.png\"><img decoding=\"async\" class=\"aligncenter wp-image-12091\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/01-create-1024x681.png\" alt=\"Image of creating a new Teams app in Teams Toolkit\" width=\"800\" height=\"532\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/01-create-1024x681.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/01-create-300x200.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/01-create-768x511.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/01-create-1536x1022.png 1536w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/01-create.png 2048w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p dir=\"auto\">Follow Teams Toolkit by choosing a language. Let&#8217;s choose <strong>JavaScript<\/strong> for this tutorial where you create the project in your local folder. Now give the app a name. Let&#8217;s name it &#8220;RollADice&#8221;.<\/p>\n<p dir=\"auto\">Teams Toolkit will then generate the scaffolding for you. Take a look around the code structure and familiarize yourself with the files!<\/p>\n<h2 dir=\"auto\"><a id=\"user-content-\ufe0f-running-the-template-code-in-teams\" class=\"anchor\" href=\"https:\/\/gist.github.com\/girliemac\/b2b2b4f5f9801a8460a1cb262f70ea7a#%EF%B8%8F-running-the-template-code-in-teams\" aria-hidden=\"true\"><\/a>\u2328\ufe0f Running the template code in Teams<\/h2>\n<p dir=\"auto\">Now, let&#8217;s try running the scaffolded code on the Teams client to see how the bot user-experience works.<\/p>\n<p dir=\"auto\">From the\u00a0<strong>Run and Debug<\/strong>\u00a0menu, choose\u00a0<strong>Debug (Edge)<\/strong>\u00a0(Chrome is fine, if you prefer!), and run by clicking the\u00a0<strong>Start debugging<\/strong>\u00a0green triangle. Or alternatively, press\u00a0<strong>F5<\/strong>\u00a0key on your keyboard.<\/p>\n<p dir=\"auto\"><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/02-command-bot-debug.png\"><img decoding=\"async\" class=\"aligncenter wp-image-12090\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/02-command-bot-debug-1024x681.png\" alt=\"Example image of how to debug your app by running the scaffolding code on Teams client.\" width=\"800\" height=\"532\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/02-command-bot-debug-1024x681.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/02-command-bot-debug-300x200.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/02-command-bot-debug-768x511.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/02-command-bot-debug-1536x1022.png 1536w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/02-command-bot-debug.png 2048w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p dir=\"auto\">Teams Toolkit will do some work for you, including checking prerequisites, Azure provision and bot registration, running ngrok to tunnel your local server, etc. If this is your first time, you will be asked to sign in to your Microsoft 365 account. Just follow the Toolkit instructions.<\/p>\n<p dir=\"auto\">It will take a while, but when it is done, a browser will load Teams client, then ask you to install the bot. So, go ahead and click <strong>Add<\/strong>\u00a0to install your bot:<\/p>\n<p dir=\"auto\"><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/03-install.png\"><img decoding=\"async\" class=\"aligncenter wp-image-12089\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/03-install-1024x681.png\" alt=\"Image of installing a bot\" width=\"800\" height=\"532\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/03-install-1024x681.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/03-install-300x199.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/03-install-768x511.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/03-install-1536x1021.png 1536w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/03-install-2048x1361.png 2048w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p dir=\"auto\">Once you add the bot, play around and see how it works. Notice that the command suggestions box pops up, like the screenshot below. This is a hint for the users for what bot commands are available. Try clicking it to send the command to the bot.<\/p>\n<p dir=\"auto\"><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/04-helloworld.png\"><img decoding=\"async\" class=\"aligncenter wp-image-12087\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/04-helloworld-1024x680.png\" alt=\"Image of helloWorld command to send a welcome message\" width=\"800\" height=\"531\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/04-helloworld-1024x680.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/04-helloworld-300x199.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/04-helloworld-768x510.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/04-helloworld-1536x1020.png 1536w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/04-helloworld.png 2048w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<h2 dir=\"auto\"><a id=\"user-content--creating-roll-a-dice-bot\" class=\"anchor\" href=\"https:\/\/gist.github.com\/girliemac\/b2b2b4f5f9801a8460a1cb262f70ea7a#-creating-roll-a-dice-bot\" aria-hidden=\"true\"><\/a>\ud83c\udfb2 Creating Roll-A-Dice bot<\/h2>\n<p dir=\"auto\">Now, let&#8217;s go back to Visual Studio Code and modify the code to turn it into a dice bot.<\/p>\n<h3 dir=\"auto\"><a id=\"user-content--defining-the-command-suggestion\" class=\"anchor\" href=\"https:\/\/gist.github.com\/girliemac\/b2b2b4f5f9801a8460a1cb262f70ea7a#-defining-the-command-suggestion\" aria-hidden=\"true\"><\/a>\ud83e\ude84 Defining the command suggestion<\/h3>\n<p dir=\"auto\">We are going to edit the suggestions content first. This is the result of what we are going to do here:<\/p>\n<p dir=\"auto\"><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/05-dice-suggestion.png\"><img decoding=\"async\" class=\"aligncenter wp-image-12088\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/05-dice-suggestion-1024x192.png\" alt=\"Image example of defining the command suggestion\" width=\"802\" height=\"150\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/05-dice-suggestion-1024x192.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/05-dice-suggestion-300x56.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/05-dice-suggestion-768x144.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/05-dice-suggestion-1536x287.png 1536w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/05-dice-suggestion-2048x383.png 2048w\" sizes=\"(max-width: 802px) 100vw, 802px\" \/><\/a><\/p>\n<p dir=\"auto\">Go to the file,\u00a0<strong>templates<\/strong>\u00a0&gt;\u00a0<strong>appPackage<\/strong>\u00a0&gt;\u00a0<strong>manifest.template.json<\/strong>.<\/p>\n<p dir=\"auto\">This is the file where the suggestions UI content is defined. Find the\u00a0<code>commands<\/code>\u00a0in\u00a0<code>commandLists<\/code>\u00a0in the JSON and change the title and description to:<\/p>\n<div class=\"highlight highlight-source-json\" dir=\"auto\">\n<pre><span class=\"pl-ent\">\"commands\"<\/span>: [\r\n  {\r\n    <span class=\"pl-ent\">\"title\"<\/span>: <span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>dice<span class=\"pl-pds\">\"<\/span><\/span>,\r\n    <span class=\"pl-ent\">\"description\"<\/span>: <span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>Roll a dice!<span class=\"pl-pds\">\"<\/span><\/span>\r\n  }\r\n]<\/pre>\n<\/div>\n<p dir=\"auto\">and save the file.<\/p>\n<h3 dir=\"auto\"><a id=\"user-content--command-and-response\" class=\"anchor\" href=\"https:\/\/gist.github.com\/girliemac\/b2b2b4f5f9801a8460a1cb262f70ea7a#-command-and-response\" aria-hidden=\"true\"><\/a>\ud83d\udcac Command and response<\/h3>\n<p dir=\"auto\">Now, go to\u00a0<strong>bot<\/strong>\u00a0&gt;\u00a0<strong>src<\/strong>\u00a0&gt;\u00a0<strong>helloWorldCommandHandler.js<\/strong>.<\/p>\n<p dir=\"auto\">In the\u00a0<code>HelloWorldCommandHandler<\/code>\u00a0class, find the line, where the\u00a0<code>triggerPatterns<\/code>\u00a0is defined and edit the command to &#8220;dice&#8221;:<\/p>\n<div class=\"highlight highlight-source-js\" dir=\"auto\">\n<pre><span class=\"pl-s1\">triggerPatterns<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-s\">'dice'<\/span><span class=\"pl-kos\">;<\/span><\/pre>\n<\/div>\n<p dir=\"auto\">You don&#8217;t need to worry about the case of the command. Users can type &#8220;dice&#8221;, &#8220;Dice&#8221;, &#8220;DICE&#8221;, &#8220;DiCe&#8221;, and they are all valid commands!<\/p>\n<p dir=\"auto\">Then, define the bot reply message. In the\u00a0<code>handleCommandReceived<\/code>\u00a0function, let&#8217;s create a message content with a generate random number:<\/p>\n<div class=\"highlight highlight-source-js\" dir=\"auto\">\n<pre><span class=\"pl-en\">async<\/span> <span class=\"pl-s1\">handleCommandReceived<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-s1\">context<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s1\">message<\/span><span class=\"pl-kos\">)<\/span> <span class=\"pl-kos\">{<\/span>\r\n  <span class=\"pl-c\">\/\/ Generate a random number between 1 and 6<\/span>\r\n  <span class=\"pl-k\">const<\/span> <span class=\"pl-s1\">result<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-v\">Math<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-en\">floor<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-v\">Math<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-en\">random<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-kos\">)<\/span> <span class=\"pl-c1\">*<\/span> <span class=\"pl-c1\">6<\/span><span class=\"pl-kos\">)<\/span> <span class=\"pl-c1\">+<\/span> <span class=\"pl-c1\">1<\/span><span class=\"pl-kos\">;<\/span>\r\n\r\n  <span class=\"pl-c\">\/\/ Images of dice faces (Using creative commons images from Wikimedia)<\/span>\r\n  <span class=\"pl-k\">const<\/span> <span class=\"pl-s1\">images<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-kos\">[<\/span>\r\n  <span class=\"pl-s\">'https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/6\/62\/Kismet-Ace.png\/240px-Kismet-Ace.png'<\/span><span class=\"pl-kos\">,<\/span>\r\n <span class=\"pl-s\">'https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/6\/6d\/Kismet-Deuce.png\/240px-Kismet-Deuce.png'<\/span><span class=\"pl-kos\">,<\/span>\r\n <span class=\"pl-s\">'https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/f\/f2\/Kismet-Trey.png\/240px-Kismet-Trey.png'<\/span><span class=\"pl-kos\">,<\/span>\r\n <span class=\"pl-s\">'https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/1\/11\/Kismet-Four.png\/240px-Kismet-Four.png'<\/span><span class=\"pl-kos\">,<\/span>\r\n <span class=\"pl-s\">'https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/8\/8e\/Kismet-Five.png\/240px-Kismet-Five.png'<\/span><span class=\"pl-kos\">,<\/span>\r\n <span class=\"pl-s\">'https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/4\/4e\/Kismet-Six.png\/240px-Kismet-Six.png'<\/span><span class=\"pl-kos\">,<\/span>\r\n    <span class=\"pl-kos\">]<\/span><span class=\"pl-kos\">;<\/span>\r\n\r\n  <span class=\"pl-c\">\/\/ Reply message - rendered in an Adaptive Card<\/span>\r\n    <span class=\"pl-k\">const<\/span> <span class=\"pl-s1\">cardData<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-kos\">{<\/span>\r\n      <span class=\"pl-c1\">title<\/span>: <span class=\"pl-s\">'Roll a Dice \ud83c\udfb2'<\/span><span class=\"pl-kos\">,<\/span>\r\n      <span class=\"pl-c1\">body<\/span>: <span class=\"pl-s\">`You've got <span class=\"pl-s1\"><span class=\"pl-kos\">${<\/span>result<span class=\"pl-kos\">}<\/span><\/span>!`<\/span><span class=\"pl-kos\">,<\/span>\r\n      <span class=\"pl-c1\">thumbnail<\/span>: <span class=\"pl-s1\">images<\/span><span class=\"pl-kos\">[<\/span><span class=\"pl-s1\">result<\/span> <span class=\"pl-c1\">-<\/span> <span class=\"pl-c1\">1<\/span><span class=\"pl-kos\">]<\/span><span class=\"pl-kos\">,<\/span>\r\n    <span class=\"pl-kos\">}<\/span><span class=\"pl-kos\">;<\/span>\r\n\r\n  <span class=\"pl-k\">return<\/span> <span class=\"pl-v\">MessageBuilder<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-en\">attachAdaptiveCard<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-s1\">helloWorldCard<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s1\">cardData<\/span><span class=\"pl-kos\">)<\/span><span class=\"pl-kos\">;<\/span>\r\n  <span class=\"pl-kos\">}<\/span><\/pre>\n<\/div>\n<h3 dir=\"auto\"><a id=\"user-content--creating-message-ui-with-adaptive-cards\" class=\"anchor\" href=\"https:\/\/gist.github.com\/girliemac\/b2b2b4f5f9801a8460a1cb262f70ea7a#-creating-message-ui-with-adaptive-cards\" aria-hidden=\"true\"><\/a>\ud83e\udeaa Creating message UI with Adaptive Cards<\/h3>\n<p dir=\"auto\">Here, I want to display a dice image along with the result in a reply message nicely, so we are going to use\u00a0<a href=\"https:\/\/adaptivecards.io\/?WT.mc_id=m365-79637-timura\" rel=\"nofollow\">Adaptive Cards<\/a>\u00a0to customize the message UI layout.<\/p>\n<p dir=\"auto\">The layout is defined in JSON in the file at\u00a0<strong>bot<\/strong>\u00a0&gt;\u00a0<strong>src<\/strong>\u00a0&gt;\u00a0<strong>adaptiveCards<\/strong>\u00a0&gt;\u00a0<strong>helloworldCommand.json<\/strong>. But let&#8217;s hold on to it and we&#8217;ll come back to the file later because we are going to use a visual tool to create the JSON first.<\/p>\n<p dir=\"auto\">In a browser, go to\u00a0<strong>Adaptive Cards Editor<\/strong>\u00a0tool section in Developer Portal at\u00a0<a href=\"https:\/\/dev.teams.microsoft.com\/cards?WT.mc_id=m365-79637-timura\" rel=\"nofollow\">dev.teams.microsoft.com\/cards<\/a>, create a new card by clicking\u00a0<strong>Create new card<\/strong>.<\/p>\n<p dir=\"auto\">Let&#8217;s use the\u00a0<strong>Thumbnail card<\/strong>\u00a0template as a starting point. In the preview pane, delete the buttons and text in the template and leave only a thumbnail, title, and subtitle, to create a simple UI.<\/p>\n<p dir=\"auto\"><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/06-card-editor.png\"><img decoding=\"async\" class=\"aligncenter wp-image-12086\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/06-card-editor-1024x632.png\" alt=\"Image of a card editor using Teams Toolkit in Teams Developer Portal\" width=\"800\" height=\"494\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/06-card-editor-1024x632.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/06-card-editor-300x185.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/06-card-editor-768x474.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/06-card-editor-1536x948.png 1536w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/06-card-editor-2048x1264.png 2048w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p dir=\"auto\">The edits I made for the tutorial include:<\/p>\n<ul dir=\"auto\">\n<li>Remove buttons and text from the template<\/li>\n<li>Set the thumbnail layout property for size to &#8220;medium&#8221;<\/li>\n<li>Double-click the title and change to a variable, &#8220;${title}&#8221;<\/li>\n<li>Set the title style property for weight to &#8220;bolder&#8221;<\/li>\n<li>Change the subtitle to &#8220;${body}&#8221;<\/li>\n<\/ul>\n<p dir=\"auto\">But feel free to customize in the way you want!<\/p>\n<p dir=\"auto\">Now, copy the generated JSON into the\u00a0<strong>helloworldCommand.json<\/strong>.<\/p>\n<p dir=\"auto\">In the YouTube tutorial, you can follow the instruction at\u00a0<a href=\"https:\/\/www.youtube.com\/watch?v=BSxanVdealA&amp;t=286s?WT.mc_id=m365-79637-timura\" rel=\"nofollow\">4:46<\/a>\u00a0and watch me how to use the tool. In the video, I copy &amp; paste the JSON first then modify some content manually, instead of editing all properties in the visual tool. You can do in either way.<\/p>\n<h3 dir=\"auto\"><a id=\"user-content--running-the-bot\" class=\"anchor\" href=\"https:\/\/gist.github.com\/girliemac\/b2b2b4f5f9801a8460a1cb262f70ea7a#-running-the-bot\" aria-hidden=\"true\"><\/a>\ud83e\udd16\u00a0Running the Bot<\/h3>\n<p dir=\"auto\">Let&#8217;s run the code in Teams client again, using the &#8220;F5&#8221; tool and see how it works. Once added the bot, try sending the &#8220;dice&#8221; command.<\/p>\n<p dir=\"auto\"><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/07-dice-bot.png\"><img decoding=\"async\" class=\"aligncenter wp-image-12085\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/07-dice-bot-1024x681.png\" alt=\"Image of running the RollADice bot in Teams\" width=\"800\" height=\"532\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/07-dice-bot-1024x681.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/07-dice-bot-300x199.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/07-dice-bot-768x511.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/07-dice-bot-1536x1021.png 1536w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/07-dice-bot-2048x1361.png 2048w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p dir=\"auto\">I hope your bot works as it should\u00a0\ud83c\udfb2<\/p>\n<h2 dir=\"auto\"><a id=\"user-content--hacking-it-more\" class=\"anchor\" href=\"https:\/\/gist.github.com\/girliemac\/b2b2b4f5f9801a8460a1cb262f70ea7a#-hacking-it-more\" aria-hidden=\"true\"><\/a>\ud83d\udca1 Hacking it more<\/h2>\n<p dir=\"auto\">Now that you know the basics of command bots for Teams, so I suggest you tweak the bot further to make it more interesting.<\/p>\n<p dir=\"auto\">The bot we just created is a six-faced dice and only replies with a number between one and six. But it would be more interesting if each user could decide the type of dice, such as 12-sided dodecahedron, 20-sided icosahedron, chiliagon with 1000 sides, or any n-sided theoretical dice.<\/p>\n<p dir=\"auto\">So, we can make the bot to take a parameter along with the command, such as <code>dice 12<\/code>\u00a0so that the dice bot can return a number between 1 and 12. Or between 1 and 1000 for\u00a0<code>dice 1000<\/code>\u00a0command.<\/p>\n<p dir=\"auto\">You can tweak the code to read a parameter like this:<\/p>\n<div class=\"highlight highlight-source-js\" dir=\"auto\">\n<pre><span class=\"pl-k\">const<\/span> <span class=\"pl-s1\">strs<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-s1\">message<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-c1\">text<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-en\">split<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-s\">' '<\/span><span class=\"pl-kos\">)<\/span><span class=\"pl-kos\">;<\/span>\r\n\r\n<span class=\"pl-k\">const<\/span> <span class=\"pl-s1\">max<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-s1\">strs<\/span><span class=\"pl-kos\">[<\/span><span class=\"pl-c1\">1<\/span><span class=\"pl-kos\">]<\/span> ? <span class=\"pl-en\">parseInt<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-s1\">strs<\/span><span class=\"pl-kos\">[<\/span><span class=\"pl-c1\">1<\/span><span class=\"pl-kos\">]<\/span><span class=\"pl-kos\">)<\/span> : <span class=\"pl-c1\">6<\/span><span class=\"pl-kos\">;<\/span>\r\n<span class=\"pl-k\">if<\/span> <span class=\"pl-kos\">(<\/span><span class=\"pl-en\">isNaN<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-s1\">max<\/span><span class=\"pl-kos\">)<\/span><span class=\"pl-kos\">)<\/span> <span class=\"pl-kos\">{<\/span>\r\n  <span class=\"pl-k\">return<\/span> <span class=\"pl-v\">MessageBuilder<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-en\">attachHeroCard<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-s\">`Invalid number: <span class=\"pl-s1\"><span class=\"pl-kos\">${<\/span>strs<span class=\"pl-kos\">[<\/span><span class=\"pl-c1\">1<\/span><span class=\"pl-kos\">]<\/span><span class=\"pl-kos\">}<\/span><\/span>`<\/span><span class=\"pl-kos\">)<\/span><span class=\"pl-kos\">;<\/span>\r\n<span class=\"pl-kos\">}<\/span>\r\n<span class=\"pl-k\">const<\/span> <span class=\"pl-s1\">result<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-v\">Math<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-en\">floor<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-v\">Math<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-en\">random<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-kos\">)<\/span> <span class=\"pl-c1\">*<\/span> <span class=\"pl-s1\">max<\/span><span class=\"pl-kos\">)<\/span> <span class=\"pl-c1\">+<\/span> <span class=\"pl-c1\">1<\/span><span class=\"pl-kos\">;<\/span>\r\n\r\n<span class=\"pl-k\">const<\/span> <span class=\"pl-s1\">cardData<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-kos\">{<\/span>\r\n  <span class=\"pl-c1\">title<\/span>: <span class=\"pl-s\">`Roll a <span class=\"pl-s1\"><span class=\"pl-kos\">${<\/span>max<span class=\"pl-kos\">}<\/span><\/span>-sided dice \ud83c\udfb2`<\/span><span class=\"pl-kos\">,<\/span>\r\n  <span class=\"pl-c1\">body<\/span>: <span class=\"pl-s\">`You've got <span class=\"pl-s1\"><span class=\"pl-kos\">${<\/span>result<span class=\"pl-kos\">}<\/span><\/span>!`<\/span><span class=\"pl-kos\">,<\/span>\r\n<span class=\"pl-kos\">}<\/span><span class=\"pl-kos\">;<\/span><\/pre>\n<\/div>\n<p dir=\"auto\"><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/08-hack-dice-bot.png\"><img decoding=\"async\" class=\"aligncenter wp-image-12084\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/08-hack-dice-bot-1024x681.png\" alt=\"Image of creating bots to roll a 20-sided and 100-sided dice in Teams\" width=\"800\" height=\"532\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/08-hack-dice-bot-1024x681.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/08-hack-dice-bot-300x199.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/08-hack-dice-bot-768x510.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/08-hack-dice-bot-1536x1021.png 1536w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/08-hack-dice-bot.png 2046w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p dir=\"auto\">Don&#8217;t forget to modify the command suggestion UI content too. I encourage you to modify the code and add more features to create your own dice bot!\u00a0Or use your imagination to build something else, like a weather bot, cryptocurrency bot, dad joke bot&#8230; The ideas are endless.<\/p>\n<p dir=\"auto\">If you build some interesting bots, please let me know! Mahalo, and see you in the next blog post\u00a0\ud83e\udd19<\/p>\n<p dir=\"auto\">Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Previously, in\u00a0Beginners\u2019 crash course to build apps for Teams using Teams Toolkit for Visual Studio Code, Rabia and Zhidi explained new features in Teams Toolkit and how the tool simplifies your experience. In this tutorial, I will show you a practical example by walking you through how to build a command bot. We are going [&hellip;]<\/p>\n","protected":false},"author":77786,"featured_media":12083,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[128],"tags":[171,23,55,44],"class_list":["post-12082","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-teams","tag-bots","tag-teams-toolkit","tag-visual-studio","tag-visual-studio-code"],"acf":[],"blog_post_summary":"<p>Previously, in\u00a0Beginners\u2019 crash course to build apps for Teams using Teams Toolkit for Visual Studio Code, Rabia and Zhidi explained new features in Teams Toolkit and how the tool simplifies your experience. In this tutorial, I will show you a practical example by walking you through how to build a command bot. We are going [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/12082","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/77786"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=12082"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/12082\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/12083"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=12082"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=12082"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=12082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}