Reading Time: 6 minutes

Introduction

Messaging extensions are a powerful way for users to engage with your app from Microsoft Teams. With this capability, users can query or post information to and from your service and post that information, in the form of cards, right into a message.

Messaging extensions appear along the bottom of the compose box. A few are built in, such as Emoji, Giphy, and Sticker. Choose the More Options () button to see other messaging extensions, including those you add from the app gallery or upload yourself.

How would you use messaging extensions? Here are a few possibilities:

  1. Work items and bugs
  2. Customer support tickets
  3. Usage charts and reports
  4. Images and media content
  5. Sales opportunities and leads

Types of Message Extension

  1. Search based messaging extensions
  2. Action-based messaging extensions

Create custom Microsoft Teams messaging extensions to get book information and share via chat

Output

Cards

A card is a user-interface container for short or related pieces of information. Cards can have multiple properties and attachments. Cards can include buttons which can trigger Card actions

You can find additional information on how to use cards here

Add a messaging extension to your app

A messaging extension is a cloud-hosted service that listens to user requests and responds with structured data, such as a card. You integrate your service with Microsoft Teams via Bot Framework Activity objects.

In this example, I am using ngrok to share our local host to publicly

Ngrok creates a secure tunnel to expose local networked services (like a web server) at a publicly-accessible URL. Simply put, we can run a local Node.js app on our computer at localhost:8080 and have someone across the world and outside our network access this local web server at a URL such as http://d594cf96.ngrok.io

Important : If you plan to use ngrok at work, you should also have a talk about what ngrok is with your system administrator or whomever is responsible for network security. Punching a hole in a corporate firewall or NAT can be disastrous, especially if malicious users of your publicly-accessible app can manipulate your file system or access other computers on your network.

In this post I am showing how to create Messaging extension using nodejs Step by step

Step 1: Create new Nodejs Project

First, open a command prompt and create a new directory for our code, then navigate into it:

md MessagingExtensions
cd MessagingExtensions

Create a new Node.js project by creating our package.json file with the following command:

npm init


Enter your project details and then install ngrok
npm install ngrok

then open the project using Visual studio code, type below command

code ..

Create a file called getBooks.js and paste the following code:

      
const ngrok = require('ngrok');

var request = require('request');
var util = require("util");
var restify = require('restify');
var builder = require('botbuilder');
var teams = require('botbuilder-teams');

var connector = new teams.TeamsChatConnector({
appId: "<update the bot ID>",
appPassword: "<update the bot ID password>"
});


const port = 8080;

var server = restify.createServer();

server.listen(port, function() {
console.log(`Node.js server listening on ${port}`);
ngrok.connect(port, function(err, url) {
console.log(`Node.js local server is publicly-accessible at ${url}`);
});
console.log('%s listening to %s', server.name, util.inspect(server.address()));
});

// this will reset and allow to receive from any tenants
connector.resetAllowedTenants();

var bot = new builder.UniversalBot(connector);

server.post('/api/composeExtension', connector.listen());
server.post('/api/messages', connector.listen());
server.post('/', connector.listen());

var composeExtensionHandler = function(event, query, callback) {
var attachments = [];
var url = "https://www.googleapis.com/books/v1/volumes?q=" + query.parameters[0].value + "&limit=100&offset=0";
if (query.parameters[0].value == undefined | query.parameters[0].value == '') {
url = "https://www.googleapis.com/books/v1/volumes?q=ISBN:9780789748591&limit=10";
}
request(url, {
json: true
}, (err, res, body) => {
if (err) {
return console.log(err);
}
var data = body;
for (var o of data.items) {
try {

console.log(o.volumeInfo.title);

var logo = {
alt: o.volumeInfo.title,
url: o.volumeInfo.imageLinks.thumbnail
};

var card = new builder.HeroCard()
.title("Title: " + o.volumeInfo.title)
.text("" + o.volumeInfo.description)
.subtitle("Publisher: " + o.volumeInfo.publisher)
.images([logo])
.buttons([{
type: "openUrl",
title: "View Image",
value: o.volumeInfo.imageLinks.thumbnail
}]);

attachments.push(card.toAttachment());


} catch (err) {
console.log(err);
}
};


var response = teams.ComposeExtensionResponse
.result('list')
.attachments(attachments)
.toResponse();

// Send the response to teams
callback(null, response, 200);


//}
});


};

