How to manage relative URLs in Power App HTML Field control?

Most common issue with using html field in Power App is to handle SharePoint links. But before understanding the issue lets understand few terminologies first.

Terminologies

Base URL : Base URL contains domain name, for example “https://www.work4delight.com” it can also be like “https://www.work4delight.com/assets” it all depends on how we configure in HTML.
Absolute URL : Absolute url of any resource also contain base url, we can say it’s a full path of the resource, for example “https://work4delight.sharepoint.com/sites/DemoPlan/SitePages/Test-Article.aspx”
Relative URL : Relative URL of any resource do not contain base url, for example “/sites/DemoPlan/SitePages/Test-Article.aspx” it depends on the base url what we had defined in HTML.

In SharePoint online base URL is defined as “https://<companyname>.sharepoint.com” in my case it is like “https://work4delight.sharepoint.com”

Problem

In SharePoint when we store any hyperlink either on page or in Rich text field of list, it gets stored as relative URL. Only external links gets stored as absolute URLs.

Now when we use PowerApps HTML field to show SharePoint content where we are having link to any SharePoint resource then it don’t work, because in Power App context base URL gets changed, as we are not in SharePoint here so SharePoint base URL didn’t gets applied to our relative URLs, instead it apply this base URL – “https://create.powerapps.com/” , now your relative URL will not work and you will see error like this -

Recreate Issue

I created a list with a multiline text where I set “Use enhanced rich text” as true

I made one entry with one of my article page link, then created a Power App based on list.

Now at the home page of the list you can notice one div tag

When we go to details page then you can notice how SharePoint stores the link

Now lets first convert this label field into Rich text field, so here I am not explicitly using HTML Field control, but it is same as of using HTML field control. Go to Form setting, then select field and change control type to “View Rich Text” as shown in image below

After change your detail page will look like this

Now when I click on link then I get following error

Solution

Now lets fix this. Select your field and replace HTML Text value to Substitute(Parent.Default,"/sites/","https://work4delight.sharepoint.com/sites/") here you need to put your domain base URL.

How to manage relative URLs in Power App HTML Field control?

Terminologies

Problem

Recreate Issue

Solution

Neha Jadhav

Diwakar Jadhav