Building Signeasy for Microsoft Teams v2

We recently released v2.0 of our integration with Microsoft Teams.  It is a bundle of exciting features that helps users sign documents, and send signature requests—all without having to leave the Microsoft Teams ecosystem. 

Technically, Microsoft Teams is known for its multiple points of extensibility. Today, Signeasy will be seen in the following extensibility points.

  • Tabs
  • Bots
  • Messaging Extension

The Why

With this release, we intended to enter into the collaborative scope by integrating the Signeasy app within the team channels. The objective was to help users sign and send requests for signatures faster and collaborate more efficiently as a team. 

The What 

The following capabilities are supported by Signeasy for Microsoft Teams Version 2.0.

A developers journey Blog Tabl

The Workflow 

This diagram provides a snapshot of how the messaging extension, personal bot, and tabs are built. 
4BemKBMS GoG5a4ih7ol2XtJXhkRKGJ5gDXz8FQXCNkKiPPkWk4AE3YyGDjKaIkbaGrUW6wNImRv9mDnCFBt22zC1FAe9YR74gdE2BKj6RPBvcjUn rxalE8JYWVFi

 The How

Let us take you on a journey about how we built this, and some key learnings on the way.

Date of LaunchNovember 17th 2021
PlatformsDesktop and Mobile
Manifest Version1.9
Manifest Schemahttps://developer.microsoft.com/en-us/json-schemas/teams/v1.9/MicrosoftTeams.schema.json
Node Version14.17
TechnologiesReact + Typescript + ExpressJS, [microsoft/teams-js : 1.10.0 botbuilder: 4.13.6 react: 16.8.6 typescript: 4.0.3]

When it comes to building an application for Microsoft Teams, Every step in the process requires due diligence, for the application to run successfully. Here are a few key milestones we focused on, as we went about building the application:

1️) As recommended by Microsoft’s development guidelines, we store all configuration details in the .env file.

2)  The application is built using the “build” Gulp task. 

The “yoteams-build-core [https://www.npmjs.com/package/yoteams-build-core]” helps with building the project, and serving it in a ngrok-url, for local development. When the code is ready for production, gulp ngrok-serve is replaced with gulp serve. Both of these commands are supported by the yoteams-build-core library. 

The gulp serve task runs easily in Docker Containers, too.

const gulp = require("gulp");
const argv = require("yargs").argv;
const path = require("path");
const config = {};
// Set environment variables
const env = argv.env;
if (env === undefined) {
   require("dotenv").config();
} else {
   require("dotenv").config({ path: path.resolve(process.cwd(), env) });
}
const core = require("yoteams-build-core");
// Initialize core build
core.setup(gulp, config);

We have ensured we are working on the latest versions of npm, yo, gulp, typescript, and Git. However, we have limited ourselves to Node Version 14.18. 

Here’s why: https://github.com/webpack/webpack/issues/14532

npm install yo gulp-cli typescript --global
gulp ngrok-serve
gulp build

3️)  To create the Microsoft Teams apps manifest, we run the “manifest” gulp task. This generates, validates,and finally creates the package (a zip file) in the “package” folder. The manifest is  validated against the schema and dynamically populated with values from the `.env` file.

gulp manifest

The manifest file provided below, translates to the package com.signeasy.teams.extension.zip, with the gulp manifest task. This package needs to be uploaded into App Studio for local testing, or into the Microsoft partner center to publish the application.

All variables enclosed with {{ }} will be picked from the .env file, during the gulp manifest task.

{
"$schema":"https://developer.microsoft.com/en-us/json-schemas/teams/v1.9/MicrosoftTeams.schema. json",
 "manifestVersion": "1.9",
 "id":  "{{MICROSOFT_APP_ID}}",
 "version": "2.0",
 "packageName": "com.signeasy.teams.extension",
 "developer": {
   "name": "Signeasy",
   "websiteUrl":  "{{WEBSITE_URL}}",,
   "privacyUrl": "{{PRIVACY_URL}}",
   "termsOfUseUrl": "{{TERMS_AND_CONDITIONS_URL}}"
 },
 "name": {
   "short": "{{APP_NAME}}",
   "full": "{{APP_NAME}}"
 },
 "description": {
    "short": "{{APP_DESCRIPTION_SHORT}}",
   "full": "{{APP_DESCRIPTION_FULL}}"
.
.
.
. 
"validDomains": [
   "{{PUBLIC_HOSTNAME}}"
 ],
}

4) The messaging endpoint has to be updated in the bot framework for both the messaging extension and the personal bot to work properly.

If you are using an older bot, follow these steps:

qmANUanU33rq8i739ajujaepfIBe6v5qECxctsI92YgSfxGiv7xWQ73L3HiMxuqj1qWaQ4yHEcJIQzJ kBZFL5h04DCBMx2WTtFdo2Xwo pvAjAwI1n9TZuFVEMXjc1AcGbfSu9

  • Choose a bot and navigate to “Settings”. Here, the messaging endpoint should be in the following format. Ensure “Enable Streaming Endpoint” is enabled

