HTML Repeating Rows in a Table How-To

This month, dive deeper into HTML with Yusuf's expert guidance on customizing tables in Canvas apps. Follow step-by-step instructions to master HTML usage, complete with a handy tool for crafting HTML formulas.

In Canvas apps, while Gallery or Data Table controls are handy for creating table views, there are instances where we need to utilize our data in emails or previews for generated PDFs.

Use Case Example:

You have a canvas app that generates an invoice, which is then sent via email. However, before the user submits the invoice, you want them to see a preview of what it 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 break down 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.

I hope you all found this helpful. I can’t wait to see how you use HTML tables in your Power Apps!