How to Add Hyperlink to Data Table Column in PowerApps

By | November 26, 2019

Introduction

PowerApps lets you create, customize and run mobile apps with very less code. Microsoft released new experience for user in PowerApps which are more user friendly and improves user experiences.

In today’s blog we will explore more on hyperlink property in Data Table control for PowerApps.

Now, let’s consider a scenario where users want to open related record in PowerApps. In the following example, we will illustrate how to open contact records related to account in different form.

Please follow the below steps to implement the above scenario in PowerApps

1. Create a new canvas app in PowerApps. Click on this link for information on how to create canvas app.

2. Add a List screen (BrowseGallery1) and set the Account data set to it, as shown in below screenshot:

How to Add Hyperlink to Data Table Column in PowerApps

3. Then add DataTable on DetailScreen form as shown in below screenshot:

How to Add Hyperlink to Data Table Column in PowerApps

4. Next, add a formula on Datatable to filter datatable and retrieve contact records related to account as shown below:

FormulaFilter(Contacts,GUID(‘Company Name’)= BrowseGallery1.Selected.Account)

How to Add Hyperlink to Data Table Column in PowerApps

This formula will display Contact records related to Account.

5. Now to make field as hyperlink, we need change the ‘Is hyperlink’ property of the column to true, as shown in below screenshot. This will make the field clickable.

How to Add Hyperlink to Data Table Column in PowerApps

6. Add formula in column to navigate to next screen when the hyperlink field is clicked. Formula : Navigate(EditForm4,ScreenTransition.Cover,{ ID: DataTable1.Selected } )

How to Add Hyperlink to Data Table Column in PowerApps

7. Now add another new form screen to open Contact record when clicked on the hyperlink field.

How to Add Hyperlink to Data Table Column in PowerApps

8. Add data source as Contact to show contact records. Set formula on Item as shown in below screenshot:

Formula: DataTable1.Selected

How to Add Hyperlink to Data Table Column in PowerApps

9. Now run the app on your mobile device. Click on the arrow highlighted in below screenshot and you will be redirected to next form where you can see related contacts of the selected account.

Note: In case of multiple contact records scroll bar will be automatically displayed on the right side of the table as shown in above screenshot. 

10. Click on Hyperlink field (i.e Full Name) to open the contact record.

How to Add Hyperlink to Data Table Column in PowerApps

Conclusion

 Thus, as illustrated above, we can easily add hyperlink to the Data Table column in PowerApps.

PowerApps

Leave a Reply

Your email address will not be published. Required fields are marked *