Microsoft 365 Community Community Demos, 2 May 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Build Outlook Add-ins using Teams Toolkit for Visual Studio Code

Description

Add-ins are a new feature in Toolkit v5. In this 13-minute developer focused demo delivered by Ayça Baş, install Toolkit preview, create a new Outlook task pane add-in (Preview on Windows). Initiate debugging, install prerequisites, walk through selected scaffolded folders and files. Observe manifest updates to support add-ins, env-dev folder, teamsapp.yaml files, and src files. Webpack runs project in background. Finally, run project locally in Outlook. Click buttons (actions) in e-mail to test. Option to import an existing Outlook Add-in into Teams Toolkit, as well.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on May 2, 2023.

Demo Presenter
• Ayça Baş (Microsoft) | @aycabs

Supporting materials
• Documentation – Create Office Add-in projects with Teams Toolkit (preview) | aka.ms/outlook-addin-ttk-docs
• Article - Create a Teams tab and Outlook Add-in with a Hello World project | aka.ms/outlook-addin-ttk-blog

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

A

A

Welcome to this session, my name is Aisha bash I'm A Cloud, developer Advocate at Microsoft, and today we will show you how you can build Outlook add-ins using team socket for visual studio code. This is a new feature and within the visual studio code, V5 version 5. it's in the preview at the moment, and you can test it out. It's available publicly and I will jump right in the demo Okay, so I think today we're gonna learn everything on the way.

A

uh If you haven't heard of alpha guidance before I actually have a great documentation for you to go through at the end of the session. So you can discover more what you can build in as add-in, but we will use teams toolkit today to build an add-on for outlook before I jump into teams toolkit actually on Visual Studio code. You should make sure that you install the preview version of teams toolkit. You can easily do that by just going to teams toolkit extension, and here you will actually have installed pre-release version now.

A

I already have pre-release version. It's asking me to switch back to the release. Once you install the pre-release version, then you will have a chance to test out what is coming new into the version 5 and today we will discover more what we can do with V5. So let's create a new app and see what is different. So first off we have teams capability port and we also have application part and meaning that we can either create a team's capability like a bold tab, message extension or we can create an Outlook edit.

A

Today we will create an out to get in now. We have two different options: the first one is Outlook task, pin add-in and it's preview on Windows. You have to run this on your Windows machine I'll go through the prerequisites with you in a minute, and if you already have an existing application, you can bring your add-in and run uh on the visual studio code and debug it through teams toolkit today we will create something brand new.

A

So let me choose this folder and I will give it a name as Outlook and then demo I, hope, I didn't use that name before, but once I hit enter. Then team socket will be scaffolding, my project right away, okay, so there we go. We already created Outlook Eden and it has pretty straightforward when you created something with teams toolkit, it will give you the zero configuration experience.

A

um I know my colleague, Gary was talking about it for a long time in the community call. So if you're interested in learning more about teams toolkit, you can go to the YouTube channel of community and check out the previous uh sessions and before I, go through the project route and also readme file. I want to initiate the debugging so that we will have the demo right at the time when we finish the readme file, as well as the project root. Okay, restart installing npm. Let's go okay in the readme file.

A

We have some prerequisites, and these are the important ones, uh because this feature is super new to test this out. You need certain prerequisites to be in place in your machine. First of all, you need node.js version 16 or higher, and uh it teams toolkit support, 16 or 18 at the moment. If you want to test this out on your desktop, then you need to have Outlook for Windows on your Windows machine and you need to use your better Channel.

A

If you know, if you don't know how to get the better Channel I think the best way is to join the Microsoft 365 Insider program, where you will get access to different channels, and you can test out different versions of Outlook by switching between the channels and you'll need a edge installed for the debugging purposes. You will need Microsoft 365 account again for the testing purposes and, finally, you will need team socket for visual studio code.

A

Pre-Release version make sure that you switch to pre-release so that you can build new outlook, editing app and the experience is pretty straightforward. Now what we're gonna do is just F5 and that's what we did. Let's, let me walk you through the project folder as well, so in Outlook add-in, since this is running in teams took since we built this project using teams toolkit.

A

We have some familiar folders coming with teams toolkit such as app package and if you are new to version 5, a package is the package where we keep all of the assets and manifest folder, and this is our manifest for our Outlook edit.

A

um It looks pretty similar to teams manifest teams app manifest, but there are some uh different areas, such as um I. Think. The most interesting part for me was ribbons where we Define what kind of uh applications we will build. This is a contoso add-in, it's the label of the group and under the group we have a button for show pen that show text test pen which will open up a task pen, and we also have action button to perform an action. That means that this add-in covers two buttons with two different actions.

