Teams Company Communicator Improvements

What is Company Communicator?

Company Communicator or just CC is one of the most used Teams app templates. It enables corporate teams to create and send messages intended for multiple teams or large number of employees over chat, allowing organization to reach employees right where they collaborate. 

Thousands of customers use Company Communicator every day for scenarios like new initiative announcements, employee onboarding, modern learning and organization-wide broadcasts.

CC is backed by an Azure app service with a React app providing an interface for designated content users to create, preview, collaborate and send messages. It is a great example of how Azure can be used to extend teams, leveraging multiple cloud concepts and Azure services like functions, storage, bots and the service bus.

Being so widely used, Company Communicator is also the number one app in feature requests. Some of our smartest partners are currently working with multiple customers defining new scenarios, implementing extensions and other customizations. Those engagements generate CC variations and bring more and more customers to know and use the template.

Overview

Motivation

We all know that a diverse company is always better positioned to retain talent, and ultimately win on the competitive market.

A few weeks ago my colleague @Pradeep Bethi came up with the result of an effort to create a solution to congregate people around Employee Resource Groups (ERGs), have an efficient way to communicate messages and provide an intelligent way to clarify and ask questions, contributing to the overall company diversity.

The diverse team lead by Pradeep was able to combine Company Communicator, FAQ Plus and a brand new React application to create a new Teams app template with the major goal to foster diversity and inclusion in enterprises.

Customers loved that template, but some of the limitations of Company Communicator came to light. They were complaining of basically two things:

  1. The “feature” that basically mandate that images used in communications need to be posted in a public website. Authors in Company Communicator just reference, using an URL the image that is going to be used in the cards sent to users.
  2. Inability to schedule messages. Customers would like to schedule a few communication messages to be sent in the future. For example they could pre-configure the app to send customized messages on specific D&I dates of interest like the ones listed by the United Nations International Days and Weeks | United Nations or other websites like 2021 Workplace Diversity and Inclusivity D&I Calendar | Kazoo (kazoohr.com).

Great chance to engage and support!

New Features

Two new features were incorporated into a fork of Company Communicator 4.1 and also ported to the D&I Connect App template. Github repositories with both solutions are available for your reference:

Upload Image

The upload image feature is basically a button to allow authors to upload images to be used in Company Communicator communications. It is a front-end modification made in a single page of the CC React client application that uses a few react components and a custom function to convert an image on its base64 representation.

The same column used to store the image URL is used to store the base64 string. That allowed no changes in the Azure back-end components and a simple deployment. Azure storage tables have a limitation of 64kb and Teams can only support adaptive cards with 32kb in total. So the change we made controls the size of uploaded images to ensure we will not violate those limitations.

The result allows customers to use company communicator without the requirement to keep internal images in publicly accessible websites.

The new upload button when creating new company communicator messages

Message Scheduler

The message scheduler is a more complex change. New columns were incorporated to the Azure storage table to control the scheduled date and the status of the messages. A new background task was also implemented using IHostedService and the BackgroundService class.

The background service checks every 5 minutes if there are pending scheduled messages to send and execute the steps required to send the notifications appropriately.

We also made a few changes on the interface to allow authors to define when messages will be sent.

The new scheduler interface

When scheduled, messages become available in a third section created in the main messages interface. The Scheduled Message section allows authors to send notifications right away, make edits, copy the message, etc.

The new Scheduled messages section

Deployment

Sold to the new Company Communicator improvements? The deployment is super easy. If you already have Company Communicator 4.1 deployed, just open your Azure portal, select the App Service you are using to host the application and click Deployment Center.

Disconnect the source you are using and create a new External Git connection pointing to the repo where the changes were incorporated.

After disconnecting the previous GitHub source, under manual deployment (push), select External Git.

Then on Repository, type the https://github.com/cristianoag/microsoft-teams-apps-company-communicator.git, under Branch type master.

Now click Save and then Sync.

Wait until the deployment finish. You will have your Company Communicator with the new scheduler and the ability to upload files.

Comment if you have questions or need help! Have fun, Cristiano.

