Microsoft Teams is a massively scalable online collaboration platform. The Teams platform is bundled with Microsoft Office 365, so corporate users who subscribe to Microsoft 365 can use it.
Microsoft Teams provides:
- multiple group chat channels
- integrated video calling and collaboration tools
- the full power of the Microsoft APIs available in Microsoft Graph
- plus, much more
The typical user of Microsoft Teams will keep the Teams app in the background all day long to participate in chats, make video calls, and access other collaboration tools.
Microsoft Teams has many helpful integrations you can choose to customize your channels or even your experience. An example of this is a Planner application. You can install Planner into a channel to track tasks and projects relevant to that channel. All users with access to the channel will also have access to the instance of Planner, making it easy to coordinate across your teams (editors note, remove gratuitous pun.)
Why I Like Connected Applications
I really appreciate the ability to run a channel in Microsoft Teams and have connected applications. An example of this is a Wiki for documenting processes and organizing information. For my Marketing channel here at Digital Primates, I use a wiki to organize marketing documentation. Since everything is in a single place, I don’t have to worry about keeping a list of bookmarks in my browser or somewhere on my file system. Everything is organized in the Marketing team and when a new marketing team member is onboarded, they’ll have access to the wiki as well as the other applications we use to run our marketing department.
Is it like Slack?
Think of it like Slack, but more integrated into Enterprise environments. One thing that always bothered me about Slack was the lack of integrations with the OTHER stuff I do. Sure one can host a wiki somewhere and go back and forth from Slack to the wiki as necessary. It’s a lot nicer to have the Marketing channel be the canonical reference for things related to marketing. It’s like having my own Marketing portal without having to stand up additional environments or products.
Microsoft Teams doesn’t do everything. Sometimes, we need custom applications to give us information or facilitate tasks. Microsoft Teams allows for the creation of special tabs for custom applications. In fact, it’s easy to port your existing web application into Microsoft teams with minimal changes. This blog post will walk you through building a data visualization application using React and Kendo React. Then, we’ll port the application to Microsoft Teams.
The scenario
You are an executive for a pizza restaurant franchise. Each Monday, you host a video call with area managers to go over the latest KPIs. The area managers are frazzled, running pizza restaurants, and don’t always have the KPIs at their fingertips. You had your development team build out the Pizza-o-matic, a dashboard application for KPI display. Now, you want to ensure the area managers can find this application during the video call so you ask the development staff to add the app to Microsoft Teams. The area managers will then have a single place to go for KPIs, and your weekly video call will run much smoother.
The application you will be building will look like this:
We’ll take this process into 3 phases:
- Phase 1 – Build out the Pizza-o-matic for data visualization using React, with Kendo React components.
- Phase 2 – Port the application to Microsoft Teams
- Phase 3 – Make any adjustments necessary to fine-tune the results and recap any lessons learned
Phase 1 – Building a Data Visualization Application with React and Kendo React
One of our developers, Mickey Smith, wrote a 5-part tutorial series on building the data visualization application. If you aren’t interested in a step-by-step approach, clone his repo and start from there. That said, there is certainly value in building out the application as it’s more like the apps you’ll be asked to build in your career. We’ve certainly all built enough ToDo apps, haven’t we?
Part 1:
Tutorial: How To Set Up A React NodeJS App With KendoReact For Data Visualization
In part 1, you’ll:
- Generate the boilerplate for a React application using the create-react-app npm package
- Install and initialize kendo-react data visualization npm packages
By the end of this section, your application will look like this:
Editors note: Isn’t that already more enterprisey than a Todo App?
Part 2:
Tutorial: How To Manage Multiple Data Visualizations In A React App Using KendoReact And React Hooks
In part 2, you’ll:
- Build both a chart and a table data visualization component
- Handle local application state to determine which visualization to use
By the end of part 2, your application will look like this:
Part 3:
Tutorial: How To Work With Complex JSON Data For Visualization With JavaScript
In part 3, you’ll:
- Wrangle complex JSON data and pull out the necessary items to drive the visual display
- Create a pluck function to help categorize and split data for easier visualization
The data looks like this:
[
{
name: string representing region,
restaurants: [
{
name: string representing individual store,
ratings: [
{
date: string representing review sample time,
values: {
customer: string,
staff_satisfaction: string,
sales: string,
cleanliness: string
}
},
...
]
},
...
]
},
...
]
Part 4:
Tutorial: How to Use KendoReact to Create Bar Charts and Tables from the Same Data
In part 4, you’ll:
- Refactor the code a bit
- Connect components to data in an extensible way
- Manage application state using React Hooks
By the end of this part, your application will look like this:
Part 5:
Tutorial: How to Export Tabular Data from a React App with KendoReact ExcelExport
In part 5, you’ll:
- Add the ability to export slices of the displayed data as Excel files
- Polish the user interface so the application switches between views seamlessly
By the end of part 5, your application will look like this:
If you get stuck at any time, the full application code is available at Mickey Smith’s GitHub repo.
Addendum: Depending on where you need to deploy the application, you may have to adjust the path for header.svg.
Phase2 – Porting the Pizza-o-matic to Microsoft Teams
In this phase, we’ll work inside Microsoft Teams to add a tab for our Pizza-o-matic. To do this, you need a Microsoft developer account. Setting one up is easy. Start here.
Creating Users
During the creation process for my Microsoft 365 developer account, the set-up process offered to create 15 users and populate their data. I agreed to this part. I also checked every box that offered sample data. I’m glad this was in here.
Security Settings – Users
Microsoft offers administration security options to ensure accounts have a basic level of security. These include:
- Requiring all users to register for Azure AD Multi-Factor Authentication.
- Requiring administrators to perform multi-factor authentication.
- Blocking legacy authentication protocols.
- Requiring users to perform multi-factor authentication when necessary.
- Protecting privileged activities like access to the Azure portal.
The security defaults make a lot of sense and are added at no extra charge. I applaud Microsoft going with a “Secure by Default” option. We could all do with fewer security breaches.
That said, dealing with Multi-factor authorization and other security settings on this developer account generates orthogonality, taking me away from what I’m trying to test. You can disable all of these using this helpful article from Microsoft.
Security Settings – Teams
There are also security settings in Teams you’ll likely want to adjust. Operating under the “It’s a developer account” mentality, I turned off the need for administrative approval for apps and let users install their own apps. So I could keep a handle on this, I made a security policy and removed the administrative checks.
Change 1: Microsoft Teams Admin Center -> Teams Apps -> Permissions policies
Change 2: Microoft Teams Admin Center -> Teams Apps -> Setup Policies
Your Development Environment is Open for Business
Once you complete this section, sign in to Microsoft Teams with your developer account and start making the magic happen.
Loading the Pizza-o-matic inside Teams
The steps required to install our application inside of teams were covered nicely in this Smashing Magazine article by Tomomi Imura and Daisy Chausee. Use their article as a guideline. You can ignore the section on using Glitch to make an app. We already have our app prepared locally. Keep in mind, Teams doesn’t allow content to be served over non-secure protocols; thus, deploy it to a location where you can serve it over HTTPS.
The main parts of the process are:
- Install App Studio
- Use the App Studio Manifest Editor to configure the manifest for Teams. The important sections are:
- App Details
- Tabs
- Test and Distribute
App Studio Manifest Editor – App Details
Add the specific information about your application here. Consider some of this information to be internal information used by Teams. The rest are public information to be used by users who want to know about your application. For example, the screenshot below shows the long description on the About tab. Other elements are used in different locations, including the Microsoft Teams administration portal.
The Manifest Editor Pane
An Example of the Content
You will need some assets to complete the configuration, namely 2 images and the manifest file.
- Full color – 192×192
- Transparent outline – 32×32
I’m not a graphics person, an obvious statement looking at my artwork below, but you can really do anything here to serve as a visual shortcut of your app. As you can see, my “transparent outline” image below isn’t all that transparent, is it? Don’t let this part block you; just do anything, and it’ll show up.
App Studio Manifest Editor – Tabs
In this section, you’ll configure the tabs you want to the URL for that content. You can have up to 16 personal tabs per application. I went with 2, the main application view and the About view.
Note: By appending “personal view” to the content, we can see where this parameter gets used in the system.
App Studio – Test and Distribute
It’s just what you think it is. Press Install to insert the app into teams, then press publish when you are done. If this doesn’t work, go to the next section in this article.
You can download the image assets and manifest file by clicking the Download link.
What if the app doesn’t install?
Package configuration errors will show up on the Test and Distribute page. If you don’t see an error, and also don’t see your app, the most common reason is the app is in app-purgatory awaiting administrator approval. If you haven’t set your permissions to allow user-installable apps, you’ll need to approve the application in the Teams administration portal. To do so:
- Log into the Microsoft Teams admin center
- On the left-hand side navigation, find Teams apps, then Manage apps.
- Find your application in the list and approve it.
Yay – It Works
Your application should now be in the Microsoft Teams app catalog. Once installed, it will look like this:
Phase 3: Helpful tips
We have a testing environment?Debugging
The debugging experience inside of the Microsoft Teams Desktop application is challenging, to say the least. After exploring the environments, the way I think about it is:
- Desktop App === Production Environment
- Web App === Testing Environment
While real developers test in production, we won’t be doing that here. Running the Teams application in the browser using teams.microsoft.com offers full access to the developer tools you know and love like the JavaScript console, DOM inspector, network tab, and profiler. Do your debugging and adjustments with the browser version of teams, then do final testing in the desktop version.
Managing Users
Microsoft Teams does not like to run with the non-desktop user. It would be great if I could switch between users inside of the Teams context. For example, if I’m signed in to Microsoft Teams with my developer account to test the app I’m working on, I’m not able to use my standard windows account in teams for work communication. My workaround is to keep Microsoft Edge signed in with my Teams developer account and use the Teams desktop for work communication as much as possible.
Dealing with Differences
There may be visual differences when your app is run inside of a Teams context versus outside. Our original application expected to be run on a white background. Microsoft Teams defaults to a light grey, producing unexpected effects in our user interface and theming. You’ll catch these in testing, right? You can detect whether your application is running in a Teams context by using the Microsoft Teams JavaScript SDK. Daisy and Tomomi covered how to detect the Teams context and switch between light and dark themes in their Smashing Magazine article. Use the same technique to polish your application with Teams specific treatments.
Caching
It would appear Microsoft Teams is helpfully caching my application files. This may have something to do with the Application Version section in the App Studio Manifest Editor. I’ll need more time to work on this as it can be a tough debugging experience to work on cached files and not know how to invalidate the cache.
Additionally, we do cache static files on our web server. The combination of the two caching layers did cause me to pull a bit of hair out.
In Summary
If you are interested in Enterprise JavaScript, you will need to understand how React apps (and JavaScript apps) work with Microsoft Teams. There are over 100 million Microsoft Teams users already, and the install base is growing rapidly. Being able to host your React applications inside of Microsoft Teams helps to provide an organizational layer for the application users. They simply need to go to a single place to find the apps they need to perform their jobs.
Further, being able to easily integrate your apps with the existing enterprise processes makes it easy to be a good corporate citizen. Connecting your application to the corporate Active Directory instance means that the CISO will sleep better, not worrying about rogue user accounts that should have been terminated. We all prefer well-rested CISO’s, don’t we?
Finally, being able to access all of the Microsoft 365 APIs is a total game-changer. You’ll be able to stay in the JavaScript ecosystem you love and useful functionality to your React application for connecting or generating Excel files, connecting to Sharepoint data, or even auto-scheduling meetings when a reporting KPI goes out of tolerance. Automating the enterprise has never been easier. Why don’t you give this a try today?
The post Automating the Enterprise – How to Build a Data Visualization App With React and Port it to Microsoft Teams appeared first on Digital Primates.