connector.onQuery('searchCmd', composeExtensionHandler);



var composeInvoke = function(event) {
console.log(event);
};


connector.onInvoke('composeInvoke');

The code above is fairly straightforward, I am searching books and building as Hero card and sent to chat window by attachment object and I am using Google API to get books by ISBN number

Then install below headers to refer the objects

npm install restify
npm install botbuilder@3.13.1
npm install botbuilder-teams

Now we completed the get books messaging extension coding.

Step 2: Create manifest.json file using AppStudio

Go to https://teams.microsoft.com

Login with your office 365 credencials

go to apps and find App Studio, refer below picture

Note: if App Studio is not available, then install it.


Move to Manifest editor, and create new app

Update Appdetails and Messaging extensions under capabilities section

In Messaging extension –> Click Setup and provide bot name

Then get the bot ID and app password(generate new password) from messaging extension section

go to getBooks.js file to update AppID and Password refer below section

  
var connector = new teams.TeamsChatConnector({
appId: "d2052104-0d83-40ad-b7b4-19cf537a6c99",
appPassword: "123456@JnZSoaRQVzfWg@242323-333"
});

Then add Messaging endpoint URL, to get public URL with https we need ngrok

Step 3: Use ngrok to start listening on port 8080

Go to Command prompt and type below command to start the application

node getBooks.js

Open ngrok.com and login with your credentials

Then open new browser and access
http://localhost:4040/inspect/http

Then you can able to see the public url example
https://24af2b2f.ngrok.io/

Then go to AppStudio and update the Bot endpoint address, refer below image

https://24af2b2f.ngrok.io/api/messages

Then add command to search books

Click Test and distribute to test the app

It is open new window, click install and add the app to verify

Then Download the app package to test from your channel

Step 4: Install the app to your Team

Go to you team –> navigate to Manage Team

Then Click App tab and upload a custom app (select the downloaded zip file to upload)

Now it is available in our Teams

Then go to your channel and test it

Click dot’s and see your message extension

Select your app and click to search books based on ISBN number

Select the Book and it will build Hero Card with title, publisher, image and description

manifest.json file FYR

{
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.5/MicrosoftTeams.schema.json",
"manifestVersion": "1.5",
"version": "1.0.0",
"id": "afc28e3f-0b57-4478-b368-92744c1f93cb",
"packageName": "jpower4.msteams.messagingextension",
"developer": {
"name": "Jenkins NS",
"websiteUrl": "https://github.com/jenkinsns",
"privacyUrl": "https://github.com/jenkinsns",
"termsOfUseUrl": "https://github.com/jenkinsns"
},
"icons": {
"color": "color.png",
"outline": "outline.png"
},
"name": {
"short": "Get Books App",
"full": "To get books using ISBN number"
},
"description": {
"short": "Messaging extension Teams App development",
"full": "Messaging extension Teams solution development"
},
"accentColor": "#FFFFFF",
"composeExtensions": [
{
"botId": "d2052104-0d83-40ad-b7b4-19cf537a6c99",
"canUpdateConfiguration": false,
"commands": [
{
"id": "searchCmd",
"type": "query",
"title": "Search",
"description": "Search for your Book",
"initialRun": true,
"fetchTask": false,
"context": [
"commandBox",
"compose",
"message"
],
"parameters": [
{
"name": "searchKeyword",
"title": "ISBN Number",
"description": "Enter your ISBN Number",
"inputType": "text"
}
]
}
]
}
],
"permissions": [
"identity",
"messageTeamMembers"
],
"validDomains": []
}

“Sharing is caring” #MicrosoftTeams #jpower4 #sharepoint