Home
%3CLINGO-SUB%20id%3D%22lingo-sub-992997%22%20slang%3D%22en-US%22%3EIgnite%20Live%20Blog%3A%20THR3040%20Microsoft%20Teams%20Messaging%20Extensions%20Deep%20Dive%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-992997%22%20slang%3D%22en-US%22%3E%3CP%3EInterest%20and%20thirst%20for%20knowledge%20around%20Microsoft%20Teams%20has%20been%20very%20strong%20at%20Microsoft%20Ignite.%20There%20are%20many%20ways%20that%20developers%20can%20deliver%20even%20more%20productivity%20to%20users%20by%20extending%20the%20out-of-the-box%20Teams%20experience.%20Messaging%20Extensions%20are%20one%20particular%20type%20of%20custom%20development%20that%20can%20be%20used%20to%20enhance%20the%20conversational%20experience%20to%20create%20a%20deep%20integration%20to%20line%20of%20business%20applications.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIn%20this%20theater%20session%20Wictor%20Wil%C3%A9n%20dived%20into%20the%20technical%20implementation%20to%20show%20us%20how%20to%20get%20started%20developing%20these%20Messaging%20Extensions%2C%20some%20tips%20and%20things%20to%20watch%20out%20for.%20Wictor%20has%20been%20a%20driving%20force%20in%20the%20community%20in%20the%20area%20of%20Teams%20development%20and%20is%20the%20person%20behind%20the%20popular%20%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FOfficeDev%2Fgenerator-teams%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3EYeoman%20Generator%20for%20Teams%3C%2FA%3E.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EMessaging%20Extensions%20covers%20three%20different%20ways%20that%20Teams%20behavior%20can%20be%20enhanced%3A%3C%2FP%3E%0A%3COL%3E%0A%3CLI%3ESearch%20Commands%3C%2FLI%3E%0A%3CLI%3EAction%20Commands%3C%2FLI%3E%0A%3CLI%3ELink%20Unfurling%3C%2FLI%3E%0A%3C%2FOL%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EWictor%20concentrated%20on%20Search%20and%20Action%20commands%20in%20his%20demo%20where%20he%20was%20able%20to%20build%20tighter%20integration%20with%20Planner%20by%20developing%3A%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3EA%20Search%20Command%20that%20enhanced%20the%20compose%20experience%20making%20it%20possible%20to%20search%20for%20a%20Planner%20task%20and%20insert%20the%20task%20as%20an%20Adaptive%20Card%20in%20the%20Teams%20channel.%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F155751i2FAF04E82432C608%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22search-compose-extension.png%22%20title%3D%22search-compose-extension.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3EAn%20Action%20Command%20that%20allowed%20a%20user%20to%20create%20a%20Planner%20task%20from%20a%20chat%20message%20and%20then%20created%20an%20Adaptive%20Card%20(linking%20back%20to%20the%20Planner%20task).%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F155752iD3E12E805142786B%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22action-extension.png%22%20title%3D%22action-extension.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F155753i2FF6476130897724%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22action-dialog.png%22%20title%3D%22action-dialog.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EFor%20both%20Search%20and%20Action%20commands%20the%20Bot%20can%20request%20that%20Teams%20displays%20a%20web%20page%20(URL)%20in%20a%20dialog.%20This%20provides%20the%20extension%20the%20ability%20to%20take%20full%20control%20of%20the%20user%20experience%20in%20the%20dialog%20and%20allows%20for%20a%20very%20rich%20custom%20experience.%20The%20Yeoman%20Generator%20for%20Teams%20is%20the%20fastest%20way%20to%20get%20started%20and%20through%20its%20interactive%20questions%20you%20can%20specifically%20create%20an%20app%20and%20have%20it%20scaffold%20up%20the%20pieces%20needed%20for%20a%20messaging%20extension.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EAn%20important%20architectural%20concept%20to%20grasp%20when%20getting%20started%20with%20developing%20messaging%20extensions%20is%20that%20they%20require%20a%20Bot%20to%20respond%20to%20the%20events%20that%20are%20happening%20in%20Teams.%20Both%20search%20and%20action%20commands%20result%20in%20a%20series%20of%20requests%20being%20sent%20to%20a%20Bot%20(that%20is%20registered%20via%20a%20Teams%20manifest)%20to%20handle%20the%20extension.%20The%20Bot%20responds%20to%20these%20various%20commands%20with%20an%20appropriate%20JSON%20response.%20This%20flow%20of%20requests%20and%20responses%20between%20the%20Teams%20client%20and%20the%20backend%20Bot%20is%20not%20direct%2C%20rather%20it%20flows%20through%20the%20Microsoft%20Bot%20service.%20This%20means%20that%20during%20development%20the%20Bot%20needs%20to%20be%20available%20on%20a%20public%20URL.%20To%20fill%20this%20requirement%20Wictor%20discussed%20the%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fngrok.com%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Engrok%3C%2FA%3E%26nbsp%3Butility%20that%20can%20be%20used%20on%20a%20development%20machine%20to%20expose%20your%20localhost%20on%20a%20public%20URL.%20Ngrok%20also%20provides%20a%20great%20way%20to%20inspect%20the%20messages%20being%20sent%20between%20the%20Bot%20framework%20and%20your%20Bot%20while%20developing.%20The%20ngrok%20inspector%20is%20available%20while%20ngrok%20is%20running%20on%20the%20development%20machine%20and%20by%20default%20can%20be%20accessed%20on%20%3CA%20href%3D%22http%3A%2F%2Flocalhost%3A4040%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttp%3A%2F%2Flocalhost%3A4040%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F155671i26BC9445D82D8B6E%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22IMG_7961.JPG%22%20title%3D%22IMG_7961.JPG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThe%20source%20code%20used%20for%20the%20demo%20is%20available%20on%20GitHub%20%3CA%20href%3D%22http%3A%2F%2Faskwictor.com%2FTHR3040-demo%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttp%3A%2F%2Faskwictor.com%2FTHR3040-demo%3C%2FA%3E%20and%20serves%20as%20a%20great%20reference%20for%20how%20to%3A%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3EImplement%20a%20search%20command%20that%20displays%20a%20custom%20dialog%20(task%20module)%3C%2FLI%3E%0A%3CLI%3EImplement%20an%20action%20command%20that%20displays%20a%20custom%20dialog%20(task%20module)%3C%2FLI%3E%0A%3CLI%3EPerform%20an%20authentication%2Fauthorization%20flow%20within%20a%20messaging%20extension%3C%2FLI%3E%0A%3CLI%3ECreating%20an%20Adaptive%20Card%20in%20a%20Teams%20channel%20as%20a%20result%20of%20interactions%20with%20both%20the%20search%20and%20action%20commands%3C%2FLI%3E%0A%3CLI%3EUtilize%20an%20open%20source%20middleware%20library%20that%20Wictor%20has%20created%20that%20makes%20it%20far%20easier%20to%20handle%20the%20incoming%20request%20commands%20in%20your%20Bot%20and%20create%20the%20correctly%20formatted%20responses%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EFurther%20resources%3A%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fmicrosoftteams%2Fplatform%2Fmessaging-extensions%2Fwhat-are-messaging-extensions%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fmicrosoftteams%2Fplatform%2Fmessaging-extensions%2Fwhat-are-messaging-extensions%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fmicrosoftteams%2Fplatform%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fmicrosoftteams%2Fplatform%2F%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EWritten%20by%3A%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fcamerondwyer.com%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3ECameron%20Dwyer%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-992997%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F155670i65734C1D875A8E37%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22IMG_7964.JPG%22%20title%3D%22IMG_7964.JPG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EThere%20are%20many%20ways%20that%20developers%20can%20deliver%20even%20more%20productivity%20to%20users%20by%20extending%20the%20out-of-the-box%20Teams%20experience%2C%20Wictor%20dives%20deep%20into%20developing%20Messaging%20Extensions%20in%20his%20theater%20session.%3C%2FP%3E%3C%2FLINGO-TEASER%3E%3CLINGO-LABS%20id%3D%22lingo-labs-992997%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EIgnite%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EMicrosoft%20Teams%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1003822%22%20slang%3D%22en-US%22%3ERe%3A%20Ignite%20Live%20Blog%3A%20THR3040%20Microsoft%20Teams%20Messaging%20Extensions%20Deep%20Dive%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1003822%22%20slang%3D%22en-US%22%3E%3CP%3EThe%20recording%20of%20this%20session%20is%20now%20available%20here%3A%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fmyignite.techcommunity.microsoft.com%2Fsessions%2F79295%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fmyignite.techcommunity.microsoft.com%2Fsessions%2F79295%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E

