HTML Repeating Rows in a Table How-To

We’re back with our Business Solutions and Intelligence learning series. Each of our how-to series from RedCloud’s BS&I expert team can be accessed here. This month, we’re continuing the HTML theme. Yusuf will show you how to use HTML to customize your table in Canvas apps through the following step-by-step instructions, including a helpful tool to create or write an HTML formula. 

​Thank you for your expertise and instruction, Yusuf!

CIn Canvas apps, you can easily create table views with either the Gallery or Data Table control. However, sometimes we want to use our collected data in an email or even a preview of an email or PDF we generate.

Use Case Example:
You have a canvas app used to generate an invoice, which gets submitted in an email. However, before the user submits the invoice, you want them to get a preview of what the invoice looks like.
 
Solution:
In your app, users fill out a form and/or enters data that gets patched into your data source for each Invoice Line Item. For this example, I’m going to use this collection:
 
ClearCollect(colInvoiceLineItems,
{LineNumber: 1, LineName: "Monthly Power App Development Services", LineAmount: 2000},
{LineNumber: 2, LineName: "Stock Photography Assets", LineAmount: 810.70},
{LineNumber: 3, LineName: "Monthly Power BI Development Services", LineAmount: 1750},
{LineNumber: 4, LineName: "Monthly Training & Support", LineAmount: 725.10})
 
*To use the above example collection, insert a button into your app and copy and paste the above code into the Buttons OnSelect property.
 
Now we can start creating an HTML table.
 
HTML table uses the following tags:
·      Table <table>
·      Table Header <th>
·      Table Row <tr>
·      Table Data <td>
 
Step 1 | Insert an HTML Control into Your Canvas App

Step 2 | Enter HTML Text
In the HTML Text property, delete the sample text in there and enter:
"<table>
<tr>
    <th>Line Number</th>
    <th>Line Name</th>
    <th>Line Amount</th>
</tr>
<tr>" & Concat(colInvoiceLineItems,
   "<td>" & LineNumber & "</td>
    <td>" & LineName & "</td>
    <td>" & LineAmount & "</td>","</tr><tr>") &
"</table>"
This is how the HTML table shows with the above code:

​Now let’s breakdown the code to understand what’s been entered:

Step 3 | Formatting Your Table

A helpful tool to create/write an HTML formula is https://wordtohtml.net/.​
​
You can use the web app to write out what you want, for example, I can create the table formatted like the below and it will populate the HTML code on the right.

I can then copy and paste that into my app, make the appropriate edits so the HTML Text property is this:

"<table style='width: 100%; border-collapse: collapse; border: 1px solid rgb(0, 0, 0);'>
    <thead>
        <tr>
            <th style='background-color: rgb(41, 105, 176); border: 1px solid rgb(0, 0, 0);'><span style='color: rgb(255, 255, 255);'>Line Number</span></th>
            <th style='background-color: rgb(41, 105, 176); border: 1px solid rgb(0, 0, 0);'><span style='color: rgb(255, 255, 255);'>Line Name</span></th>
            <th style='background-color: rgb(41, 105, 176); border: 1px solid rgb(0, 0, 0);'><span style='color: rgb(255, 255, 255);'>Line Amount</span></th>
        </tr>
    </thead>
    <tbody>" & Concat(colInvoiceLineItems,
        "<tr>
            <td style='width: 33.3333%; border: 1px solid rgb(0, 0, 0);'>" & LineNumber & "</td>
            <td style='width: 33.3333%; border: 1px solid rgb(0, 0, 0);'>" & LineName & "</td>
            <td style='width: 33.3333%; border: 1px solid rgb(0, 0, 0);'>
                <div style='text-align: right;'>" & LineAmount & "</div>
            </td>",
        "<tr></tr>") &
    "</tbody>
</table>"
 
Which looks like this:

You can get fancy and change column sizing, make the widths fixed or responsive, add conditional formatting, etc.
Hope you all found this helpful and can’t wait to see how you use HTML tables in your Power Apps!