DEV Community: Microsoft 365

Join us for HackTogether: The Microsoft Teams Global Hack

Garry Trinder — Thu, 11 May 2023 14:40:00 +0000

Millions of people across the globe use Microsoft Teams at work and at school. It is one of the world’s most popular collaboration and communication platforms with more than 300 million monthly active users. But did you know that you can build apps that can run inside or extend Microsoft Teams features?

Join us for HackTogether: The Microsoft Teams Global Hack, our virtual hackathon to learn how to build powerful apps for Microsoft Teams. Join live events, connect with Microsoft experts and win awesome prizes!

The hackathon opens on June 1, 2023 with our live keynote. Register and start hacking on your project, alone or with a team. Submit your project before the event closes on June 15, 2023.

Not sure how to build apps for Microsoft Teams? Don’t worry, we have you covered! We will provide help and support every step of the way with live events and a chance to connect with Microsoft experts.

If you’re a beginner, a student, or experienced developer interested in learning a new skill or just want to showcase your existing skills, make sure that you don’t miss this opportunity!

Join live events 📺

We will host live events throughout the hackathon to inspire you with ideas and provide access to learning resources to help you on your app building journey.

Join Microsoft experts as they share the why, what, and how of building apps for Microsoft Teams.

Schedule of live events:

June 1st: Ready, Set, Hack: Empower the developer in you with Microsoft Teams app development!
June 5th: Introduction to Teams tabs and building them with SharePoint Framework: Maximize Microsoft 365 investments.
June 6th: Introduction to Teams bots: Integrating AI into your bot logic.
June 7th: Boost user engagement beyond Teams with message extensions and make your app intelligent using Microsoft Graph.
June 12th: Ask the experts: Meet our engineering team and ask your pressing questions!
June 15th: Wrap up and take action: Join our community for the next Big Thing!

Be sure to add these events to your calendar using our invite, so that you don’t miss out!

Connect with Microsoft experts 💬

If you need help or get stuck, ask a question in our Discussions forum and connect with Microsoft experts who will be on hand to help you.

Win awesome prizes! 🏆

Once the event closes, we will judge all entries and announce the winners.

Prizes will be awarded in the following categories:

🏆 Grand prize winner: The best of the best! This category rewards the solution that meets all judging criteria, wows judges, and has potential real-world value for the 300M Teams users.

Xbox 🎮
$300 digital gift card 💸

🥇 Best AI-powered solution. This category rewards the solution that integrates AI or machine learning in an innovative way. For example, a chatbot that automates common tasks in Teams or an app that uses AI to suggest relevant files for users.

$300 digital gift card 💸

🥇 Best productivity-focused solution. This category rewards the solution that facilitates productivity and collaboration within Teams. For example, extending an existing app to Teams or creating a custom solution that helps team members stay organized during meetings.

$300 digital gift card 💸

🥇 Community hack winner. This category rewards the solution chosen by our guest judges at European Collaboration Summit (ECS).

C64 retro computer 🖥️

How do I get started? 🚀

HackTogether: The Microsoft Teams Global Hack is a unique opportunity to challenge yourself, learn new skills, and showcase your talent.

This hackathon is run in partnership with Microsoft 365 & Power Platform Community and the European Collaboration Summit community. Learn more about Microsoft Teams development. Visit our Microsoft Teams Dev Center and follow us on (@Microsoft365Dev) / Twitter to stay on top of our news and announcements.

Happy coding!

Learn how to develop apps for Microsoft Teams using Teams Toolkit for Visual Studio Code video series

Garry Trinder — Thu, 27 Apr 2023 12:59:00 +0000

Are you a developer looking to start creating apps for Microsoft Teams?

We are delighted to share with you the Build and deploy apps for Microsoft Teams using Teams Toolkit for Visual Studio Code video playlist.

Teams Toolkit for Visual Studio Code is a tool for building apps for Microsoft Teams, fast.

It is the quickest way to create, build, debug, test, and deploy apps for Microsoft Teams.

This playlist teaches you basic concepts of building apps for Microsoft Teams using Teams Toolkit.

You will learn how to:

Get started
Build a bot
Build a tab
Use Teams JavaScript library
Deploy your app to Azure

Happy coding! 👋

Full playlist URL: https://www.youtube.com/playlist?list=PLR9nK3mnD-OUj_N95-MsO0kcuufOzRTTh

All videos in the playlist were recorded in the weekly Microsoft 365 Platform and Power Platform community call. Learn more: https://aka.ms/community/calls

Teams Toolkit Cloud Skills Challenge - build apps for Microsoft Teams!

Luise Freese — Wed, 19 Apr 2023 10:46:42 +0000

👋 Hey, fellow developers!

You like to #NeverStopLearning and feel that #SharingIsCaring? Then this here is exactly for you! We started a new Cloud Skills challenge about Teams Toolkit last week - and we are overwhelmed by the positive response.

It is an amazing opportunity to take your app development skills to the next level!

Join us!

Join us from April 12 to April 26 and participate in the challenge to complete the learn path aka.ms/LearnTeamsToolkit.
Not only will you enhance your skills to develop apps for Teams, but you will also be eligible to win fab prizes. The following prizes will be awarded: Ten (10) Grand Prize winners. Each winner will receive the choice of either a $100 digital gift card or $100 Azure credits. Approximate Retail Value (ARV) $1000.

By completing the learn path, you will learn how to leverage Teams Toolkit, a Visual Studio Code extension to build apps for Teams, covered by five modules:

✅ Get started building apps for Microsoft Teams by using Teams Toolkit for Visual Studio Code
✅ Build a bot by using Teams Toolkit for Visual Studio Code
✅ Build a Microsoft Teams tab app by using Teams Toolkit for Visual Studio Code
✅ Add chat to a Microsoft Teams app by using the Teams JavaScript client library
✅ Deploy a Microsoft Teams app to Azure by using Teams Toolkit for Visual Studio Code
With that, they provide a comprehensive and in-depth experience that covers everything you need to know to get started building apps for Teams.

With Teams Toolkit, you can streamline the app development process and make the most of the platform’s features, including creating bots that can automate tasks, developing tabs that can display information from external services, and building message extensions that enable users to interact with external services from within Teams.

Contributing

What’s more, once you completed the challenge, you will have the opportunity to contribute to the community by creating samples and getting featured on adoption.microsoft.com. This way, you can showcase your skills, help others, and become a recognized member of the community.

Don’t miss this incredible opportunity to enhance your skills and join the Teams Toolkit Cloud Skills Challenge.

We can’t wait to see what you create!

How to get started

✅ Register for the challenge and complete the learn path aka.ms/LearnTeamsToolkit
✅ Post on Twitter or LinkedIn about it using the hashtag #LearnTeamsToolkit
✅ Tag me Luise Freese | @luisefreese

Registration house-keeping

When you register make sure to check the official rules link, and take the survey. This will make you compliant for winning prizes. Once the survey form is filled out, select the check box to agree to the rules and proceed to register by selecting the Continue button.

Learn more

Teams Toolkit Overview
Teams Toolkit on VS Code Marketplace

How to create apps for Microsoft Teams

Rabia Williams — Mon, 06 Feb 2023 00:18:18 +0000

