Microsoft 365 Community Adaptive Cards, 28 Jun 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: New Teams Toolkit v4.0 features used in Scenario-based Teams app using Adaptive Cards

Description

In this 9-minute demo, J.P. Roca highlights Teams VS Code extension’s capabilities that enable developers and non-developers to create Teams apps with minimal work. Key v4 capabilities called out - scenario-based app creation, run your Teams apps on Office and Outlook, create an app from sample, side-by-site edit-render experience (when Adaptive Cards VS Code extension installed), select to uncomment/activate commented out functionality, and test your app in Run and Debug mode. New capabilities are used in a scenario-based timer trigger app that delivers Adaptive Card notifications in Teams. This demo is taken from the Adaptive Cards community call recorded on June 9, 2022.

Demo Presenter
• J.P. Roca (Microsoft) | @jpthepm

Supporting materials
• Documentation - Build your first tab app using JavaScript | aka.ms/TeamsAppJS
• Documentation - Get started | https://docs.microsoft.com/microsoftteams/platform/get-started/get-started-overview?WT.mc_id=m365-66412-timura
• Documentation - Teams Toolkit Overview | https://docs.microsoft.com/microsoftteams/platform/toolkit/teams-toolkit-fundamentals?WT.mc_id=m365-66412-timura
• Article - Microsoft Teams Toolkit for Visual Studio Code now generally available | https://devblogs.microsoft.com/microsoft365dev/microsoft-teams-toolkit-for-visual-studio-code-now-generally-available/
• Twitter - Tomomi Imura | @girlie_mac
• Tenant – Microsoft 365 Developer Tenant | https://developer.microsoft.com/en-us/microsoft-365/dev-program

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

I'll talk about the team's toolkit version 4.0. So what exactly is the team's toolkit? The team's toolkit is a visual studio code extension that allows you to create teams apps with very minimal work. It'll provide the boilerplate code to get you started up and running and in version 4.0 of the team's toolkit, which was the most recent release announced in build. They allow for scenario-based app creations, so it'll allow you to create things like bot, notification, apps and command bot apps for teams by just making a couple clicks in visual studio.

A

This infographic really shows it well. Another new thing that was introduced in teams toolkit version 4.0 is the ability to run your apps on outlook and office as well. So they allow you to not only run to run it on teams, but run it on the outlook and offices as well.

A

The prerequisites for the teams toolkit is the team's toolkit extension for visual studio code. You need microsoft teams, you need node.js, a browser with developer tools for this demo I'll be using microsoft edge and then, of course, visual studio code to run the extension. There is one more prerequisite which is having something called a a developer tenant um on your m365 account. I went ahead and set that up. It was a couple clicks it'll, be included in documentation that I send out as well.

A

This basically allows you to have site loading for the apps that you're creating enabled on your team's client and without further ado. Let me get started with the demo here. So I'll share my screen here.

A

Okay, so when you first start off, you won't get any of this, so you'll, actually right after installing the teams, toolkit extension you'll get this tab right here that says teams toolkit when you go ahead and click on it. It'll show you that you've been signed into your account. If you haven't signed in you can go ahead and sign in there and then it'll also show you that you can create a new teams. App you go here, create a new teams app.

A

They also allow you to start from samples which is very cool, but if you create your new teams app and for this demo, I went ahead and created a notification bot, so you'll see the notification bot right here as one of the options, that's the one I went ahead and selected and it'll allow different triggers as well. So using things like azure functions, it'll allow you to have an http trigger or a timer trigger. I went ahead and selected the timer trigger here. um You click, ok and that's what will take you to here?

A

Let me just exit all this out, so you'll be greeted with this readme file. That'll show you everything, that's that you can do with teams toolkit app that you just created. So in this one, you can see the adaptive card that will be sent out and it'll be an adaptive card. That's automatically sent out with a timer trigger of every 30 seconds.

A

One use case that you might be able to see for this is a reminder that every 30 minutes you drink water or something similar to that it will give you everything you need to get started and then even tell you what the specific files do for for this timer trigger app that you created.

A

Another cool thing is that if you have the adaptive card, studio, visual studio code extension as well, you'll get this little icon right here that you can click and it'll. Allow you to see your adaptive card as you make edits to it in visual studio code else. You can also help hop into the adaptive cards designer on the website to get this information as well and yeah. This is the the json.

A

This is how the adaptive cards will look like the one that's going to be sent out by the app and right here you have your timer trigger when you go ahead and create the app it'll. Ask you if you want it on typescript or in javascript, I went ahead and selected javascript for this one and um it'll. This is all code that was generated for me. So I didn't write a single line of code in this. It was all generated through the teams toolkit, so it's really easy to go ahead and get started.

A

Making teams app teams apps that utilize adaptive cards as well it'll also show you like, for example, if you want to have different notifications or the bots sent, send notifications in a different channel. You can uncomment these lines of code right here. um If you want it sent in the group, you can uncomment this and if you want it sent to a specific person, you can uncomment this part and then just copy whatever you have here and this one.

A

We can see that it's going to utilize this template and it's going to fill in the values that we have here so, for example, title uh it's going to be a new event occurred, app name, contoso, app notification and that's everything that this part does and then, when you actually want to go ahead and start seeing your app work, you can go right here to the run and debug selecting edge for my debug option and then I'll start debugging. Then I'll go ahead and share the window once it's ready.

A

So almost done here.

A

Okay, cool. um Let me share this window.

A

Here we see that it's opened up our team's client, where the app is trying to get installed. So I named this app teams toolkit demo. I can go ahead and add it or I can also add it to a team. Add it to a chat, um we'll go ahead and just click add and it'll add right here to the left side.

A

I might get an error for this because I already went ahead and added it prior to this demo. Okay cool, so it didn't make an error and then you can see the notification is being posted, so a new event occurred, contoso app. What we saw was getting passed into the adaptive card json as data and then every 30 seconds.

A

We should be able to get a new notification and you can edit things like the timer trigger to be minutes seconds, whatever you want it to be sent for different teams, people even channels that you have with groups of people so give it a couple more seconds so that we get the other notification. Let me just check that everything's running smoothly.

A

These were the previous ones that were sent out right before um the demo started.

A

Okay, and here we see the part of the demo, that does not work, but you can see the adaptive card that I showed previously, um I'm not sure, what's going on with it, but yeah you'll be able to see it with the timer trigger of 30 seconds whenever it decides to work here might just be going slow and yeah. Let me hop back into the presentation here and I'll share all these links down here in the chat as well.

A

You can go ahead and get started with the hello world by going to this aka.ms teams app js.

A

This is a case sensitive link, so make sure that the js at the end is capitalized, and so is the app and the teams to get an overview just a general overview of the team's toolkit extension you can head over to the second link and the following links: just provide more information on the team's token, as well also huge shout out to tomomi who's the person that wrote the blog post, where I I learned about the team's token version, 4.0 she's, also the person that created this very cool infographic that you see here.

A

I don't see too many of these, so it's actually pretty cool to see the functionality displayed in in a way like this, so huge, shout outs to to movie for that and yeah. I think the the biggest part for for this demo on the team's toolkit version 4.0 that was announced and build, is the ability to create scenario-based apps, with just a couple of clips, you're not required to be a developer or even know exactly what the code does as as long as you can just get the general idea from the code.

A

That's provided to you. That's generated through the team's toolkit you'll be able to create your teams apps and now even utilize them in outlook and other office applications.