Microsoft 365 Community Microsoft Teams App Camp, 2 Mar 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft Teams App Camp - Add a Deep link to a personal Tab - Lab

Description

This module introduces you to how add a deep link to a personal Tab

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

Deep links help the user to directly navigate to the content. In this lab we will create deep link to entities in Teams so the user can navigate to contents within the app's tab.

In this lab you will learn new concepts as below:
• Generating deep links that open your application in Teams
• Pass business context in deep links to your application using a the Teams SDK context object.

🧾Full details on Deeplinking in Microsoft Teams , can be found here https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/deep-links?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 deep Link in the app for AC navigation, I'm, Rabbi, Williams, Cloud Advocate at Microsoft.

A

This video is to accompany the Deep links 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 deep link to our existing teams, app. What are deep links in teams. Any link that sends users to specific content within your app in teams is a deep link.

A

It's a single link that leads from anywhere into teams and into a specific Channel or chat or into a specific Tab, and then show information within your app all with one click. This saves users having to search or navigate for information every time they enter into your application, making it easy and will drive application usage things you can do, create deep link to a tab, a channel conversation or file in Channel, open a meeting, scheduling, dialog open, an app, install, dialog, open a chat invoke an audio or video call.

A

In this lab we're going to add a new button in the order, Details page, which copies the link to the specific order to clipboard. This helps users share this copied link via chat or Outlook to colleagues for them to navigate easily. To that specific order.

A

Foreign, so now, let's get started by visiting the lab site, go to microsoft.github.io, slash, app hyphen camp and once you're in the home page use the top navigation select extended labs, and these are the labs you will use to extend your existing core application. You probably have built using path, a there's, also a path B available.

A

Now these are your adventures, so make sure you have fun doing them now select, add a deep link to a personal Tab and let's go through the instructions.

A

Here are the concepts you're going to learn in this particular lab, and this is the feature you're going to add into your application. Now. How did we build this deep link? This is the syntax we have used.

A

Let's take a look at how we generated this link. We have app ID. This is the teams app ID from the Manifest file. We have entity ID. This is defined in your manifest file in the static tabs object for the particular entity or the tab. In our case, this is orders of my orders tab entity ID. This is the ID for the item. You're displaying information for this is similar to query parameters. In our case in this lab, it will be the order ID and combine these three to form the Deep links.

A

Alright, so I'm in the client, Pages folder go to order. Details.Html and I can see that this is a button that we will use to select to get the link copied into the clipboard go to order details.js in the same folder, and you can see here. This is all the fun stuff happening. We've got the event listener. Added to this button.

A

You have sub entity ID, which is the order ID. This is like the query parameter that we pass as context, and you can see that this is the link that we generated with the app ID, the teams app ID. You can see here, which is from the Manifest file, but exposed in the environment variable and orders, which will be the ID of that tab, which is again in the Manifest as entity ID.

A

Now, let's go ahead and look into the Manifest file, so go to manifest folder and manifest.json file, and you can see in the static tab section entity. Id is orders for my orders tab now. The ID is the team sap ID, which is here, which is also exposed as environmental variable. Now how we have exposed it to the client Pages, there's a little trick here inside the server folder go to server.js file. You can see in this function we're exposing team sap ID as well.

A

So this is also added into the code now going back to my orders.js file, because that's where you land there is a checking happening after initializing SDK, whether the context has sub page ID, which is the sub entity, ID information that we passed earlier. If that's available, then you will be redirected to the order. Details.Html page and I will show you that in the order details code, so let's go to order details.js, you can see. I have passed this information as sub entity.

A

Id now start the server and the app is already installed so I'm going to go ahead and click on one of the orders and select to the copy order. Url then the link is already copied now. I can go ahead and share this with another user. A colleague and I will post that in the chat and then I will switch to the other user to show you how that works.

A

So I already have the message from Anne, and this is the chat that I will click on this link, and it will take me directly to that particular order so saving time for me to go ahead into the application search and navigate to this particular order.

B

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