As Microsoft Teams becomes increasingly popular as a collaboration platform, demand for developers who can build apps for Teams has skyrocketed. Learning how to build apps for Teams can open up new career opportunities for you as a developer.

If you are looking for a free beginner course to learn how to build apps for Teams, look no further. We have a new learning path which will take you on a journey to build apps for Teams.

Teams Toolkit, an extension for Visual Studio Code, will be used in the course, to help you create, test, and deploy Microsoft Teams apps with ease.

So, what are you waiting for? Go to aka.ms/learn/teamstoolkit to take the course.

Control Microsoft Teams with a Stream Deck

Jim Bennett — Thu, 02 Feb 2023 00:00:00 +0000

Already have a Stream Deck and just want to get it working with Teams? Jump to the instructions to set this up

Like a lot of folks, I spend time in Microsoft Teams. It’s where I chat to my team and others at Microsoft, and it’s where I take most of my meetings.

Although Teams has a lot of good features, the UI can sometimes be a pain to use in meetings - especially as a Microsoft employee where we get to try the dogfood versions and things move all the time. There have been loads of occasions where I have tried to give a reaction and put up my hand by mistake, or tried to mute and left the call. WHat I really need is a tool to allow me to control teams without using the UI.

Makers have worked on hacks for this. For example, the key combination ctrl+shift+m toggles muting on teams. Add a big red button that simulates this key press and you have a quick way to mute or unmute. Here’s one example of this from Jen Fox on Hackster.

For those with a less maker mindset, there’s now a new way to do this - using a Stream deck!

If you’ve not come across a Stream Deck before, its a neat little gadget that comes in different sizes and has an array of LCD buttons. You can set these buttons up to do things like control apps, or make REST requests, and as each button is an LCD screen you can fully customize what is displayed. For example, you can use one of these to control apps like OBS to switch scenes, or start streaming to Twitch.

There’s a whole Stream Deck store with plugins to extend the capabilities by controlling other apps or hardware (such as Phillips Hue lights). A Teams plugin has just been released!

Set up your Stream Deck for Teams

To set up the Stream Deck, you need an API key for Teams to allow external apps to control it - makes sense really as Teams gives access to confidential work stuff, so you don’t want any app to be able to get access. Then you install the plug in, and set it up.

Get an API key

To get an API key:

Select the ellipses from the top-right corner of Teams, then select Settings

Select the Privacy tab, then scroll down to the Third-party app API section and select Manage API

From the API settings, copy the API token. Use the Generate button to generate a new API key if needed. And yes, the UI is terrible and the key wraps out of the text box… 🤷

Now you have your key, you can set up your Stream Deck!

Set up the Stream Deck

Teams is managed from a plugin from the Stream Deck store.

Open the Stream Deck store from the menu/taskbar icon

Search for Teams in the store, and install the Microsoft Teams plugin with the install button

Once installed, configure your Stream Deck using the Teams options. I did mine by creating a new profile that is activated when Teams is active.

Once your profile is ready, select it then add buttons by dragging them from the Microsoft Teams group in the menu. After adding each button, you will need to set the API token field to the API key you copied from Teams.

Done! You can now control Teams using your Stream Deck.

Be sure to follow me for more cool posts!

Jim BennettFollow

Head of Developer Advocacy at Pieces

🙋🤖 Place your order! - Build bots for Microsoft Teams to automate repetitive workflows using Teams Toolkit for VS Code

Garry Trinder — Tue, 06 Dec 2022 12:20:00 +0000

Imagine the scenario that your organisation wants to make it easier for employees to place orders at the company restaurant.

As your organisation is already a heavy user of Microsoft Teams, it makes sense to build an app and surface it where your employees spend most of their working day.

Placing an order at a restaurant is a simple repetitive task. Typically, the process goes like this:

Employee asks to make an order.
Restaurant responds with the menu.
Employee places their order based on the menu options.
Restaurant confirms and works on the order.

Developing a bot for Microsoft Teams, rather than a traditional web application, is a great way of implementing this type of workflow inside Microsoft Teams through a conversational interface.

In this tutorial, I'm going to walk you through the steps of how to use Teams Toolkit for Visual Studio Code to create a Microsoft Teams app that contains a bot that the employees can use to place orders with the restaurant.

If you want to see the finished version, checkout the sample in the gallery, or the final source code on the TeamsFx GitHub repository.

🎥 A recording from the weekly Microsoft 365 Platform Community call is available, Build your first Workflow bot for Microsoft Teams with Teams Toolkit for Visual Studio Code, which covers the steps discussed in this tutorial.

Teams Toolkit for Visual Studio Code
Prerequisites
Install Teams Toolkit for Visual Studio Code
Scaffold and run the project
Clean the project
Create the Adaptive Card templates
Create the order command
Create the order card action
Place your order
What next?
Learn more

🛠 Teams Toolkit for Visual Studio Code

Teams Toolkit for Visual Studio Code enables you to create, debug and deploy Microsoft Teams apps to a Microsoft 365 tenant fast using a no configuration approach.

In a recent release of Teams Toolkit for Visual Studio Code, a new scenario-based app capability has been released called Initiate sequential workflows.

This new capability makes it easy for developers to respond to actions invoked from Adaptive Cards, which is ideal for our restaurant order scenario.

Using this new capability, we will create a bot that uses the below workflow.

The employee sends a message containing the word order to the bot chat.
The bot returns an Adaptive Card containing a simple form.
The employee submits the form.
The bot captures the form data and replaces the form with a confirmation message.

🏁 Prerequisites

To follow this guide successfully you will need.

Microsoft 365 Tenant, which has been enabled for developing custom applications with. If you do not have a tenant, I highly recommend that you use a Microsoft 365 Developer Tenant, which you can obtain for free by joining the Microsoft 365 Developer Program. It is pre-configured for Microsoft Teams app development right out of the box.
Visual Studio Code, if you do not have it installed, download it for free!

With the prerequisites done, let’s begin!

🛠 Install Teams Toolkit for Visual Studio Code

Our first step is to install Teams Toolkit into Visual Studio Code, you can do this several ways, however the easiest is way is to search for and install the extension using the Extensions panel from the Side Bar within Visual Studio Code.

Open Visual Studio Code.
Open the Extensions panel from the Side Bar.
Search for Teams Toolkit in the marketplace.
Select Teams Toolkit in the search results.
Click the Install button to install the extension.

Once the extension has been successfully installed, you will see a Microsoft Teams icon in the Side Bar.

👷 Scaffold and run the project

After installing the extension, let’s create our project.

Open the Teams Toolkit extension by clicking on the Microsoft Teams icon in the Side Bar
Click the Create a new Teams app button to start the project scaffolding wizard
Select Create a new Teams app in the first step
Select Initiate sequential workflows in the Capabilities step
Select TypeScript in the Programming Language step
Select a folder of your choice in the Workspace folder step, this is the location of where the project will be created.
Enter ContosoRestaurant in the application name step.

When you complete the last step, Teams Toolkit will create a project in a folder with the same name in the Workspace folder location you selected in the previous step.

After the project scaffolding is complete, Teams Toolkit will re-open Visual Studio Code in the project folder and open a Readme file for the project.

