Published on
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.
Table of Contents
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 following capabilities are supported by Signeasy for Microsoft Teams Version 2.0.
This diagram provides a snapshot of how the messaging extension, personal bot, and tabs are built.
Let us take you on a journey about how we built this, and some key learnings on the way.
Date of Launch | November 17th 2021 |
Platforms | Desktop and Mobile |
Manifest Version | 1.9 |
Manifest Schema | https://developer.microsoft.com/en-us/json-schemas/teams/v1.9/MicrosoftTeams.schema.json |
Node Version | 14.17 |
Technologies | React + 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:
If you are using a bot created via the Azure Framework, follow these steps:
1️) Launch App Studio
2️) Import com.signeasy.teams.extension.zip
3️) In App Studio, Test and Distribute > Install
4️) With Signeasy for Microsoft Teams 2.0, there will be two options to choose from.
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”.
Messaging Extension in Channel Scope
Messaging Extension in Personal Scope
Commands in Channel Scope
It all begins with @Signeasy in the new conversation text field. Users can search for documents and request signatures.
The Personal Bot
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
Abhay Thakur
Tanvi Baranwal
Sarav Thangaraj
Divya Dev
Rajat Singh
Venkatesan Ethiraj
Sweety Paul
Gowtham S
Jijoy Chandrachoodan
Sujan Balachandran