How to display a single delimited string as HTML table in Power Apps canvas apps.

Hello everyone and welcome to my blog. In today’s blog, I will show how you can display a single delimited string in HTML table format.

For this example, I will use comma as the delimiter. But the method will work for any delimiter.

Let’s start exploring with this phrase – “The,quick,brown,fox,jumps,over,the,lazy,dog“.

Quite a famous phrase indeed. The idea is to display this as a table in Power Apps. So my expected final output is essentially a HTML table with the following row items.

While it may sound rather difficult, it’s actually not. To demonstrate this, I will use a very simple example. I have a label control containing the comma delimited phrase. When I click on the button ‘Convert‘, the comma delimited text should be displayed as a HTML table.

Quite obviously, I will use the HTML text control to display the table. Screenshot below for reference.

In the OnSelect of the button I use the below formula.

UpdateContext(
    {
        textToRows: "<table>" & Concat(
            Split(
                Label3.Text,
                ","
            ),
            $"<tr><td>{ThisRecord.Value}</tr></td>"
        ) & "</table>"
    }
)

Quite easy to understand I guess. I use Split function to convert the delimited string into a collection and then use the Concat function to join each item of the collection into a table format. You are free to add some styling to the table.

Below is the result when I click on the button.

Let’s improvise on this example. Let’s say I have a string of emails delimited by semicolon (;).

Example – debajit.dutta@contoso.com;debajit.dutta@xrmforyou.com;debajit.dutta@adventureworks.com.

I want to display this list in a HTML table with clickable links so what when an email is clicked, the default email app will open with the email selected. To do this I have to use the below formula.

UpdateContext(
    {
        textToRows: "<table>" & Concat(
            Split(
                Label3.Text,
                ";"
            ),
            $"<tr><td><a href='mailto:{ThisRecord.Value}'>{ThisRecord.Value}<a></tr></td>"
        ) & "</table>"
    }
)

Below is the output of the formula.

I hope this helped. You will also like the below posts.

Debajit Dutta