The scaffolded project contains some boilerplate code which provides some basic workflow functionality, containing a command and action.

You can run the bot to see how it works by opening the debug side panel, select your browser of choice in the dropdown, and start debugging by either clicking the green play icon or by pressing F5 on your keyboard.

If this is the first time you have used Teams Toolkit for Visual Studio Code, when you first launch your app using Debug, you will be prompted to sign into your Microsoft 365 tenant.

Click the Sign In button in the prompt, this will open your primary browser and navigate you to a Microsoft 365 login screen. Enter your account details to complete the authentication flow, once successful you can close the browser window and return to Visual Studio Code.

Teams Toolkit will setup all the required resources and services for your bot to run locally inside Microsoft Teams, and also provide debugging and hot reload functionality.

The first time you run your app, Teams Toolkit will perform an npm install to install all the required packages, so it might take a few moments depending on your network and machine resources.

This would be a good time to grab a ☕️

When complete, a browser window will be launched and you will be navigated to the web version of Microsoft Teams. You may be prompted for authentication again, if you are, just complete the steps using the same account as you signed in previously.

When Microsoft Teams loads, a dialog box will appear which enables you to side load your app. Click the Add button to add the app as a personal app, and open the bot chat.

Type helloWorld into the chat box and send your message, this will invoke the bot command which returns an Adaptive Card with a button.

Selecting the button will update the Adaptive Card with confirmation of that action.

👷 Clean the project

This is entirely optional, but to help follow along with the rest of this tutorial, I recommend that you remove the default code, so it doesn't get in the way and we can start from a clean slate.

Don't worry about what we are removing for now, I'll explain all this as we go through the steps.

If your debug session is still running, just close down the browser window or stop the debugging session in Visual Studio Code.

To remove the default code, you can use a script or do it manually.

To manually remove the code

Delete all files in the following folders
- bot\src\AdaptiveCards
- bot\src\cardActions
- bot\src\commands
Clear contents of bot\src\cardModels.ts
Update /bot/src/internal/initialize.ts
- Clear commands array 👉 commands: []
- Clear actions array 👉 actions: []
- Remove the unused imports
Update templates/appPackage/manifest.template.json
- Clear the commands array 👉 commands: []

To use the script to remove the code

Create a scripts folder in the root
Download the file and add it to the scripts folder
Open terminal prompt, change to root directory
Execute node scripts\ttk_workflowbot_clean.js

Now that we have a clean project, let's start building out our scenario.

🧑‍💻 Create the Adaptive Card templates

The first thing we will do is implement Adaptive Cards templates, these cards represent our user interface that employees will interact with.

Adaptive Cards are an open card exchange format enabling developers to exchange UI content in a common and consistent way.

Templating enables the separation of data from the layout in an Adaptive Card, by using data binding syntax ${data} we can add placeholders into our templates that can be populated data when we use the Adaptive Card SDK to render the card.

The first template will be sent back to the employee when they request to make an order with menu options.

Let's create a new file in the bot\src\AdaptiveCards folder called orderCommandResponse.json with the following contents.

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.4",
    "body": [
        {
            "type": "TextBlock",
            "text": "${FormInfo.title}",
            "size": "Large",
            "wrap": true,
            "weight": "Bolder"
        },
        {
            "type": "Input.ChoiceSet",
            "id": "EntreeSelectVal",
            "label": "${Order.questions[0].question}",
            "style": "filtered",
            "isRequired": true,
            "errorMessage": "This is a required input",
            "placeholder": "Please choose",
            "choices": [
                {
                    "$data": "${Order.questions[0].items}",
                    "title": "${choice}",
                    "value": "${value}"
                }
            ]
        },
        {
            "type": "Input.ChoiceSet",
            "id": "SideVal",
            "label": "${Order.questions[1].question}",
            "style": "filtered",
            "isRequired": true,
            "errorMessage": "This is a required input",
            "placeholder": "Please choose",
            "choices": [
                {
                    "$data": "${Order.questions[1].items}",
                    "title": "${choice}",
                    "value": "${value}"
                }
            ]
        },
        {
            "type": "Input.ChoiceSet",
            "id": "DrinkVal",
            "label": "${Order.questions[2].question}",
            "style": "filtered",
            "isRequired": true,
            "errorMessage": "This is a required input",
            "placeholder": "Please choose",
            "choices": [
                {
                    "$data": "${Order.questions[2].items}",
                    "title": "${choice}",
                    "value": "${value}"
                }
            ]
        }
    ],
    "actions": [
        {
            "type": "Action.Execute",
            "verb": "order",
            "title": "Place Order"
        }
    ]
}

When this card is rendered, it will display a mini form with three drop downs and an action button. When the action button is selected, the form data is sent to the bot along with a verb, which represents the action that was performed.

Note that the drop downs are given ID property values, when the form is submitted the data sent to bot as key/value pairs, e.g { "DrinkVal": "value" }.

The second template will be displayed to the employee when they have submitted their order to the restaurant.

Let's create a new file in the bot\src\AdaptiveCards folder called orderActionResponse.json with the following contents.

{
  "type": "AdaptiveCard",
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.4",
  "body": [
    {
      "type": "TextBlock",
      "text": "${title}",
      "wrap": true,
      "style": "heading"
    },
    {
      "type": "Container",
      "items": [
        {
          "type": "FactSet",
          "facts": [
            {
              "title": "Entree",
              "value": "${actionData.EntreeSelectVal}"
            },
            {
              "title": "Side",
              "value": "${actionData.SideVal}"
            },
            {
              "title": "Drink",
              "value": "${actionData.DrinkVal}"
            }
          ]
        }
      ]
    }
  ],
  "actions": [
    {
      "type": "Action.Execute",
      "title": "Edit Order",
      "verb": "order-edit"
    }
  ]
}

When this card is rendered, it will display the selected options submitted in the first card and an action button.

Now that we have our templates in place, let's create the data models to define the correct data shape to use with our template when we render the card using the Adaptive Cards SDK.

Open the bot/src/cardModels.ts file.

Add the following interfaces which describes the data shape for the bot\src\AdaptiveCards\orderCommandResponse.json card.

export interface OrderData {
  FormInfo: FormInfo;
  Order: Order;
}

export interface FormInfo {
  title: string;
}

export interface Order {
  questions: Question[];
}

export interface Question {
  question: string;
  items: Item[];
}

export interface Item {
  choice: string;
  value: string;
}

Add the following interfaces which describes the data shape for the bot\src\AdaptiveCards\orderCommandResponse.json card.

export interface OrderResponseData {
  title: string;
  actionData: OrderActionData;
}

export interface OrderActionData {
  EntreeSelectVal: string;
  SideVal: string;
  DrinkVal: string;
}

The OrderActionData interface also provides the shape of the data which is returned to our bot when the first card is submitted.

Take a moment to look at the data binding syntax used in the templates and the shape of the data defined in the data models.

📝 Create the order command

To create a new command we need to perform three tasks

Create the command handler
Update the bot configuration
Update the app manifest

Create the command handler

With our user interface defined, let's create the order command which our employees will use to start the order process.

Let's create a new file in the bot\src\commands folder called orderCommandHandler.ts with the following contents.