Disclaimer – The information contained in this blog post doesn’t represent the official Microsoft guidance or best practices. It is just the view of the author on current alternatives, implementations and workarounds for common issues and/or business needs. Please refer to official Microsoft documentation and evaluate carefully any steps, code or procedures documented herein. The author doesn’t offer any warranty. Use this information at your own risk.

20 comments

  1. Thanks for this. I will like to ask, instead of pointing to your repo, does pulling into my repo work? I have a few other custom changes and would like to include these.

  2. Hello Cristiano, thanks for the much needed refinements. I have successfully updated my build with yours. However its been 4 hours and all processes succeeded except for update web app source control configuration which is still stuck at started with no errors for 4 hours. How long does it take? I checked the app and it is working but buttons are only visible in preview and not showing up when the message is posted on channel or chat. should I wait? or any other fix?. Images are uploading fine btw.

  3. What about Update Web App Source Control Configuration? it is still stuck at started state for past 4 hours while other options are succeeded ! How long does it take? will prep and send repository change fix that issue as well?

  4. Thank you big time Cristiano, highly appreciate your helping nature. It is working as intended now however I can’t seem to change bot icon in Azure. It succeeds but stays the same on Teams. Any possible fix for that?

    1. Can you elaborate on that? Icons are defined on the manifest file. You can create your own icons and replace those in the app zip file. If you do that remember that you need to bump the version number.

  5. Getting this error in step 2. Deploy to your Azure subscription from https://github.com/cristianoag/microsoft-teams-apps-company-communicator/wiki/Deployment-Guide

    “There was an error downloading the template from URI ‘https://raw.githubusercontent.com/cristianoag/microsoft-teams-company-communicator-app/master/Deployment/azuredeploy.json’. Ensure that the template is publicly accessible and that the publisher has enabled CORS policy on the endpoint. To deploy this template, download the template manually and paste the contents in the ‘Build your own template in the editor’ option below.”

  6. Hi Christiano

    Thanks for providing the app but when i change my repo location to use yours as per your doco and then go to Logs i get below error. Not sure what the issue is?

    Command: deploy.cmd
    Handling ASP.NET Core Web Application deployment.
    Restoring NuGet packages
    Failed to add ‘C:\local\UserProfile\.dotnet\tools’ to the PATH environment variable. Add this directory to your PATH to use tools installed with ‘dotnet tool install’.

    Welcome to .NET Core 3.1!
    ———————
    SDK Version: 3.1.115

    Telemetry
    ———
    The .NET Core tools collect usage data in order to help us improve your experience. It is collected by Microsoft and shared with the community. You can opt-out of telemetry by setting the DOTNET_CLI_TELEMETRY_OPTOUT environment variable to ‘1’ or ‘true’ using your favorite shell.

    Read more about .NET Core CLI Tools telemetry: https://aka.ms/dotnet-cli-telemetry

    —————-
    Explore documentation: https://aka.ms/dotnet-docs
    Report issues and find source on GitHub: https://github.com/dotnet/core
    Find out what’s new: https://aka.ms/dotnet-whats-new
    Learn about the installed HTTPS developer cert: https://aka.ms/aspnet-core-https
    Use ‘dotnet –help’ to see available commands or visit: https://aka.ms/dotnet-cli-docs
    Write your first app: https://aka.ms/first-net-core-app
    ————————————————————————————–
    Restore completed in 23.63 sec for C:\home\site\repository\Source\CompanyCommunicator.Common\Microsoft.Teams.Apps.CompanyCommunicator.Common.csproj.
    Restore completed in 5.02 sec for C:\home\site\repository\Source\CompanyCommunicator.Data.Func\Microsoft.Teams.Apps.CompanyCommunicator.Data.Func.csproj.
    Restore completed in 3.76 sec for C:\home\site\repository\Source\CompanyCommunicator.Prep.Func\Microsoft.Teams.Apps.CompanyCommunicator.Prep.Func.csproj.
    Restore completed in 882.99 ms for C:\home\site\repository\Source\CompanyCommunicator.Send.Func\Microsoft.Teams.Apps.CompanyCommunicator.Send.Func.csproj.
    Restore completed in 8.79 sec for C:\home\site\repository\Source\CompanyCommunicator\Microsoft.Teams.Apps.CompanyCommunicator.csproj.
    Restore completed in 3.06 sec for C:\home\site\repository\Source\Test\CompanyCommunicator.Common.Test\Microsoft.Teams.App.CompanyCommunicator.Common.Test.csproj.
    Restore completed in 3.1 sec for C:\home\site\repository\Source\Test\CompanyCommunicator.Prep.Func.Test\Microsoft.Teams.Apps.CompanyCommunicator.Prep.Func.Test.csproj.
    Restore completed in 869.63 ms for C:\home\site\repository\Source\Test\CompanyCommunicator.Send.Func.Test\Microsoft.Teams.Apps.CompanyCommunicator.Send.Func.Test.csproj.
    Restore completed in 764.33 ms for C:\home\site\repository\Source\Test\CompanyCommunicator.Test\Microsoft.Teams.Apps.CompanyCommunicator.Test.csproj.
    Restoring npm packages (this can take several minutes)
    npm WARN @pmmmwh/react-refresh-webpack-plugin@0.4.3 requires a peer of type-fest@^0.13.1 but none is installed. You must install peer dependencies yourself.
    added 18 packages from 17 contributors, removed 16 packages and updated 33 packages in 570.068s
    npm WARN @pmmmwh/react-refresh-webpack-plugin@0.4.3 requires a peer of webpack-hot-middleware@2.x but none is installed. You must install peer dependencies yourself.
    npm WARN @pmmmwh/react-refresh-webpack-plugin@0.4.3 requires a peer of webpack-plugin-serve@0.x || 1.x but none is installed. You must install peer dependencies yourself.
    npm WARN jest-config@26.6.3 requires a peer of ts-node@>=9.0.0 but none is installed. You must install peer dependencies yourself.
    npm WARN jsdom@16.4.0 requires a peer of canvas@^2.5.0 but none is installed. You must install peer dependencies yourself.
    npm WARN sass-loader@10.1.1 requires a peer of node-sass@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
    npm WARN sass-loader@10.1.1 requires a peer of fibers@>= 3.1.0 but none is installed. You must install peer dependencies yourself.
    npm WARN ws@7.4.3 requires a peer of bufferutil@^4.0.1 but none is installed. You must install peer dependencies yourself.
    npm WARN ws@7.4.3 requires a peer of utf-8-validate@^5.0.2 but none is installed. You must install peer dependencies yourself.
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\react-scripts\node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”ia32″})
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”ia32″})
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”ia32″})
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”ia32″})

    Building the client app (this can take several minutes)

    > company-communicator@4.1.0 build C:\home\site\repository\Source\CompanyCommunicator\ClientApp
    > react-scripts build

    Thread was being aborted.
    Thread was being aborted.

  7. Hi Cristiano

    I just deployed the Out of box version of communicator app to azure and integrated with teams as well but customer is asking for some customizations like adding a new field into compose message screen . so I cloned the code did npm install and trying to run the solution locally but nothing was showing up in the browser and i know this is something tricky so i want to know

    1. How to run this locally to add some features and test
    2. The deployment strategy for new features

    Thanks

    1. If your customizations are not too complex I recommend you to use Azure to deploy your solution instead of running it locally. You just need to clone the repo, open the solution using visual studio and create publish profiles for the client app and the azure functions.

      1. Have some bunch of customizations Cris , it would be great if I could run it locally and test it . I was trying to use Teams Toolkit for VS code to run it locally but i couldn’t able to run the cloned communicator app but I can create new teams project and I can run. not sure what i am missing can you help me with that

      2. Look. You need to update all configuration values in the config file, disable the use of azure key vault, and easy a bit the authentication requirements for the controllers. You will also need ngrok to create the tunnel (I recommend the paid version to avoid even more complexity changing url names). Good luck.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s