Interest and thirst for knowledge around Microsoft Teams has been very strong at Microsoft Ignite. There are many ways that developers can deliver even more productivity to users by extending the out-of-the-box Teams experience. Messaging Extensions are one particular type of custom development that can be used to enhance the conversational experience to create a deep integration to line of business applications.

 

In this theater session Wictor Wilén dived into the technical implementation to show us how to get started developing these Messaging Extensions, some tips and things to watch out for. Wictor has been a driving force in the community in the area of Teams development and is the person behind the popular Yeoman Generator for Teams.

 

Messaging Extensions covers three different ways that Teams behavior can be enhanced:

  1. Search Commands
  2. Action Commands
  3. Link Unfurling

 

Wictor concentrated on Search and Action commands in his demo where he was able to build tighter integration with Planner by developing:

  • A Search Command that enhanced the compose experience making it possible to search for a Planner task and insert the task as an Adaptive Card in the Teams channel.

search-compose-extension.png

 

  • An Action Command that allowed a user to create a Planner task from a chat message and then created an Adaptive Card (linking back to the Planner task).

action-extension.png

 

action-dialog.png

 

For both Search and Action commands the Bot can request that Teams displays a web page (URL) in a dialog. This provides the extension the ability to take full control of the user experience in the dialog and allows for a very rich custom experience. The Yeoman Generator for Teams is the fastest way to get started and through its interactive questions you can specifically create an app and have it scaffold up the pieces needed for a messaging extension.

 

