Simple input form in the Microsoft Teams Bot

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

Sharing is caring!

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

Hello World Tab in Microsoft Teams using yo Teams

This article provides steps to build the Hello World Tab in Microsoft Teams using yo Teams,

The yo Teams generator allows you to simply create and scaffold projects that include one or more Microsoft Teams features such as:

  • Bots – based on Bot Framework
  • Messaging Extensions – actions and query
  • Tabs, with support for Single-Sign-On
  • Connectors
  • Outgoing Webhooks

This article, we going to create Tabs, with support for Single-Sign-On

Implementing a Single sign-on (SSO)

Have to create one new app in the Azure active directory, click below to navigate to the App registration page and click “New Registration”

https://portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps

In the “Register as application” page give any name and select “Accounts in any organizational directory (Any Azure AD directory – Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)” and ignore the redirect URI as it is and click Register

Copy the newly created application ID from the Application overview page and keep it somewhere,

Prepare the ngrok URL

ngrok to can provide temporary public hosted URL, just for testing or development we don’t have to host the application in Azure or somewhere. ngrok will provide the public hosted url and the URL will target your localhost URL

check this URL for download and setup the ngrok, run the below comment in sperate PowerShell window after your ngrok setup is done. here setup means simple registration process from ngrok

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

That comment will provide the public https url like this, https://e69bc5ddf0d4.ngrok.io

Now go back to your azure, and select your newly created app then select “Expose an API”. In the top of the page, you can find the set option for Application ID URI, modify the uri in following format (api:// + ngrok url + applicationid) api://7074e3b7107f.ngrok.io/644707d7-5d3e-48f5-a408-bf0a953a8036

Click “+ Add new scope” button, fill values like below

Scope nameaccess_as_user
Who can consent?Admins and users
Admin consent display nameCan be enter anything
Admin consent descriptionCan be enter anything
User consent display nameCan be enter anything
User consent descriptionCan be enter anything
StateEnabled

add below two ids under “Add a client application” section, these are the team’s windows and mobile apps id, which is never changing. so we always have to use this same id. while you add don’t forgot to select the newly created scope

5e3ce6c0-2b1f-4285-8d4b-75ee78787346

1fec8e78-bce4-4aaf-ab1b-5451cc387264

Next, we have to provide permission for the Azure app, select “API Permission” and click “Add permission” > Graph API > Delegated permissions > select following and click “Add Permission” and click “Grand Admin consent”

☑ email – View users’ email address
☑ offline_access-Maintain access to data you have given it access to
☑ openid – Sign users in
☑ profile – View users’ basic profile

Prerequisite (Setup and prepare your machine)

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

npm install --global --production windows-build-tools
npm install yo gulp-cli --global
npm install generator-teams --global

Create a new Teams project

Run below Powershell comment for creating new teams project

yo teams

When prompted:

select the values same as like this screenshot pass the ngrock url and azure AD application id

Build and Run your app

Run following PowerShell comments once the project is created for Build and Run the app

gulp manifest
gulp build
gulp serve

Now you can access the app in this url http://localhost:3007/<tabname>/ also can access via ngrok url

When you access inside the teams, the application can be access the graph API and it will show the current user name

Run your app in Microsoft Teams

Installation zip package can be found in the package folder, In the Microsoft teams application or also can teams access via browser. select Apps, click “Upload a custom app” and Upload the file in the Microsoft Teams. Once added app can be accessible in any teams.

Select any one the teams and select any channel and one the top click Plus icon, in the popup search your app and add and access

Sharing is caring!

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

Building Echo Bot Application for Microsoft Teams

This article provides steps to build Echo Bot Application for Microsoft Teams, generally, The Echo Bot template is slightly more than the classic “Hello World!” example, but not by much. This template shows the basic structure of a bot, how a bot receives messages from a user, and how a bot sends messages to a user. The bot will “echo” back to the user, what the user says to the bot.   

Prerequisite

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

npm install --global --production windows-build-tools

Install Yeoman if you not already installed

npm install -g yo

Install yeoman generator for bot builder

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? Echo Bot – https://aka.ms/bot-template-echo
? 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 “Creat”. 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: process.env.MicrosoftAppId,
    // appPassword: process.env.MicrosoftAppPassword
    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. now your bot ready to access inside the Microsoft Teams.  

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

Sharing is caring!

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