export class OrderCommandHandler implements TeamsFxBotCommandHandler { }

The OrderCommandHandler class will represent the handler for when the order command is sent in the bot chat.

We will use the TeamsFxBotCommandHandler interface from the @microsoft/teamsfx library to implement the handler functionality.

Let's import the CommandMessage, TeamsFxBotCommandHandler and TriggerPatterns classes from the @microsoft/teamsfx library, the TurnContext class and Activity interface from botbuilder library, and implement the TeamsFxBotCommandHandler interface.

You can use the Quick Fix menu in Visual Studio Code to import packages and implement interfaces quickly

import { CommandMessage, TeamsFxBotCommandHandler, TriggerPatterns } from "@microsoft/teamsfx";
import { TurnContext, Activity } from "botbuilder";

export class OrderCommandHandler implements TeamsFxBotCommandHandler {

  triggerPatterns: TriggerPatterns;

  async handleCommandReceived(context: TurnContext, message: CommandMessage): Promise<string | void | Partial<Activity>> {
    throw new Error("Method not implemented.");
  }

}

Let's update the triggerPatterns property with the value order. This property defines the keyword that the bot will listen out for when it is sent messages.

triggerPatterns: TriggerPatterns = "order";

Next, let's add the logic to the handleCommandReceived method that will be executed when the handler is invoked.

First, add the async keyword to the method declaration as the method will return a Promise.

