RedCloud Consulting
  • What We Do
  • WHO WE ARE
    • MEET THE TEAM
  • CAREERS
  • COMMUNITY
  • HIGHLIGHTS
    • BLOG
    • CASE STUDIES
  • CONTACT
  • Sustainability

HTML Repeating Rows in a Table How-To

4/22/2022

 
Picture
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
Picture
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:
Picture
​Now let’s breakdown the code to understand what’s been entered:
Picture
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.
Picture
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:
Picture
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!

Comments are closed.

    Categories

    All
    10 Min Spotlight
    A Day In The Life
    BI & Automation
    Community
    Employee Kudos
    Latest News
    Lunch & Learn
    Meet The Team
    Privacy & Security
    Sustainability
    Welcome To The Team

    Archives

    October 2023
    September 2023
    August 2023
    July 2023
    June 2023
    May 2023
    April 2023
    March 2023
    February 2023
    January 2023
    November 2022
    October 2022
    September 2022
    August 2022
    July 2022
    June 2022
    May 2022
    April 2022
    March 2022
    February 2022
    January 2022
    December 2021
    November 2021
    October 2021
    September 2021
    August 2021
    July 2021
    June 2021
    May 2021
    April 2021
    March 2021
    February 2021
    January 2021
    December 2020
    November 2020
    October 2020
    September 2020
    August 2020
    July 2020
    June 2020
    May 2020
    April 2020
    March 2020
    December 2019
    August 2019
    June 2019
    August 2018
    February 2018
    August 2017

    RSS Feed

Button to glassdoor page
Main Office:   425-305-4121​        |         info@redcloudconsulting.com
©2020 RedCloud Consulting, Inc.  |   All Rights Reserved.  |  Privacy Policy  |  Terms of Use 
  • What We Do
  • WHO WE ARE
    • MEET THE TEAM
  • CAREERS
  • COMMUNITY
  • HIGHLIGHTS
    • BLOG
    • CASE STUDIES
  • CONTACT
  • Sustainability