Microsoft 365 Community Microsoft Teams App Camp, 2 Mar 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft Teams App Camp - Add a Dialog - Lab

Description

This module introduces you to how add a dialog

📖Full lab can be found here https://microsoft.github.io/app-camp/aad/Dialog/
👩🏾‍💻Completed lab source code is here https://github.com/microsoft/app-camp/tree/main/src/extend-with-capabilities/Dialog
🛠️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=foPEXYocOmU&list=PLR9nK3mnD-OW5yCjKO0K8b-Xi4Ci1iBlU&index=14
⬅️ Previous video on this series - https://www.youtube.com/watch?v=HzK_YHAz05w&list=PLR9nK3mnD-OW5yCjKO0K8b-Xi4Ci1iBlU&index=12

Dialogs as they are call it in version 2 of the SDK are modal pop-up experiences in Teams application that can display web pages as IFrames or as Adaptive Cards. This can greatly simplify the user experience when a data input is required, and gives your application an opportunity to interact one-on-one with a user even in a group environment.

There are many ways you can incorporate a dialog. In this lab we focus on using the app's own HTML form.

In this lab you will learn to:
• How to build a Dialog using a web page
• How to launch a dialog from a tab using the Teams JavaScript SDK
• How to submit data from the dialog back to the tab that launched it

🧾Read more about Dialog in Microsoft Teams app here https://docs.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/what-are-task-modules?WT.mc_id=m365-58890-cxa

✨ 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/community

Sharing is caring! You are awesome! 🧡

A

Hello and welcome to teams app camp in this video, let's walk through the lab to add a dialogue in the app to capture input from user without navigating away from the tab, app I'm, Rabbi, Williams Cloud Advocate at Microsoft.

A

This video is to accompany the dialogue lab in app Camp 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 now, let's extend the application by adding additional capability in this lab. We will add a dialog to our existing teams, app dialogues, as they are called in version 2 of the team's jssdk, our model pop-up experiences in teams, application that can display web pages as iframes or adaptive cards.

A

This can greatly simplify the user experience when a data input is required and gives your application an opportunity to interact one-on-one with a user even in a group environment. Today, you'll learn how to build a dialogue using a web page how to launch a dialog from a tab using the team's JavaScript SDK how to submit data from the dialog back to the tab that launched it in the order. Details page, you will have a new button added, which will add notes which is saved back into order information, and this is done through a dialog.

A

So now, let's get started by visiting the lab site: go to microsoft.github.io, slash, app hyphen Camp to visit the site once you're on the home page using the top navigation select extended labs. These are the labs that you will use to extend the existing code application you have built using labs in path, a or path B, and these are your adventures, so make sure you have fun doing them, select, add a dialog and let's go through the instruction.

A

You can see the concepts which will link to the documentation on dialogue and features we're building in this lab for Northwind orders app now time for code change.

A

Next, we'll see the code changes, we're going to add two files into existing core application, so open your application in an editor of your choice, preferably Visual Studio code, which I'm using here today under the folder Pages, which is inside client folder, add the new HTML form, which is the order, notes, form.html and copy the HTML code that is given in the lab. This is your form that will open up as a dialog and to um accompany with it. We have the order, notes, form.js file, that we will create and copy code into it.

A

Now we're using Microsoft teams, sdks Microsoft teams.dialog.submit, as you can see here, to pass the form values back into a callback function. These are the two new files you'll be adding. Next, we will see what are the other code changes. You need next go to order details, dot, HTML file, which is in the same folder and add a button which will open up our dialog now go to the JavaScript module of the same file, which is all the details.js and add the following code. Snippets. First, we will import the teams SDK and teams helper module.

A

Now, in the display UI function, we Define a constant to get the button element for the button that we just added.

A

Next, we will add an event listener for the button that we added, which will then open up the dialog you can see here. We use the SDK to call this Microsoft teams.dialog.open to open the dialog, and this is the Callback function which will take the values from the dialog back into it and then process it. Finally, we will make some changes in the server.js file. This is to expose the team's app ID as an environmental variable to be used in the client-side page.

A

This trick must be familiar to you already go to the requests, app.getmodules env.js and add teams app ID into it. Now all code changes are done. You should be able to test this feature in your app to test your application. Run npm start from the working folder once the server is running, make sure you also have your ngrok running, go to teams and open your Northwind orders app. You should be in your my orders, app and click on any of the order which will take you to the order.

A

Details page- and you can see the new button here add notes, select the button it opens up. The dialog form you can add details and select. Save this data will go back into your order details. You can add as many notes as you want. Thanks for watching this appcam 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.