An important architectural concept to grasp when getting started with developing messaging extensions is that they require a Bot to respond to the events that are happening in Teams. Both search and action commands result in a series of requests being sent to a Bot (that is registered via a Teams manifest) to handle the extension. The Bot responds to these various commands with an appropriate JSON response. This flow of requests and responses between the Teams client and the backend Bot is not direct, rather it flows through the Microsoft Bot service. This means that during development the Bot needs to be available on a public URL. To fill this requirement Wictor discussed the ngrok utility that can be used on a development machine to expose your localhost on a public URL. Ngrok also provides a great way to inspect the messages being sent between the Bot framework and your Bot while developing. The ngrok inspector is available while ngrok is running on the development machine and by default can be accessed on http://localhost:4040

 

IMG_7961.JPG

 

The source code used for the demo is available on GitHub http://askwictor.com/THR3040-demo and serves as a great reference for how to:

  • Implement a search command that displays a custom dialog (task module)
  • Implement an action command that displays a custom dialog (task module)
  • Perform an authentication/authorization flow within a messaging extension
  • Creating an Adaptive Card in a Teams channel as a result of interactions with both the search and action commands
  • Utilize an open source middleware library that Wictor has created that makes it far easier to handle the incoming request commands in your Bot and create the correctly formatted responses

 

Further resources:

https://docs.microsoft.com/en-us/microsoftteams/platform/messaging-extensions/what-are-messaging-ext...

https://docs.microsoft.com/en-us/microsoftteams/platform/

 

Written by:

Cameron Dwyer

 

1 Comment

The recording of this session is now available here: https://myignite.techcommunity.microsoft.com/sessions/79295