Microsoft 365 Community Microsoft Teams App Camp, 2 Mar 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft Teams App Camp - Add a Messaging Extension - Lab

Description

This module introduces you to how add a Messaging Extension

📖 Full lab can be found here https://microsoft.github.io/app-camp/aad/MessagingExtension/
👩🏾‍💻 Completed lab source code is here https://github.com/microsoft/app-camp/tree/main/src/extend-with-capabilities/MessagingExtension
🛠️ Lab prerequisites https://github.com/microsoft/app-camp/wiki/Prerequisites

This video is part of a series in a playlist about Building apps for Microsoft Teams: https://www.youtube.com/watch?v=hFwLfG95rVU&list=PLR9nK3mnD-OW5yCjKO0K8b-Xi4Ci1iBlU

➡️ Next video on this series - https://www.youtube.com/watch?v=tqNO5qaYmL0&list=PLR9nK3mnD-OW5yCjKO0K8b-Xi4Ci1iBlU&index=13
⬅️ Previous video on this series - https://www.youtube.com/watch?v=i66U1-QSrOI&list=PLR9nK3mnD-OW5yCjKO0K8b-Xi4Ci1iBlU&index=11

In this lab, you'll add a Search Message Extension to the Northwind Orders application so users can access and share order information in Microsoft Teams conversations. The information will be shared on an adaptive card; users receiving the card can then take action on the data.

Read more about the concepts covered in this lab here:
• Message extensions- https://docs.microsoft.com/en-us/microsoftteams/platform/messaging-extensions/what-are-messaging-extensions?tabs=nodejs&WT.mc_id=m365-58890-cxa
• Bot Framework- https://github.com/microsoft/botframework-sdk
• Adaptive cards - https://docs.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/what-are-cards?WT.mc_id=m365-58890-cxa#adaptive-cards

🛠️Lab prerequisites https://github.com/microsoft/app-camp/wiki/Prerequisites

✨ Demo Presenter
• Rabia Williams (Microsoft) | @williamsrabia

📝 Learn more
• YouTube playlist for this video series - https://www.youtube.com/watch?v=hFwLfG95rVU&list=PLR9nK3mnD-OW5yCjKO0K8b-Xi4Ci1iBlU
• Overview on Microsoft Teams extensibility - https://learn.microsoft.com/en-us/microsoftteams/platform/overview
• Design guidance for Microsoft Teams apps - https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/design/design-teams-app-overview
• Sample Microsoft Teams apps with code - https://adoption.microsoft.com/en-us/sample-solution-gallery/?product=Teams&sortby=creationDateTime-true&page=1

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/homehttp://aka.ms/m365/com

A

Hello and welcome to teams app Cam in this video. Let's walk through the lab to build message: extensions, I'm, Robbie, Williams, Cloud Advocate at Microsoft. This video is to accompany the message. Extension lab in appcam note that you'll need to complete lab a01 to a03, which builds out the core application before starting this one as they build on one another. You can find all the app Cam Labs at AKA dot, Ms, slash app hyphen camp.

A

Up to this point of the lab, you have created the core application, Northwind orders app, which is a personal tab that uses teams SSO and styling, which retrieves your orders and display them for you. In the my orders, tab.

A

Now, let's extend the application by adding additional capability in this lab, we will add a message extension to our existing teams app. So what are message extensions?

A

They are a powerful way for users to engage with apps from Microsoft teams with this capability users can search and update information to and from a web service and share the same information in the form of Rich actionable cards right into a conversation with your teammates.

A

Now some scenarios where this will be useful to show customer support tickets or to share image and media content.

A

Now types of message: extensions: there are three types of message: extensions that you can add to your team's app today: search commands which will query a web service to get information and insert data from the response into a message. Well think, giphy app, now scenarios where this is useful.

A

If you want to look up a product and share it with your team Action commands, which will collect information from the user using an input form or a dialog and post that information back to a web service or right into a conversation scenarios where this can be useful. Well, if you want to create a new product.

A

Link unfurling, which will allow you to embed a link in a message into a detailed card, giving out more information about that link than just a link pasted in the chat you can customize this card as well.

A

We talked about inserting Rich actionable cards in the conversation and well. It only makes sense to talk a bit further about adaptive cards, which are the actionable cards we will use in this lab.

A

Adaptive calls are platform, agnostic, Snippets of UI, ordered in Json that apps and services can openly Exchange the help, design and integrate lightweight UI for all major platforms and Frameworks.

A

They help you increase engagement and efficiency by injecting your actionable content directly into the apps they're, always native and blend seamlessly into the surrounding UI, and they work on every major platform.

A

Now, if you want to find out more about adaptive, cards go to adaptivecars.io, and you can find heaps of samples in here in the documentation that you need to get started. You have you can see here the data and the template. So, yes, adaptive card support, templating separation of your data and your layout of the card feel free to go ahead and try out these really beautiful, looking cards, so they can Implement them in your application.