2m7A jTa2HRL rpOR7TT1cmW xt4Wxmg mDqfaku8EtQZjXNwNt69FriAsfSQ38z7q5I33MhdmWCzaC7GBE 7t39MXRYpP9cIhMC XfLwo

  • Then, save.

If you are using a bot created via the Azure Framework, follow these steps:

  • Choose your bot from the Resources.5yYMwVM0hZFdP9wzez3fISPyP5LipXGg0j YQYUHXeY1bxd7JtP0q8awhf6O 1XM3Ihw8H o1uF8QR6l3sSbeR2djhTxIYYuRVvHkS0W5z6xGPXF8qhqOI56QudEXMyXz6nj S27
  • Choose your bot from the Resources, and modify the messaging endpoint. 

TQWGF042oc5LLiciIo8vuLlN2zqmFfux 0LIYuWUJWN13k0sZrlVNf 5W2VgTcAWoGK14dnd0Ji9p8d5PwL8LoSDVGfW FzES opdSYXAl3IthMD6bM1KDRf3BmuK4IGb87VRkH

  • Apply the changes. If it doesn’t apply immediately, click twice. It works 😉

A Developer’s Journey Inside Teams

x YCkzoedKLaREhowiDhFYj09gNKKWCY866sq2ICh13ZzxNPdQIKMwy8fzRe3uAlMyNP6qS5HEtMLwDRgaJVZkXN5TM0ZfNxplBA8vIVo8sSHD5RA73TPdr JsH1arRyNuHYs7R3

1️)  Launch App Studio

2️)  Import com.signeasy.teams.extension.zip

sKEpTKve3x NjMiugcGPDdXjmu753w8V7JdKzriY9di14qv2DFG2SbxA3Njaib93wWZW1xS 0W3p4QTPpWI

3️)  In App Studio, Test and Distribute > Install

tqI7W9eEUTUa4bnDBPUnj 1rhbp2aaRFuYr27XItdEGHDRhcFz7umUFMJElafxg Epg4e9tGtBF7x1f6Pqap54TVw2OpTA6tWRQId36y8nI5zmpkuwjeV6DIpoDpK T7pWu9l19R

4️)  With Signeasy for Microsoft Teams 2.0, there will be two options to choose from.

  • “Add” installs the personal tab and personal bot
  • “Add to a team” installs the messaging extension and channel tabH8vmX7KkCMtAr2sVuMKJEz4eUVaK3pE1z A6MkcY8GHfhwR8gzoUUA07FEjCNpga jTe2L5JNejDsR11RBQOUcPpVg8LgkjGPb MEZT4cFGOfcdOb5klPyeatKnHu1atf2cSaq25

5️⃣ If you choose “Add to a team,” there is an extra step to complete. In the next window, select a team, then click “Set Up”.

Post Release: The Delight

Messaging Extension in Channel Scope

V VcS2jlF34hOeov5Wwu8Hqqw4VcO biFO3hs6ph WWGqxLdb7RX0s4zacnKd5nRWuzknP9gFcyOT0YoMkDCx2nIYmN2m VQObU pojRR KL0upwOBI4aYAb5rqc LzXGXpV0y87

Messaging Extension in Personal Scope

UU4LaI0kCzropOIGjlLhMhboyiSOQ2qPn0sTvvgMnb4zCZN7T8fVW1iC 6 dv3ozUX51OhTX9kStQuqQemotqHvtMLGahHVl9Ub794hCSeMyU5VRKbEyzfBKLBEEP nTbaHiYsNO

Commands in Channel Scope

It all begins with @Signeasy in the new conversation text field. Users can search for documents and request signatures.

rWTqDjJzq1ePj6f94xKObc9BQPwmhgfSHmnXsWa2DYUU8Ghab1yBjVZ 0L7YTLOlNNhNmZpkz0PZ5J6bcyfiuw

The Personal Bot

9LSUX2B94QEcLHa6xD8hkxnDUsBwhO4by Upd3DcoOfdBTnCLTM4E9r3QIpA Zr9GFY3S3BioOVkd5v4fkfh7p5MadqVEV86tJ ZcZ hgIQgBNwucHovytlIFznjns1Wmm4dKSv4

And, By the Way…

During the development process, we found a couple of interesting behaviors in the Microsoft Teams platform. Microsoft is renowned for being developer-friendly, so we have the freedom to report any issues faced during development. As enthusiastic developers, we made sure to report every odd behavior we experienced along the way. Consequently, these issues were acknowledged as Microsoft bugs.

Links to the issues are:

1️⃣ https://github.com/MicrosoftDocs/msteams-docs/issues/4555

2️⃣ https://github.com/MicrosoftDocs/msteams-docs/issues/4425

👷‍ Developers

Abhay Thakur

Tanvi Baranwal

Sarav Thangaraj

Divya Dev

Rajat Singh

Venkatesan Ethiraj

✍🏼 Creators

Sweety Paul 

Gowtham S

🤝 Collaborators 

Jijoy Chandrachoodan

Sujan Balachandran

Recommended Reads