Recently I worked with a customer on building a canvas Power App embedded in Microsoft Teams. The application acts as a catalogue and one of the requested features was enabling users to share an item from the catalogue to another user in Teams, with a deep link to open the application directly on the selected item. The scenario seemed quite straight forward at first, but I had to do a few research to implement it, especially for the first task, which is sharing the link over Teams. As such, I've decided to document my findings in this blog post.
Let's start!
Sharing a link to Teams from a Power App
Out of the box, searching on the Internet I couldn't find an easy way to perform sharing to Teams directly from an app. The two options I've explored weren't suitable:
- When the application runs inside Teams, you can leverage the Teams connector to interact with the platform and perform tasks like detecting the theme, getting the name of the channel in which the app has been added, etc. Unfortunately, there isn't any available action to start sharing. You can post a message to a chat or a channel, but you must know upfront who the receiver will be. The sharing experience, instead, should allow the user to pick up the target as part of the process.
- The official documentation offers a section that explains how to share to Teams. However, both approaches (integration into a personal or tab app or in a website), are focused on a pro-developer implementation, which requires to leverage the Microsoft Teams SDK or to include a JavaScript script.
So I started to play a bit with the second implementation, and I've discovered that the sharing experience is based on the https://teams.microsoft.com/share website. When you open this website in a browser, you will be authenticated with your Microsoft 365 account, which enables an auto-complete experience. As you can see from the image below, the Share To field gets automatically populated with people, chats, and channels from your tenant:
This is a good starting point! However, to support the scenario requested by the customer, I need to automatically include the link of the item to share from the catalogue in the body of the message. To better understand how the sharing website works, I created a quite simple HTML page and I followed the official documentation to include a basic sharing experience. With this approach, in fact, you can pass to the script two parameters to define the URL and the message, which is the same goal I was trying to achieve. This simple experiment helped me to discover the parameters that are passed to the URL to pre-populate the content of the message. Clicking on the sharing button, in fact, led the browser to open a new tab with the following URL:
https://teams.microsoft.com/share?href=https%3A%2F%2Fwww.mywebsite.com&msgText=This%20is%20a%20message&preview=false&s=1675706704556
As you can see from the URL, the sharing page accepts the two key parameters I was looking for:
href, which contains the URL to share.msgText, which contains the text of the message.
Now that I have this information, it's very easy to integrate a sharing feature using the Launch() function in Power Apps, which you can use to open an external URL. You just need to pass:
-
As
href, the Web URL of the Power App, which you can get by clicking on the three dots near your app in the Power Apps portal and choosing Details.
-
As
msgText, a message that you want to include in the link.
This is an example of the function I've linked to the OnSelect() event of a Button control in my application:
Launch("https://teams.microsoft.com/share", { href: "https://apps.powerapps.com/play/e/default-7454e082-9a4c-4adf-a685-a5f2a4cb711a/a/3bb8fb0e-5d81-4855-a950-d9415c3ad896?tenantId=7454e082-9a4c-4adf-a685-a5f2a4cb711a", msgText: "Check this application" });
The first parameter passed to the function is the generic Teams share URL. Then, we pass a collection of parameters we want to pass in query string, which are the ones we have just learned about (msgText and href). If you preview your application and you press the button, a new tab in the browser will be opened with the link, the message and a link preview delivered through an Adaptive Card:
After you have clicked on Share, the link will be shared to the selected user or channel, as in the following image:
Now let's see how we have implemented the sharing so that the link opens the app on a specific item of the catalogue.
Supporting a deep link
A deep link is a link that doesn't open just the app on the home page, but it redirect the user to a specific content. In the web ecosystem, this scenario is typically implemented through routing or query string parameters. For example, a web application could support an itemId parameter in the URL with the id of an item. When this URL is opened, the application automatically routes the request to the appropriate page to show the details of the selected item.
https://www.mywebsite.com/details?itemId=534
Power Apps support this mechanism as well when they are consumed using a web browser. If you open a Power App on your browser through its Web URL, you can attach to it some custom parameters that you can retrieve in the application using the Param() function. Let's say, for example, that the URL of our Power App is https://apps.powerapps.com/play/e/default-7454e082-9a4c-4adf-a685-a5f2a4cb711a/a/3bb8fb0e-5d81-4855-.... If we want to pass the information about a specific item, we can pass an extra itemId parameter to this URL, as in the following example:
https://apps.powerapps.com/play/e/default-7454e082-9a4c-4adf-a685-a5f2a4cb711a/a/3bb8fb0e-5d81-4855-a950-d9415c3ad896?tenantId=7454e082-9a4c-4adf-a685-a5f2a4cb711a&itemId=534
From a sharing perspective, this means that we just need to attach this parameter to our share button. We just need to make the value of the parameter dynamic, based on the selected item. For example, in my scenario, the catalogue is stored into a Dataverse table and it's displayed using a Gallery control. As such, the item template includes a share button which invokes the following function:
Launch("https://teams.microsoft.com/share", { href: "https://apps.powerapps.com/play/e/default-7454e082-9a4c-4adf-a685-a5f2a4cb711a/a/3bb8fb0e-5d81-4855-a950-d9415c3ad896?tenantId=7454e082-9a4c-4adf-a685-a5f2a4cb711a&itemId=" + ThisItem.ItemId, msgText: "Check this application" });
We have added the itemId parameter and we have set, as value, the ItemId property of the selected item, which is made accessible through the ThisItem object. ItemId is a property in the Dataverse table which contains the unique identifier of the item in the catalogue.
When the link is shared and the user clicks on it, the application will be opened in the normal way. However, the extra feature we can leverage is that we can read the value of the itemId parameter in the URL through the Param() function. For example, if you want to display its value in a label, we can set its Text property with the following function:
If(Param("itemId")<>Blank(), Param("itemId"), "Parameter is missing")
We pass to the Param() function the name of the parameter, which is itemId in our case. If it exists (we check this condition using the <>Blank() statement) we display its value, otherwise we display a warning message.
Now that you have understood how to retrieve a parameter to the URL, it's easy to build the startup experience of your application in a way that can display different content based on the parameter. For example, in the OnStart() event of the application, you could have some code like this:
If(Param("itemId")<>Blank(),
Set(CurrentItem, Param("itemId"));
Navigate(DetailScreen)
);
If the application is opened through sharing (so the itemId parameter is included in the URL), we store its value in global variable (so that we can retrieve it later to query our Dataverse table, for example) and we navigate the user directly to the detail screen instead of the home screen.
Wrapping up
In this blog post, we have learned how to implement a full "Share to Teams" experience in Power Apps, including support for deep links. In the first part, we have learned how to enable the sharing feature, which requires some extra work since Power Apps doesn't offer it out of the box. Then we have seen how we can integrate a deep link experience, which enables users to open the app directly on specific content that was shared from the application.
Happy (low) coding!