async handleCommandReceived(context: TurnContext, message: CommandMessage): Promise<string | void | Partial<Activity>> {

Next we will create a new object that we will use populate the template in the shape of the OrderData model that we defined earlier. This object will represent the menu options that the employee can choose from in the form.

Import the OrderData interface using an import statement at the top of the file.

import { OrderData } from "../cardModels";

Create a new constant called orderData using the OrderData interface as its type, replacing the throw statement.

const orderData: OrderData = {
      "FormInfo": {
        "title": "Malt & Vine Order Form"
      },
      "Order": {
        "questions": [
          {
            "question": "Which entree would you like?",
            "items": [
              {
                "choice": "Steak",
                "value": "Steak"
              },
              {
                "choice": "Chicken",
                "value": "Chicken"
              },
              {
                "choice": "Tofu",
                "value": "Tofu"
              }
            ]
          },
          {
            "question": "Which side would you like?",
            "items": [
              {
                "choice": "Baked Potato",
                "value": "Baked Potato"
              },
              {
                "choice": "Rice",
                "value": "Baked Potato"
              },
              {
                "choice": "Vegetables",
                "value": "Baked Potato"
              },
              {
                "choice": "Noodles",
                "value": "Baked Potato"
              },
              {
                "choice": "No Side",
                "value": "Baked Potato"
              }
            ]
          },
          {
            "question": "Which drink would you like?",
            "items": [
              {
                "choice": "Water",
                "value": "Water"
              },
              {
                "choice": "Soft Drink",
                "value": "Soft Drink"
              },
              {
                "choice": "Coffee",
                "value": "Coffee"
              },
              {
                "choice": "Natural Juice",
                "value": "Natural Juice"
              },
              {
                "choice": "No Drink",
                "value": "No Drink"
              }
            ]
          }
        ]
      }
    }

Now we have our data, we need to populate our template with orderData to render a card that we can then send to the bot chat as our response. To do this we need to import our template and the Adaptive Cards SDK.

Import the template and SDK by adding import statements at the top of the file.

import orderCard from "../adaptiveCards/orderCommandResponse.json";
import { AdaptiveCards } from "@microsoft/adaptivecards-tools";

Add the following line after you initialise the orderData constant, where we will use the Adaptive Cards SDK to parse the template and passing the data object to it to render the card.

const cardJson = AdaptiveCards
  .declare<OrderData>(orderCard)
  .render(orderData);

We now have a card populated with data and ready to be sent, so let's do that.

Import the MessageFactory and CardFactory classes from the botbuilder library by updating the existing import statement.

import { TurnContext, Activity, MessageFactory, CardFactory } from "botbuilder";

Add the following line after you initialise the cardJson constant to send the populated Adaptive Card to the bot chat.

return MessageFactory.attachment(
  CardFactory.adaptiveCard(cardJson)
);

Update the bot configuration

After implementing the command handler, the next step is to update the bot configuration to tell our bot about our new handler.

Open the bot\src\internal\initialize.ts file which contains our bot configuration and import the OrderCommandHandler class at the top of the file.

import { OrderCommandHandler } from "../commands/orderCommandHandler";

Update the commands array, including a new instance of the OrderCommandHandler class in the array.

command: {
  enabled: true,
  commands: [new OrderCommandHandler()],
},

Update the app manifest

The final step is to add our order command to the list of suggestions that the bot can recommend to employees who use it.

Open the templates\manifest.template.json app manifest file, which describes how our app integrates into Microsoft Teams.

Update the commands array, including a new command object in the array.

"commands": [
  {
    "title": "order",
    "description": "Place an order"
  }
]

⚡️ Create the order card action

With our user interface and command handler defined, we now need to create an action handler which will be triggered when the employee submits the order.

To create a new action handler we need to perform two tasks

Create the action handler
Update the bot configuration

Create the action handler

Let's create a new file in the bot\src\cardActions folder called orderActionHandler.ts with the following contents.

export class OrderActionHandler implements TeamsFxAdaptiveCardActionHandler { }

The OrderActionHandler class will represent the handler for when an Adaptive Card action that uses the Action.Execute type passing the order verb.

We will use the TeamsFxAdaptiveCardActionHandler interface from the @microsoft/teamsfx library to implement the handler functionality.

Let's import the AdaptiveCardResponse enum and TeamsFxAdaptiveCardActionHandler class from the @microsoft/teamsfx library, the TurnContext class and InvokeResponse interface from botbuilder library, and implement the TeamsFxAdaptiveCardActionHandler interface.

import { AdaptiveCardResponse, TeamsFxAdaptiveCardActionHandler } from "@microsoft/teamsfx";
import { TurnContext, InvokeResponse } from "botbuilder";

export class OrderActionHandler implements TeamsFxAdaptiveCardActionHandler {

  triggerVerb: string;

  adaptiveCardResponse?: AdaptiveCardResponse;

  handleActionInvoked(context: TurnContext, actionData: any): Promise<InvokeResponse<any>> {
    throw new Error("Method not implemented.");
  }

}

Let's update the triggerVerb property with the value order. This property defines the verb that the bot will listen out for when it is sent data as a result of an Action.Execute action invoked from an Adaptive Card.

triggerVerb: string = "order";

Next, let's add the logic to the handleActionInvoked method that will be executed when the handler is invoked.

Add the async keyword to the method declaration as the method will return a Promise.

async handleActionInvoked(context: TurnContext, actionData: any): Promise<InvokeResponse<any>> {

You may have noticed that handleActionInvoked method returns an actionData parameter, this will contain the data submitted from our Adaptive Card.

As we have already defined the model for this data, let's replace any with our own type.

Import the OrderActionData interface using an import statement at the top of the file.

import { OrderActionData } from "../cardModels";

Update actionData parameter type.

async handleActionInvoked(context: TurnContext, actionData: OrderActionData): Promise<InvokeResponse<any>> {

Next we will create a new object that we will use populate the template in the shape of the OrderResponseData model that we defined earlier. This object will represent the menu options selected by the employee and includes a title to display in the confirmation.

Import the OrderResponseData interface using an import statement at the top of the file.

import { OrderResponseData } from "../cardModels";

Create a new constant called orderResponseData using the OrderResponseData interface as its type, replacing the throw statement.

const orderResponseData: OrderResponseData = {
  title: "✅ [ACK] Order Placed",
  actionData
};

Now we have our data, we need to populate our template with orderResponseData to render a card that we can then replace the submitted Adaptive Card with. To do this we need to import our template and the Adaptive Cards SDK.

Import the template and SDK by adding import statements at the top of the file.

import orderActionResponseCard from "../adaptiveCards/orderActionResponse.json";
import { AdaptiveCards } from "@microsoft/adaptivecards-tools";

Add the following line after you initialise the orderResponseData constant, where we will use the Adaptive Cards SDK to parse the template and passing the data object to it to render the card.

const cardJson = AdaptiveCards
  .declare<OrderResponseData>(orderActionResponseCard)
  .render(orderResponseData);

We now have a card populated with data and ready to be sent, so let's do that.

Import the InvokeResponseFactory class from the @microsoft/teamsfx library by updating the existing import statement.

import { AdaptiveCardResponse, InvokeResponseFactory, TeamsFxAdaptiveCardActionHandler } from "@microsoft/teamsfx";

Add the following line after you initialise the cardJson constant to send the populated Adaptive Card to the bot chat, replacing the existing Adaptive Card.

return InvokeResponseFactory.adaptiveCard(cardJson);

Update the bot configuration

After implementing the action handler, the next step is to update the bot configuration to tell our bot about our new handler.

Open the bot\src\internal\initialize.ts file which contains our bot configuration and import the OrderActionHandler class at the top of the file.

import { OrderCommandHandler } from "../commands/orderCommandHandler";

Update the actions array, including a new instance of the OrderActionHandler class in the array.

cardAction: {
  enabled: true,
  actions: [new OrderActionHandler()]
},

🙋 Place your order

Now it's time to run our bot and test it out.

You can do this easily, either by opening the Debug panel and selecting the green play button or by pressing F5 on your keyboard.

Follow the steps to side load your application, when the bot chat is visible, submit order in the chat to start the workflow.

🎉 Congratulations! You've just created your first bot that implements a simple workflow to automate a repetitive task enabling an employee to place an order with the company restaurant.

⏭ What next?

Want to make more updates? Here are a few things you can try.

Edit order, implement the Edit Order button that is displayed when the order is confirmed.
Expand the menu, add more options to the order form.
Update the app icons, currently the app uses stock icons, update the icons in the templates/appPackage/resources directory with new, more relevant icons.
Restrict supported Teams scopes, by default the bot can be installed into a personal, chat or channel context, to restrict where the bot can be used, update the scopes array in the app manifest.

📚 Learn more

👋 Happy coding!

Banner image generated using DALL·E 2 text to image API, a robot placing an order at a restaurant

Build a stock update notification bot for Microsoft Teams using C# and Teams Toolkit for Visual Studio

Garry Trinder — Tue, 08 Nov 2022 13:31:00 +0000

Microsoft Teams Toolkit for Visual Studio enables you to create, debug and deploy Microsoft Teams apps to a Microsoft 365 tenant fast using a no configuration approach.

In this tutorial, I will guide you through the steps to create a Stock Update Notification bot for Teams Toolkit and C#.

If you want to see the finished version, checkout the sample code in the TeamsFX Samples GitHub repository.

Prerequisites
Install Teams Toolkit for Visual Studio
Scaffold the project
Update the adaptive card
Update the bot logic
Start ngrok
Prepare dependencies
Test your bot
What next?
Learn more!

🏁 Prerequisites

To follow this guide successfully you will need.

Microsoft 365 Tenant, which has been enabled for developing custom applications with. If you do not have a tenant, I highly recommend that you use a Microsoft 365 Developer Tenant, which you can obtain for free by joining the Microsoft 365 Developer Program. It is pre-configured for Microsoft Teams app development right out of the box.
Visual Studio 2022 17.3+, you can use either of the Community, Professional or Enterprise editions. If you do not have Visual Studio installed, try out the Community edition for free!
ngrok, is a globally distributed reverse proxy which you can use to promote web services running on your local machine to an internet available address, in short, it puts localhost on the internet. This is required for Microsoft Teams to talk to the code running locally on your machine. If you do not have ngrok you can download for free.

With the prerequisites done, let’s begin!

🛠 Install Teams Toolkit for Visual Studio

Our first step is to install Teams Toolkit into Visual Studio.

Open the Visual Studio Installer.
Click the Modify button to configure your installation.
On the Workloads tab, select the ASP.NET and web development workload.
In the Installation details pane on the right, scroll down the list and check the option called Microsoft Teams development tools.
Click the Modify button to install Teams Toolkit.

Once the installation is complete, you can close the Visual Studio installer.

👷 Scaffold the project

After installing Teams Toolkit into Visual Studio, it is now time to create our project.

Open Visual Studio 2022
From the start-up screen, select Create a new project.
On the Create a new project screen, expand the All platforms dropdown, and select Microsoft Teams, this will display a single template called Microsoft Teams App, click Next to confirm the template choice.
On the Configure your new project screen, enter StocksUpdateNotificationBot in the Project name field, then click Create to confirm.
In the Create a new Teams application dialog, expand the Trigger type dropdown, and select Timer Trigger (Azure Function), then click Create to confirm.

Teams Toolkit will now generate a new project for you and open it for you.

ℹ️ Update the adaptive card

We will use an Adaptive Card to represent our stock price update, so let’s update the default adaptive card design to fit our needs.

Open the NotificationDefault.json file in the Resources directory and replace the contents with the following JSON.

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.4",
  "body": [
    {
      "type": "Container",
      "items": [
        {
          "type": "TextBlock",
          "text": "${name}",
          "size": "Medium",
          "wrap": true
        },
        {
          "type": "TextBlock",
          "text": "${symbol}",
          "isSubtle": true,
          "spacing": "None",
          "wrap": true
        },
        {
          "type": "TextBlock",
          "text": "{{DATE(${timestamp},SHORT)}} {{TIME(${timestamp})}}",
          "wrap": true
        }
      ]
    },
    {
      "type": "Container",
      "spacing": "None",
      "items": [
        {
          "type": "ColumnSet",
          "columns": [
            {
              "type": "Column",
              "width": "stretch",
              "items": [
                {
                  "type": "TextBlock",
                  "text": "${formatNumber(price,2)}",
                  "size": "ExtraLarge",
                  "wrap": true
                },
                {
                  "type": "TextBlock",
                  "text": "${if(change >= 0, '▲', '▼')} ${formatNumber(change,2)} USD (${formatNumber(changePercent, 2)}%)",
                  "spacing": "None",
                  "wrap": true
                }
              ]
            },
            {
              "type": "Column",
              "width": "auto",
              "items": [
                {
                  "type": "FactSet",
                  "facts": [
                    {
                      "title": "Open",
                      "value": "${formatNumber(open,2)}"
                    },
                    {
                      "title": "High",
                      "value": "${formatNumber(high,2)}"
                    },
                    {
                      "title": "Low",
                      "value": "${formatNumber(low,2)}"
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

We are using Adaptive Cards Template Language here to provide separation between our data and layout. Using binding expressions i.e., ${name}, we can add placeholders to our layout in locations where we want our data to be rendered.

Let’s create a class to represent the data object to use with the template. Open the NotificationDefaultModel.ts file in the Models directory and replace the contents with the following.

namespace StocksUpdateNotificationBot.Models{
    public class GlobalQuote
    {
        public string Symbol { get; set; }
        public double Open { get; set; }
        public double High { get; set; }
        public double Low { get; set; }
        public double Price { get; set; }
        public double Volume { get; set; }
        public string LatestTradingDay { get; set; }
        public double PreviousClose { get; set; }
        public double Change { get; set; }
        public double ChangePercent { get; set; }
        public string Name { get; set; }
        public string Timestamp { get; set; }
    }
}

When we combine our template and data using the Adaptive Cards SDK, the notification will look something like this.

🤖 Update the bot logic

Open the NotifyTimerTrigger.cs file, this file contains the core logic of our bot that will be executed on a schedule.

For now, let’s remove the contents of Run method and remove unused using statements, you can remove the statements by using the keyboard shortcut, Ctrl + R followed by Ctrl + G.

As our bot will call out to an external API, we will need an HTTP client to execute the requests, so let’s also create a new read-only property in the NotifyTimerTrigger class and create a new HTTP client.

private readonly HttpClient _client = new();

Your file should look like the below block of code.

using Microsoft.Azure.WebJobs;
using Microsoft.Extensions.Logging;
using Microsoft.TeamsFx.Conversation;

using ExecutionContext = Microsoft.Azure.WebJobs.ExecutionContext;

namespace StocksUpdateNotificationBot
{
    public sealed class NotifyTimerTrigger
    {
        private readonly ConversationBot _conversation;
        private readonly ILogger<NotifyTimerTrigger> _log;
        private readonly HttpClient _client = new();

        public NotifyTimerTrigger(ConversationBot conversation, ILogger<NotifyTimerTrigger> log)
        {
            _conversation = conversation;
            _log = log;
        }

        [FunctionName("NotifyTimerTrigger")]
        public async Task Run([TimerTrigger("*/30 * * * * *")]TimerInfo myTimer, ExecutionContext context, CancellationToken cancellationToken)
        {

        }
    }
}

Let’s add in the logic for our bot.

First let’s add a try/catch block to the Run method.

try {
    // bot logic goes here
} catch (HttpRequestException e) {
    _log.LogError(e.Message);
}

When the bot is executed, our bot will need to obtain the latest stock price, to do this we will send a HTTP request to the Alpha Vantage API.

Replace the // bot logic goes here comment inside the try block, with the following code.

// Get quote data from Alpha Vantage API
var response = await _client.GetStringAsync($"https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=MSFT&apikey=demo", cancellationToken);

Next, we need to deserialize and transform the response into the correct shape to use with our Adaptive Card model.

Add the following using statements to the top of the file.

using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using StocksUpdateNotificationBot.Models;

Add the following code into the try block.

// Deserialize JSON response
JObject jObj = (JObject)JsonConvert.DeserializeObject(response);

// Transform Global Quote object
var globalQuote = new GlobalQuote
{
    Symbol = jObj["Global Quote"]["01. symbol"].ToString(),
    Open = double.Parse(jObj["Global Quote"]["02. open"].ToString()),
    High = double.Parse(jObj["Global Quote"]["03. high"].ToString()),
    Low = double.Parse(jObj["Global Quote"]["04. low"].ToString()),
    Price = double.Parse(jObj["Global Quote"]["05. price"].ToString()),
    Volume = double.Parse(jObj["Global Quote"]["06. volume"].ToString()),
    LatestTradingDay = jObj["Global Quote"]["07. latest trading day"].ToString(),
    PreviousClose = double.Parse(jObj["Global Quote"]["08. previous close"].ToString()),
    Change = double.Parse(jObj["Global Quote"]["09. change"].ToString()),
    ChangePercent = double.Parse(jObj["Global Quote"]["10. change percent"].ToString().Replace("%", string.Empty)),
    Name = "Microsoft Corporation",
    Timestamp = $"{DateTime.Now.ToUniversalTime().ToString("o").Split(".")[0]}Z"
};

Now that we have all the data and it has been transformed into the correct shape, we need to obtain our Adaptive Card template.

Add the following code into the try block.

// Read adaptive card template
var adaptiveCardFilePath = Path.Combine(context.FunctionAppDirectory, "Resources", "NotificationDefault.json");
var cardTemplate = await File.ReadAllTextAsync(adaptiveCardFilePath, cancellationToken);

Finally, we want to iterate over all the locations where the bot has been installed in Microsoft Teams, render our Adaptive Card by combining the data and template, and send the card output into those locations.

Add the following code into the try block.

// Get bot installation
var installations = await _conversation.Notification.GetInstallationsAsync(cancellationToken);

foreach (var installation in installations)
{
    // Build and send adaptive card
    var cardContent = new AdaptiveCardTemplate(cardTemplate).Expand(globalQuote);
    await installation.SendAdaptiveCard(JsonConvert.DeserializeObject(cardContent), cancellationToken);
}

That’s the code complete, so let’s move onto getting our project ready to run our bot locally.

📡 Start ngrok

We need to ensure that ngrok is running so that Microsoft Teams can communicate with the code running on our local machines.

Open a terminal prompt at the location where you installed the ngrok executable and start the ngrok service forwarding port 5130 using the following command.

.\ngrok http 5130

When ngrok is running, a dashboard will be displayed in your terminal prompt with the internet accessible ngrok address that is forwarding network traffic to your localhost hostname, which will be in the format of ..ngrok.io.

🧑‍🍳 Prepare dependencies

In Visual Studio, right click the StocksUpdateNotificationBot project in the Solution Explorer pane, expand the Teams Toolkit menu and select the first option in the menu, Prepare Teams Apps Dependencies.

A Visual Studio account dialog box will be shown, add your Microsoft 365 Tenant account and follow the authentication steps. Once your account has been authenticated, click Continue to start the process.

The Prepare Teams Apps Dependencies process ensures that the required resources have been provisioned in your target Microsoft 365 Tenant, that services that are needed are running on your machine, such as ngrok, and updating the app manifest file.

🧪 Test your bot

Now it is time to see our bot in action!

To do this, simply press F5 on your keyboard.

The first time you run your bot, you will need to allow the Azure Functions executable to send network requests through the Windows Defender firewall, to enable this, click Allow access in the prompt.

Teams Toolkit will open a browser window for you and start to open Microsoft Teams, you may be asked to sign into you Microsoft 365 Tenant at this point, if you are, complete the process. When you are authenticated, you will be presented with Microsoft Teams dialog which enables you to side load our app into your Microsoft 365 tenant.

Click the Add button to install the bot as a personal app and you will be taken to the chat tab of your personal app.

Wait a few seconds for your bot to be executed, and you will see a message arrive from our bot with the latest stock price rendered as an Adaptive Card.

Congratulations, you have just created your first notification bot using Teams Toolkit for Visual Studio! 🎉

⏭ What next?

Want to make some updates? Here are a few things you can try.

Use a different symbol, currently the stock price for MSFT is returned, pass a different symbol into the API call, and update the company name in the GlobalQuote object.
Change the timer frequency, currently the timer trigger is executed every 30 seconds, change this by updating the CRON expression passed into the Run method in NotificationTimerTrigger.cs file.
Update the app manifest, currently the app manifest contains mostly default values, use the Open Manifest File menu item in the Teams Toolkit menu to open the app manifest template and makes changes to it.
Update the app icons, currently the app uses stock icons, update the icons in the Templates/appPackage/resources directory with new more relevant icons.
Disable the bot chat compose box and @ mentions, by default the bot chat compose box and the ability to @ mention the bot is enabled. To disable this, edit the app manifest and update the isNotificationOnly property to true.
Restrict supported Teams scopes, by default the bot can be installed into a personal, chat or channel context, to restrict where the bot can be used, update the scopes array in the app manifest.

📚 Learn more!

👋 Happy coding!

Banner image generated using DALL·E 2 text to image API, A friendly robot stood on the wall street trading floor

Beginners’ crash course to build apps for Teams

Rabia Williams — Thu, 13 Oct 2022 00:51:25 +0000

Teams Toolkit is an extension for Visual Studio Code and Visual Studio 2022, that you can use to build and deliver apps faster for Microsoft Teams. Developers can focus on building amazing applications instead of solving problems like tunnelling, identity, deployment, distribution of app and more.

How does Teams Toolkit help a new developer?

⚒️The toolkit comes with the Get Started page that has a checklist of everything you, as a developer, need to build an application.

Get your development environment ready
Create the base project
Create a sandbox development environment for you (If you don’t already have one) to test your application
Preview your application locally
Provision Azure resource instances your app needs and deploy your application logic to host them.

📽️Watch how we build a bot for Microsoft Teams using the VS Code extension.

📖Read step by step tutorial here

Stream IoT data into Excel

Jim Bennett — Wed, 10 Nov 2021 17:44:46 +0000

There is a whole world of IoT services out there that allow you to connect your device and upload data to the cloud. From there you can make decisions on your data, run it through AI models, or visualize it with powerful dashboards.

But what if that's just too much? What if you just want to see the data in Excel?

This is a common case - especially in schools that are introducing physical computing to CS students. They often don't have the money, expertise, or firewall access to spin up cloud services to ingest data, and visualization services to show it. What they do often have is Excel - either running on PCs, Macs, Chromebooks or iPads, and usually want to connect a simple device to something, and plot data from it so students can work on projects.

One example is digital agriculture, which in schools is often a temperature sensor used to calculate growing degree days, or a soil moisture sensor, maybe combined with a relay and pump, to track if a plant needs water and if so automatically water it.

There are many devices and kits that can provide the physical computing side – such as Raspberry Pis, Arduinos, and sensor kits, but how can data be sent from these devices to Excel?

This post shows you how to stream data from an IoT device to Excel running on the web!

This post contains links to sample code that you can use with the FarmBeats for students kit, available from Seeed Studios.

Architecture

The architecture you can use for this is not that complex. As long as your IoT device has WiFi, you can expose a REST API over HTTPS that can be called by an Excel add-in. This API can then be used to read sensor data, or control actuators.

Let’s dive in a bit deeper. You can also find all the sample code for this in my GitHub repo.

IoT device with a REST API

The Excel add-in JavaScript API can make calls to REST endpoints, including those running on your local network. On your IoT device you can expose a REST API, and from this API return sensor data, or control actuators.

For example, if you are using a Raspberry Pi with a soil moisture sensor and a relay, you can create a Python/Flask app, and expose a REST API with 2 endpoints:

temperature/ - make a GET request to this endpoint to get the current reading for the temperature sensor

relay/ - make a POST request to this endpoint to turn the relay on or off, passing the desired state as a boolean in a JSON request body.

As a tip – reading from sensors can take time, and you probably want to avoid multiple concurrent reads to a sensor. A good way to do this is to have a thread that reads and caches sensor values every second or so. When a REST request comes in, read from the cache. This would also allow you to cache historic data, should you want to add an endpoint to get historic data captured when Excel isn’t connected.

The Excel add-in architecture also supports web sockets, so you can even expose streaming data over a web socket if you wish.

One thing you MUST do though, is use HTTPS. Excel add-ins will not work with HTTP, they require a secure endpoint using HTTPS. You can use ad-hoc self-signed certificates, such as by setting the SSL context in a Flask app to adhoc as described in this blog post. You also need to run using sudo to use SSL with a flask app on a Raspberry Pi.

You can find example code for a RaspberryPi that hosts a Flask app with REST endpoints, using the sensors from the FarmBeats for students kit in the farmbeats-server folder in my GitHub repo.

Excel add-ins

Excel has an add-in model that allows you to build add-ins using JavaScript or TypeScript. This allows you to write code that not only uses the Excel JavaScript API to interact with worksheets, but you can also use standard JavaScript code to do other things - such as interact with the REST endpoint on your IoT device.

The first step is to create an add-in. There is a handy generator tool to help with this, available on the Office Developer GitHub.

This tool is installed using NPM, then can be used to create add-ins for any Office app. For Excel, you can create 2 types of add-ins – Task Panes and Excel Functions.

Task Panes are panels that pop out when you select a button on the ribbon. These show HTML pages, with JavaScript or TypeScript code behind the scenes to respond to buttons being selected or other input.

Excel Functions are functions in Excel, as the name suggests. You can call these in your spreadsheet the same way that you would call the built-in functions such as SUM and VLOOKUP. Under the hood, it calls functions in your add-in, and these functions can either return a single value, or start a background timer that returns values that update on a regular basis, updating the value in the cell.

Whichever one you use, your JavaScript or TypeScript code runs inside Excel, so if you are running Excel on the Web via Microsoft 365 for example, this code runs inside your browser locally, not on a server somewhere. This means it can access resources on your local network, such as your IoT device. Inside your button or function code you can then use the JavaScript fetch API to get or set values on your IoT device.

You can find example code in the excel-addin folder in my GitHub repo.

Wiring it all up

Once you have your add-in written, you need to test it all out. Instructions for running and testing your add-in are in the generator documentation.

One thing to be aware of is you need to be using Excel on the web, not the local app. This is due to the fun of HTTPS certificates. Unfortunately, there is no way for your IoT device to have a fully valid certificate – certificates are based on the URL of your REST API, and your device is running locally, so won’t have a proper public URL.

Excel running locally will refuse to access your REST API without a valid certificate, but on the web, you can get your browser to allow the ad-hoc certificate running on your IoT device. What you need to do is to first load one of the REST endpoints in your browser, then when you get a certificate warning, select the option to allow access. You only need to do this once per certificate and after this Excel in the browser will be able to access your IoT device. If you are using Flask for example, every time your Flask app restarts it generates a new certificate, so you will need to re-approve it after every restart.

Start by loading the REST API in a browser and approving the certificate.

Once done, open an Excel workbook in your browser, then load the manifest.xml file for your add-in. You will then be able to access any Task Panes or Excel Functions from your add-in.

You can access from any browser - running on a PC, Mac, Chromebook or iPad!

If you want to then publish your add-in rather than have it running locally, you will need to host the content somewhere, such as Azure storage. You can find the instructions in the Excel add-in documentation.

Where next?

You can check out sample code to do this in my GitHub repo. Also check out the Office add-ins documentation.

Fun Q&A bot for Microsoft Teams Node.js

Rabia Williams — Sat, 31 Jul 2021 08:53:57 +0000

Are you looking for a fun project for your next assignment 🗒?
Did you want to develop a chat bot 💻?

Then you'll like this little project I am sharing here with you, whether you want to deep dive into the details or not 😉.

Use case

I can use a BOT to put a question or a thought in the Microsoft Teams channel/group chat conversation.
My team mates can respond to the question with a form to put free text in.
I can check how many team mates responded in the same card with their responses, real time.

🚀🚀🚀 End result?

💻💻💻 Source
Check out the full source code here https://github.com/rabwill/cardBot-TS

📙📙📙 Read the article
If you wanna deep dive into how it is developed checkout my original blog post here 👉🏽https://rabiawilliams.com/teams/uam-bot/

Create Azure AD apps from the manifest

Waldek Mastykarz — Thu, 22 Apr 2021 11:59:19 +0000

Did you ever want to create Azure AD applications from their manifest? Now you can with CLI for Microsoft 365.

The easiest way to create Azure AD apps

Recently, I wrote about how CLI for Microsoft 365 simplifies creating Azure AD apps. With just one command, you can create a new Azure AD app registration configured with the necessary authentication settings, API permissions and more.

When you build apps on Microsoft 365, you need an Azure AD app registration for your app. The app registration represents your app on the Microsoft cloud and defines the authentication capabilities and API permissions of your app.

Because Azure AD apps play such an important role, we thought that we should simplify creating them, so that you can focus on building your app. If you script deploying your app between the different environments but also in your team, including CLI for Microsoft 365 will help you include the creation of the Azure AD app registration while keeping your script simple.

With CLI for Microsoft 365, we brought down creating Azure AD apps to just one command. But we didn't stop there.

Create Azure AD app registrations from manifest

When building apps for Microsoft 365, you typically start by creating an Azure AD app registration. Without it, your app won't be able to connect to Microsoft 365. While developing your app, the easiest way to create and configure your Azure AD app is through the Azure Portal.

The Azure Portal lets you easily create the app registration and configure it to match your needs. But then what, how do you share this configuration with your fellow developers or customers?

In CLI for Microsoft 365 v3.9 (available as preview when writing this article), we introduced support for creating Azure AD app registrations from their manifest. After you created and configured Azure AD app registration in the Azure Portal, go to the Manifest tab, copy the manifest's contents and save them to a file in your project.

Next, after signing in to the tenant where you want to create your app, execute:

m365 aad app add --manifest @manifest.json

That's it. CLI for Microsoft 365 will take the manifest you specified and create a new Azure AD app registration with the specified configuration. If you prefer to separate configuration from code, you'll love this approach!

Considerations

There are some limitations related to creating Azure AD apps from the manifest that you should take into account.

First, if you granted your Azure AD app permissions to custom APIs that are registered in one directory, their IDs will by likely different when you create the app registration in another directory. You can work around it, by removing the tenant-specific API permissions from the manifest, and grant them using the apisDelegated option, like:

m365 aad app add --manifest @manifest.json --apisDelegated 'https://contoso.microsoft.com/App.Read'

Another thing you should consider is, that when you look at the manifest that you copy from the Azure Portal, there are some properties that are not supported by Microsoft Graph which we use to create the app. The command automatically removes them from the manifest so that it can create the app registration but some settings will be missing in the created app.

Since we've just introduced this functionality in the v3.9 beta version of CLI for Microsoft 365, we'd love for you to give it a try and tell us what you think. Does it work? Do we miss something important? Is there anything that we should reconsider?

To see what's possible, see the command's docs. Looking forward to hearing from you.

Develop intuitive apps with Microsoft 365 data

Rabia Williams — Sun, 28 Feb 2021 23:41:51 +0000

If you have been using any Microsoft 365 products in your day-to-day life, then you are already using Microsoft Graph.
Microsoft Graph is the data and insights that describe the patterns of productivity in an organization, accessed through a
unified API endpoint.

Microsoft Graph powers Microsoft products

There are thousands of datasets that power first party Microsoft products, available to you to extend your applications to:

Query the structure
Get information about the user
Access files, calendars, Planner plans, etc. within the Team
Act on behalf of a user
Access content
Add relevance and intelligence ..and many more

So did you just want to build an application in the Microsoft365 platform or did you want to leverage all the data that is available to you, so you can build smarter applications that is well informed with what the user does, needs and proactively make decisions to make user's day to day life more productive.
Find out more here on Microsoft Graph Mailbag series.

DEV Community: Microsoft 365

Join us for HackTogether: The Microsoft Teams Global Hack

Join live events 📺

Connect with Microsoft experts 💬

Win awesome prizes! 🏆

How do I get started? 🚀

Learn how to develop apps for Microsoft Teams using Teams Toolkit for Visual Studio Code video series

Teams Toolkit Cloud Skills Challenge - build apps for Microsoft Teams!

Join us!

Contributing

How to get started

Registration house-keeping

Learn more

How to create apps for Microsoft Teams

Control Microsoft Teams with a Stream Deck

Set up your Stream Deck for Teams

Get an API key

Set up the Stream Deck

Jim BennettFollow

🙋🤖 Place your order! - Build bots for Microsoft Teams to automate repetitive workflows using Teams Toolkit for VS Code

Table of Contents

🛠 Teams Toolkit for Visual Studio Code

🏁 Prerequisites

🛠 Install Teams Toolkit for Visual Studio Code

👷 Scaffold and run the project

👷 Clean the project

🧑‍💻 Create the Adaptive Card templates

📝 Create the order command

Create the command handler

Update the bot configuration

Update the app manifest

⚡️ Create the order card action

Create the action handler

Update the bot configuration

🙋 Place your order

⏭ What next?

📚 Learn more

Build a stock update notification bot for Microsoft Teams using C# and Teams Toolkit for Visual Studio

Table of Contents

🏁 Prerequisites

🛠 Install Teams Toolkit for Visual Studio

👷 Scaffold the project

ℹ️ Update the adaptive card

🤖 Update the bot logic

📡 Start ngrok

🧑‍🍳 Prepare dependencies

🧪 Test your bot

⏭ What next?

📚 Learn more!

Beginners’ crash course to build apps for Teams

How does Teams Toolkit help a new developer?

Stream IoT data into Excel

Architecture

IoT device with a REST API

Excel add-ins

Wiring it all up

Where next?

Fun Q&A bot for Microsoft Teams Node.js

Create Azure AD apps from the manifest

The easiest way to create Azure AD apps

Create Azure AD app registrations from manifest

Considerations

Develop intuitive apps with Microsoft 365 data