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.

Now repeat that for each one of the Azure Functions you have on the same resource group. Those are the resources listed as:

<ccname>-data-function

<ccname>-function

<ccname>-prep-function

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.

58 thoughts on “Teams Company Communicator Improvements

Add yours

  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.

    Like

  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.

    Like

  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?

    Like

  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?

    Like

    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.

      Like

  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.”

    Like

  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.

    Like

  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

    Like

    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.

      Like

      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

        Like

      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.

        Like

  8. Cris is there is any documentation or blog post that says the process of running the communicator app locally and extending it further ? it will be super helpful for me to connect all the dots or can you provide some steps for that

    Thanks for your support !

    Like

    1. There is no official documentation showing how to do that. As I said before you will need a proxy/tunnel tool like ngrok and tweak a few configuration values on the config file to make it work. I recommend first make the solution work on azure so you can know the values that you need to change/update on your local config file. Good luck!

      Like

  9. Hi Cristiano, thanks for the new features!
    If I have Company Communicator v4.0 how can I upgrade to v4.1 in order to be able to use your build?

    Like

    1. 4.1.1 has a fix to avoid sending messages to guest users. The issue I see with this fix is that I have a few customers that actually want exactly that. They see guests as users that need to be notified sometimes using messages created with Company Communicator. I can certainly incorporate the changes made on the official repo/branch to my branch… but I know dev is still working to cover all potential scenarios and avoid collateral effects of the change. So at this moment, my version still doesn’t have 4.1.1 changes…

      Like

  10. Good morning Cristiano how are you?

    I implemented your customization, and the only point I noticed is that the images when uploaded by the button lose a lot of quality, to some way to get around it?

    Like

    1. That happens because we need to convert the image into a base64 string that is smaller than 30K. I’m using the resizer react module to rescale the image and compress it using JPEG algorithm under a quality rate of 80%. The whole idea behind the upload image feature is to avoid uploading images to public storage in Azure and use the database to store the “stringified” version of the image. I don’t want to upload to a public repo because it can lead to security related issues/concerns as maintaining a public storage on Azure would require additional care.

      My recommendation to you is that you avoid the use of images that require high quality. I’ve seen people using a single image with the whole text message embedded, etc… don’t do that, use a smaller image and leverage the title and the summary fields (including the ability to format using markdown) to pass the message.

      If you still want/need to use high quality images, then host the message in a public website and use the URL instead of the upload feature. Just keep in mind that even doing that you may face issues if the image is too big.

      Like

      1. good morning christian

        Thanks for the feedback, in my case, the communication team creates pieces already with the company’s identity and the message to be sent, that’s why I need to upload, is there any way to increase this storage limit?

        Like

      2. Yes and no. 🙂 The database we are currently using with CC has a limit of 32kb per field stored. I can’t store strings bigger than that in the database. Said that, we can replace the current technology by Cosmos DB for example and get rid of that limit, but you will have additional costs to run the application… Also, keep in mind that big images may cause trouble as the adaptive card in Teams has a limit as well. If you really need to use big images, I recommend to store the image in a web server and use the URL instead of uploading the image. Thanks for reaching out.

        Like

  11. How much time could it take to update the app?
    I alredy re deployed with the new external git repo and no change figured on the application on teams. Do i need redeploy the app on microsoft teams to or uninstall and re install?

    Like

    1. No. You just need to ensure you are using the correct repo and click sync. Note that those changes are not part of the official officedev repo. Do that for the app service and each one of the three azure functions (please review instructions on the article). The process usually takes 10-20 minutes to complete. You can check the log file and ensure everything went ok.

      Like

  12. Hi Cristano how are you?

    After the update that allows adding more than one link button, even though I added several and in draft mode they appear, when I send the announcement the buttons just don’t appear, do you have any corrections?

    Like

  13. Hi Cristiano, Good day! 🙂 Just want to ask if I should wait for the deployment of Web App to finish before doing the same thing with the functions? Since the functions kept on failing while the web app is currently in progress. Thanks in advance! 🙂

    Like

  14. HI, I am on latest version 4.1.5 and tried to merge your package. Found that on the latest version, they have made changes on SendBatchMessageActivity and having conflict with your changes for IsImportant not working as expected.

    public class SendBatchMessagesActivity
    /// A representing the asynchronous operation.
    [FunctionName(FunctionNames.SendBatchMessagesActivity)]
    public async Task RunAsync(
    [ActivityTrigger](NotificationDataEntity notification, List batch) input)
    [ActivityTrigger](string notificationId, List batch) input)
    {
    if (input.notification == null)
    if (input.notificationId == null)
    {
    throw new ArgumentNullException(nameof(input.notification));
    throw new ArgumentNullException(nameof(input.notificationId));
    }

    if (input.batch == null)
    @@ -58,7 +57,7 @@ public class SendBatchMessagesActivity
    {
    return new SendQueueMessageContent()
    {
    NotificationId = input.notification.Id,
    NotificationId = input.notificationId,
    RecipientData = this.ConvertToRecipientData(recipient),
    };
    });

    Due to Is Important you are getting and passing on sendqueuemessagecontent is failing. Do you have upgrade version with latest changes?

    Like

      1. Thanks for the prompt response. Please let me know once its incorporated. We are planning for release your package by mid of next week. Important function is good to have.

        Like

  15. Hi there,

    I am trying to change everything to your git, but although the App Service works as intended, all of the azure functions give me the following error, failling to sync. Any ideas?

    MSBUILD : error MSB1009: Project file does not exist.
    Switch: D:\home\site\repository\Source\Microsoft.Teams.Apps.CompanyCommunicator.Data.Func\Microsoft.Teams.Apps.CompanyCommunicator.Data.Func.csproj
    Failed exitCode=1, command=”D:\Program Files (x86)\MSBuild-16.4\MSBuild\Current\Bin\MSBuild.exe” “D:\home\site\repository\Source\Microsoft.Teams.Apps.CompanyCommunicator.Data.Func\Microsoft.Teams.Apps.CompanyCommunicator.Data.Func.csproj” /p:DeployOnBuild=true /p:configuration=Release /p:publishurl=”D:\local\Temp\8d992f74691260a”
    An error has occurred during web site deployment.
    \r\nD:\Program Files (x86)\SiteExtensions\Kudu\94.30524.5227\bin\Scripts\starter.cmd deploy.cmd

    Like

    1. This usually happens because you synced the variant over a non 4.1 CC version. Assuming you have at least v4, you can try changing the value for the PROJECT configuration variable in each Azure Function to Source\CompanyCommunicator.Send.Func\Microsoft.Teams.Apps.CompanyCommunicator.Send.Func.csproj for the SEND/cc-function, Source\CompanyCommunicator.Data.Func\Microsoft.Teams.Apps.CompanyCommunicator.Data.Func.csproj for the DATA/data-function, and Source\CompanyCommunicator.Prep.Func\Microsoft.Teams.Apps.CompanyCommunicator.Prep.Func.csproj for the PREP/prep-function.

      You probably have a value like Source\Microsoft.Teams.Apps.CompanyCommunicator.Data.Func\Microsoft.Teams.Apps.CompanyCommunicator.Data.Func.csproj when it should be Source\CompanyCommunicator.Prep.Func\Microsoft.Teams.Apps.CompanyCommunicator.Prep.Func.csproj in the PREP function for example. That pattern is probably repeating for the other functions as well.

      Like

  16. Hi, I’ve updated as you described and I can see the ‘Upload image’ on the web version of Teams, but the full app has not udpated. Did I miss a step? Do I need to update the apps itseld?

    Like

  17. Hi Cristiano, I am having trouble with the upload option for some images, it is difficult to pinpoint what limits the image is breaking for it to not upload. At one point its accepting a 900kb and a 4mb gif file properly but not uploading a 200-300 kb jpeg image even when the resolution was under 1024x1024px saying the image is too big. Even the error is not always the same when trying different images, sometimes it shows :
    The image is too big! Please upload a JPEG (or equivalent) compressed image with maximum size of 30162 bytes.
    or
    The image is too big! Please upload a JPEG (or equivalent) compressed image with maximum size of 19912 bytes.

    Is it possbile to know the limits clearly so any future images to be used can be edited beforehand.

    Like

    1. The problem is unpredictable nature of compression. We have a limit of 32kb of storage per card and we need to fit the image there. The compression rate depends of multiple factors. If you have an image that can’t be uploaded, host it in a public website and reference the url instead of upload the file

      Like

      1. Where can i learn more about these multiple factors affecting the compression ? As the purpose of adding the upload option in the first place was if the Customer/User is not too keen on storing the images on a public host. And this is the case for me as well.

        Like

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

Website Powered by WordPress.com.

Up ↑

%d bloggers like this: