This article provides steps to build simple input form in the Microsoft Teams Bot, generally, adaptive card awesome user interface for collect data and display data in Microsoft Teams chat. This input form is just a type of cards you can create. we make adaptive cards for any scenario possible! 

Prerequisite

Run below PowerShell command in Run as Administrator mode and close them once installation done

npm install --global --production windows-build-tools
npm install -g yo
npm install -g generator-botbuilder

Create a new bot project

Run below Powershell comment for creating new bot project 

yo botbuilder

When prompted:

? What’s the name of your bot? Enter your project name
? What will your bot do? Enter your project description
? What programming language do you want to use? TypeScript
? Which template would you like to start with? Empty Bot – https://aka.ms/bot-template-empty
? Looking good. Shall I go ahead and create your new bot? Y

Start Visual Studio Code (or your favorite code editor) within the context of the newly created project folder.

cd .\bot project name\
code .

Test run

Run the following comment to start your bot project 

npm start

Run the ngrok to make hosted url, for testing you don’t have to host the application in Azure. ngrok will help us to bypass that step for your test run

check this URL for download and setup the ngrok, run the below comment in sperate PowerShell window after your ngrok configuration is done.

Run below comment once ngrok setup is done, this will provide the public https url like this, https://e69bc5ddf0d4.ngrok.io

cd .\directory of ngrok.exe\

./ngrok.exe http http://localhost:3978/ -host-header="localhost:3978"

Creating Bot Channel in Azure

In the Azure portal search Bot services or click this link. In this page click +Add and select option called “Bot Channels Registration” and click “Create”. In the bot channel creation form select based on your preference and “Messaging endpoint” should be your ngrok url in following format https://e69bc5ddf0d4.ngrok.io/api/messages. Once everything selected click create.
Once bot channel created, goto “Bot Services” page and select newly created bot channel then click settings then you can find the read-only value of “Microsoft APP ID” also you can find the manage link to create new client secret. this both “Microsoft APP ID” and “client secret” values are the security layer for access your bot. you have to configure both values in your project.  

goto “src\index.ts” file in your project and find the adapter const and replace the values like below code

// Create adapter.
// See https://aka.ms/about-bot-adapter to learn more about adapters.
const adapter = new BotFrameworkAdapter({
    appId: '6c87964d-6fbb-4a73-8b80-235fda23e625',
    appPassword: 'ABJXyqm22GH.h5685qDvCMUH_75.VR._n~'
});

One more step has to do in the Azure, go to your bot channel and click Channels and select Microsoft Teams and click done.

Adaptive Card

we can make the adaptive card designs at https://adaptivecards.io/

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "text": "Please enter your details"
    },
    {
      "type": "Input.Text",
      "id": "firstName",
      "placeholder": "What is your first name?"
    },
    {
      "type": "Input.Text",
      "id": "lastName",
      "placeholder": "What is your last name?"
    },
    {
      "type": "Input.Text",
      "id": "email",
      "placeholder": "What is your Email?"
    }

  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Submit",
      "data": {
        "x": 13
      }
    }
  ]
}

In the src\bot.ts file import the adaptive card and use it  

import { ActivityHandler,CardFactory } from 'botbuilder';
const card = require('../resources/InputFormCard.json');

export class EmptyBot extends ActivityHandler {
    constructor() {
        super();
        this.onMessage(async (context, next) => {
            if(context.activity.value)
            {
                await context.sendActivity(`Name: ${context.activity.value.firstName}\n\n\n\nMobile Number: ${context.activity.value.lastName}\n\n\n\nEmail: ${context.activity.value.email}`);;
            }
            await next();
        });

        this.onMembersAdded(async (context, next) => {
            const membersAdded = context.activity.membersAdded;
            for (const member of membersAdded) {
                if (member.id !== context.activity.recipient.id) {
                    const inputCard = CardFactory.adaptiveCard(card);
                    await context.sendActivity('Hello world!');
                    await context.sendActivity({ attachments: [inputCard] });
                }
            }
            await next();
        });
    }
}

Adding echo bot in Microsoft Teams

You have to add the “App Studio” if already not added. this app help to to make manifest file. This manifest file basically contains all the interaction details between your app and teams.
Open the “App Studio” app and select “Create a new app” and in the new app form, fill all the values in the details section then jump to the bots. in the bots section click setup and select existing bot and try to find your azure bot channel in the “Select from one of my existing bot” if it is disabled or not found then paste your app id in the “connect to different bot id text field. select all the scopes and click save. jump to the last “Test and distribute” tab install if you found error then download the zip file and got apps and choose “Upload a custom app” option. once app added select the app and click add to chat. Now your Echo chat is available to use in the teams chat section 

Bot Expolorer

Bot explorer is a very useful tool for bot functionality testing, you can download this app from this url, you also check the latest version before downloading from that link  

in the bot explorer click “Open Bot” button to see the open bot popup window, in this popup you have to enter the bot url, you can enter localhost url or ngrok url in this format https://e69bc5ddf0d4.ngrok.io/api/messages . Enter the Microsoft App ID and Microsoft App Password and click connect. even you can keep these both empty if your Microsoft App ID is not configured in your project

Simple input form in the Microsoft Teams Bot

🔗github.com

Sharing is caring!

If you have any questions, feel free to let me know in the comments section.
Happy coding!!!