I am building a custom Web application using React to help manage our Enterprise React Newsletter. The application will be deployed as a custom application inside Microsoft Teams. I ran into an issue when installing my custom application and didn’t find great resources for this. It took me longer than I want to admit to resolve it, so I’m adding it to our blog to help you out.
“There Was A Problem Reaching This App”
After installing a custom Teams application, Teams will then load the app. During the app loading process, I could see the new tabs for my application, but the center content area showed an error screen.
While beautifully designed, this message is devoid of any troubleshooting help. Why is it the app wasn’t reachable?
- Was it CORS?
- Was it a problem with routing?
- Is my app down?
- Did I give the app the correct permissions?
- Do I need to approve something in the administration section?
I did what any self-respecting developer would do; I reinstalled the app 72 times, hoping the problem would go away. No dice.
The Solution
In the App Studio Manifest Editor section, there is an option to add a Loading Indicator. Greedily and without looking up the documentation, I checked this box. After all, I’m a child of Web 2.0 and grew up with loading indicators. They are a “Good Thing.” My mistake was assuming the loading indicator would go away once my initial content loaded.
To use the Show Loading Indicator feature properly, the developer must install the Microsoft Teams JavaScript SDK, then call both functions below. At that point, the app is ready, and the loading indicator will disappear.
microsoftTeams.appInitialization.notifyAppLoaded();
microsoftTeams.appInitialization.notifySuccess(); Once you’ve executed these two lines of JavaScript, the Teams platform will remove the application loader overlay, displaying your custom application content.
There was a hint in the Teams interface hinting at this. To the right of the checkbox, it does say, “You will have to hide the loading indicator using our SDK”. I’m new to the platform, though, and there are many layers involved in custom Microsoft Teams application development. It wasn’t clear to me the error message was related to the use/misuse of the Loading Indicator functionality.
So far, this sort of thing is my most significant struggle area. Building and deploying a custom application inside the Microsoft Teams platform involves a broad surface area with an opaque debugging experience. It took me a while to narrow down the issue to a misuse of the Loading Indicator feature.
Why Microsoft Teams?
There is quite a bit of power in using the Teams platform to register and organize users’ applications. Users benefit from a single place to find all of the apps they need in their daily work. Further, administrators will appreciate apps are tied into the identity and policy management systems already in use. Application developers will appreciate the easy integration with those systems and other Microsoft/Office 365 products and APIs. I’ll post more on this topic as we build out our newsletter automation application.