A

First, one is the task Pan and the second one is the Performing action as a task for the male. um Let me continue everything about your project. Any project you build with a team's toolkit version. Five, um any setup environment setup will go under dot, env.dev folder. Here you will have all of the setup items and some of these, um as you may know, some of these are already coming dynamically, because we're using teams app tml file to generate all the Azure subscriptions.

A

um Basically, teams toolkit is creating all the ad IDs for us. If you're building both, then it is registering your Bot to Azure as well. So most of the steps are automated with Azure bicep. Let me close the environment and infra files. Finally, if you were looking for, where are my project folders, it's under the source? Folder, as I mentioned, we have two actions in this Outlook head and the first one is comments and second one is Task.

A

Pin, let's start with comments, comments actually run simple actions with your email and if I go to comments.txt, you will realize that we are performing in an action here on the office when I click. Basically, the button for performing action I will come back to webpack in a second and it shows the message perform action and we are showing a notification at the moment. But if you want to create any additional event, you can do that in this action function, and this is the HTML.

A

We are pretty much running the office JavaScript API here to show our notification in the task pan. uh We are mainly when I click the button run button. We are showing the subject of the email and you can change all of the actions here. If you want to do something else with the Outlook, you can basically add in this uh run inside the Run function, and this is the HTML of the Run function.

A

It comes as a pretty great UI, because it's using fluent UI- and here we have a simple run button and you're running the. uh We are calling the function to get the subject of the email. That's pretty much the experience uh when you build an Outlook add-in using teams. Toolkit I want to show you. The webpack webpack needs to be running in the background, and this is actually running the project and then once the pack is ready, then your project will be ready to test out and seems like it has successfully run.

A

Let me go to my Outlook okay, so I have a demo folder for you and I put this uh sample email here just for you to take a look. So this is my email, and these are the um personally I tested this before so you're. Seeing duplicates here, I'm sorry for that. But these are our actions in the Outlook add-in and we can perform some actions for this email by just clicking these two buttons. First of all, contoso add-in is the add-in we created and, as I mentioned, we have two different actions.

A

We can take with these two different buttons. The first one is show pen test pen and the second one is perform in action. Let's try the first one.

A

So when I click the first one, it opens up the task pan on the right and when I click on run, it is supposed to bring me the subject, which is exactly the same. With the subject of this email, obviously, if you select any other email, this the subject is supposed to change automatically, because um we are running this for an another email. Okay. So if you want to perform any action, uh then this perform action. Button is basically doing that and at this point we didn't edit anything in the Outlook project.

A

So this will be bringing us a notification. Let me click on here and that's maybe try it like this.

A

Okay, so maybe I perform too much okay, yeah, that's why so when I click perform action right now, it is shelving me performed action if you want to take any other actions, just not only shoving the notification but taking some other actions and informing the user. Then this uh action uh item in the add-in would be the best place for you.

A

Otherwise, task pen is the other option and that's pretty much what you can do do with uh Outlook add-in and if you want to add more actions for your outlook edit, you can basically come to the source, folder and add more here um and uh view it it's using pretty straightforward typescript file and HTML for comments, as well as for a task pens, so you can customize.

A

However, you like so let me close this out and go back to my slides last but not least, I want to highlight, if you're new, to this Outlook, adding concept or if you're new to teams toolkit, we have a great documentation for you. You can visit Academy, slash, Outlook, adding ttk docs, and this will help you get started building your first project. You also have a blog post.

A

My colleague Rabia is she is the original owner of this demo actually and she authored the blog post for you to create Hello, World, Outlook add-in, and so you can get started. Creating a new project. I also have the tab open for you, because I want to walk you through.

A

So this is the official place to get started in our documentation, create office, add-in projects with teams toolkit- and this is where you can learn more- how you can get started doing that and if you're interested in uh doing something more, you can discover what is available here, and this is the blog post, my colleague, Robbie authored, and it is showing all the details step by step just like how I did in this demo to run the app and, what's going to be the output of the debug and uh the explanation of the source code and some resources.

A

So this is what I wanted to cover today and if you have any questions, I don't know if I have any time to answer, but I can also stay here and answer in the chat.

B

Such a fantastic demo, this actually goes to the point we're talking about before, where resources from you know the the cloud Advocates, the dev Advocates, they put a ton of content together to make it really super easy for people to follow along. So thank you for running through it um and also to show where the resources are.

A