A

Now the features added in this lab, we are going to learn how to create a search command in your application to search for a product and then share that result in the form of a rich card and a conversation like what I'm doing right now. I'm selecting try embedding that into my conversation and then posting that in the chat and in the Adaptive card you can see you can provide an input field and a submit button called update.

A

Stop for users to take action to update the stock value for product in the northern database all happening in the same conversation, let's update, and it's done now- walk through of the lab. So, let's get started first by resetting the site go to microsoft.github.io, slash app hyphen Cam, and this is a landing page um of the Microsoft teams app camp and once you are on the home page, using the top navigation go to extended labs, and these are the labs you will use to extend the uh existing application.

A

You have built using labs in path, aopath, B and well. These are your adventures available, for you so make sure you have fun doing them.

A

Select add a message, extension and scroll down to access. Oh wait, scroll down to the concepts, so you can see all the concepts we're going to explain in this lab here. These are linked to documentation and you can also see the features we're going to add on top of our core application that we're going to build in this lab so exercise one is bot registration since iMessage extension is a conversation between your applications. Web services and teams. You'll need a secure communication protocol to send and receive messages.

A

Teams uses the Azure bot framework for this purpose. For that reason, you'll need to register your web service as a bot in the bot framework and update the app manifest file to Define your web services. So teams client can know about it and that's why you need this step so to do the registration go to httpsdev.teams.microsoft.com home in your Dev tenant and use these steps to register the bot at the end of the registration.

A

You should have a bot, ID and client secret also called assets password to be used later to update the dot EnV file.

A

Now, let's take a look at exercise: 2, which are code changes, you'll, be adding new adaptive Cards into the project under a new folder called cards. These cards will be used as part of the message extension now you can see here there are Json files which integrate lightweight UI into your app.

A

Next, we will add code for the bot, so we will add a new file bot.js inside the server folder. This is this bot handle, search, display and update functionality of a product within the conversation.

A

So in the code, let's look at these three handlers, important handlers that you need to know about, so you can understand. What's going on behind the scenes, so extension query is when you're searching for a product or a query extension select item when you tap on the search results and on invoke activities every time there is an activity. Now, let's update our configuration file, go to dot EnV file and add the bot ID and the password. This is what we saved earlier when we registered a bot.

A

Next, we will update the scripts to package or app to use the bot ID, which we will add in the Manifest file as well. So, let's add that in this is for packaging up your application.

A

Now, let's go ahead and look at our manifest template and add information regarding our message extension.

A

So you can see here compose extension and you can mention the bot ID here and what are the other things we need to add here we have the command, which is what we're searching for a product, and it is of type query. That means it's a Search Command and we are refining a product based on its product name. So we're passing this parameter in now that the teams app packet side of things are taken care of. Let's update the rest, so go to identityservice.js file to let the bot framework adapter, do validation for the bot.

A

Next, we will go to Northern data service, to add functions, for searching a product and to update our product stock information. So, let's add these two functions in.

A

First, to get the product by name: this is for the search.

A

And the second is update product unit stock. This is when you click on that button and update the stock information.

A

Next, we will also update the server.js to import the bot framework SDK and let's take a look at that. Yes, the import statements and then you define the bot framework. Adapter, that's happenings over here, yep there it is, and then you also want to make sure your request to the bot have a listener. So that's what's Happening Here now. Finally, we need to install new packages. Well, I think this should have happened first, but um let's go ahead and do that.

A

Now to test the application by now, you know, uh since you've already done other labs, especially the core app. um You know that you need to uh install all the dependencies. Then you need to package it up and once you've packaged it make sure that you're running your server by running npm start and then upload your app package and go ahead and use the application. Now you can add it to teams or a to to a group chat, and you can go ahead and try it out. I will show you how to test this message.

A

Extension if you are new with all the concepts here so to test out this application I'm here in my visual studio code, I, have it running using npm start from the project folder, which is here called messaging extension, um so I've I've started the server and what you don't see is I've also started in rock, which I think you must have covered in earlier Labs. Now, let's go ahead and open up teams in a browser, and this is the team where I'm going to test these search message extension.

A

So here I am I need to update stock on a product. uh What I can do here is in the conversation with my teammates I can go to this three dots and search for my app and I can now search for the product in the Northwind database. So I can see my product coming up here. I tap on the product and, as you can see here, this, the rich card using adaptive card is being embedded into the conversation which I can now post to my teammates.

A

Now any one of my teammates can go ahead and update the stock using this form uh for Simplicity. Let's go ahead and update it as well, so the existing stock is 100, I'm, gonna bump it up to 150..

A

So let's go ahead and select updates dock right, so that is now updated, and this is how you can test your message. Extension.

B

Thanks for watching this app cam video complete instruction for this lab is at AKA dot, Ms, slash app hyphen Camp once you've completed it, you can continue any of the extended labs hope you have a smooth sailing and that you enjoy doing Microsoft teams app camp.