Focus on your code, Let Microsoft Teams worry about the UI

Developer Support

May 4th, 20180 0

In this post, App Dev Manager Kyle Kapphahn spotlights the conversational UI framework of Microsoft Teams to simplify UI development for enterprise apps.

When I first began commercial software development in the mid-90’s (yes, I know I’m dating myself), we used the classic 3-tier model: Presentation, Business Logic, and Data Layers. If you were lucky, each development had experts in each area. If you weren’t lucky (like me) you were responsible for all tiers – front to back. I tended to love the BL and Data layers, with the Presentation layer being an afterthought. Most of my colleagues (myself included) always had a ready excuse for our ugly UI’s – “I’m not a UI Developer!” “Real Computer Science” was done behind the scenes: Optimizing performance, writing elegant code, debugging complicated logic, designing your Relational Database to the Fifth Normal Form. The Presentation Layer was just that – a way to present the data and interact with the “complicated stuff” – an afterthought.

Fast-forward 25 years and we’ve come a long way. UI and UX is more important than ever in our world of mobile apps, virtual and augmented reality to bring digital objects into the real world. With all that progress, I still see commercial software developers struggling with UI’s, but there is hope!

All you need is a little bit of JSON familiarity and you can create elegant UI’s without ever touching a designer.

Leverage the tools your users already have by deploying your solution within Microsoft Teams. This eliminates complicated install and deployment procedures and policies and provides an effortless way to showcase your application within the conversational UI framework that Teams provides.

Actionable Messages

Using Office 365 Connectors for Microsoft Teams, interact with your users with Actionable Messages. Build a Card that contains images and text, which allows you to present actions to your users to respond to that message. Actions can include free form text responses, choosing items from a list or drop down, or even calling a webhook of your own to perform any action you wish.

You can even try out the JSON for your Card in the Card Playground. There are several examples in the Card Playground and you can easily upload your own JSON file or work directly in the online editor.

Bots

Actionable Messages and Cards are just one way to connect with your users in Microsoft Team. Bots hosted within Teams are a fantastic way to replace the traditional UI with a Conversational UI. Bots in Teams also supports Cards, with several ways to present a friendly UI for your users to interact. For example, the Hipmunk Bot presents a conversational, straightforward way to find, search, and book travel.

Messaging Extensions

And if you want to embed deep functionality within conversations, you can enable Messaging Extensions. Using a Bot to handle the request and response actions, a user can @mention your Messaging Extension, and embed a response into their conversation message, with all the rich UI available in Bots and Actionable Messages. Again, those responses from your bot will be in JSON.

Teams App Studio

And to make implementing and deploying your app even easier, there is a new Teams App Studio to help you build your deployment manifest, browse controls for use in your messages, and even a built-in version of the Card Playground, where you can test your cards directly within Teams. While the Teams App Studio is still in Preview, it will give new Teams Apps developers a quick way to develop and deploy apps as well as let seasoned developers increase their productivity and simplify manual JSON editing to ensure completeness and compliance with the schemas.

With a platform like Microsoft Teams, developers can focus on the functionality and complexities of their applications and worry less about “ugly UI’s”. Microsoft Teams provides a standardized, robust presentation layer to make applications easily accessible and manageable. There are many examples on GitHub to get you started building your Teams Apps. These are just some simple ways to get started developing a Teams App. There is a Client SDK for extending deeply the features of Microsoft Teams and further enhance your App. Contact your Application Development Manager in Developer Advisory Services for Azure to help architect and design your Teams App, provide guidance on best practices and patters, as well as training to get your development teams productive quickly.

Premier Support for Developers provides strategic technology guidance, critical support coverage, and a range of essential services to help teams optimize development lifecycles and improve software quality. Contact your Application Development Manager (ADM) or email us to learn more about what we can do for you.