web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Apps / Dynamically generating...
Power Apps
Answered

Dynamically generating multiple tables in HTML based off column value

(0) ShareShare
ReportReport
Posted on by 47

Hello,

 

I'm currently building a parts approval database and one of the functions I need to add is the ability to generate a report that shows everything that has been approved in the last week. I am writing this in HTML as I eventually want to be able to send this out as an email. As there can be hundreds of parts approved in a week, I would like to split this data out in to multiple tables based on the project these parts are a part of (the amount of parts, projects can all change from week to week so this will need to be dynamic based on the data.

 

The data in question looks like this (I've done this in excel just to make it easier to visualise, but the table I'm using is in a collection)

 

1.png

 

I need the HTML to look something like this:

 

2.png

 

I've tried using the concat function to create a separate table for each project, then filtering the data against each project but haven't been able to get it to work.

 

This is what my HTML is currently looking like (modified to remove any sensitive data. This splits the data out into separate tables, but has all parts approved in each table.

 

3.png

Categories:
I have the same question (0)
  • Verified answer
    KWojcik Profile Picture
    21 on at

    Hi,

    It might be easier to group data first (at least I'd do like that), using GroupBy() function. Then you can loop through groups and concatenate values inside groups. See example code

    Concat(
     ForAll(
     GroupBy(
     colData,
     "Project",
     "Projects"
     ) As _Project,
     _Project.Project & Char(10) & $"<table style='width: 100%; border-collapse: collapse; border: 1px solid rgb(0, 0, 0);'>
     <thead>
     <tr>
     <th>PartId</th>
     <th>ApprovalDate</th>
     </tr>
     </thead>
     <tbody>
     {Concat(
     _Project.Projects,
     $"<tr>
     <td style='width: 50%; border: 1px solid rgb(0, 0, 0);'>{PartID}</td>
     <td style='width: 50%; border: 1px solid rgb(0, 0, 0);'>{ApprovalDate}</td>
     </tr>"
     )}
     </tbody>
    </table>"
     ),
     Value,
     Char(10)
    )

    KWojcik_0-1698055992410.png

    Please let me know if you have any questions to that.

    best regards Krzysztof

     

     

  • v-yueyun-msft Profile Picture
    on at

    Hi , @Evil_Zoidberg 

    According to your description, you want to generate the Html from your collection.

    I test it in my side, here are the steps you can refer to:
    (1) I use the ClearCollect() function to create the test table in Collection in Power Apps:


    ClearCollect(Data, {'Part ID' :1 , Project:"Project 1",'Approval Date':"2 days ago"}, {'Part ID' :2 , Project:"Project 2",'Approval Date':"3 days ago"},{'Part ID' :3 , Project:"Project 1",'Approval Date':"8 days ago"},{'Part ID' :4 , Project:"Project 1",'Approval Date':"4 days ago"},{'Part ID' :5 , Project:"Project 3",'Approval Date':"9 days ago"})

    vyueyunmsft_0-1698056218734.png

    (2)We can use this code to generate the Table:

    //Filter the Data within one week 
    Set(FilterData, Filter( Data , Value(Match('Approval Date', "(?<days>\d+)").days ) <=7) );
    //Change the Table to conveniently generate the Html String
    Set(HtmlData ,AddColumns( AddColumns( Distinct( FilterData,Project ) As DisProject,"TableData", Filter(FilterData,Project=DisProject.Value) ) , 
    "Row",Concat( ForAll(ThisRecord.TableData , "<tr><td>"&'Part ID' &"</td><td>"&'Approval Date' &"</td></tr>" ) ,Value) ) );
    Set(Htmltext, "<!DOCTYPE html>
    <html>
    <head>
    <style>
    table {
     font-family: arial, sans-serif;
     width: 100%;
     border: 1px solid black; border-collapse:collapse;
    }
    td, th {
     border: 1px solid #dddddd;
     text-align: left;
     padding: 8px;
    }
    </style>
    </head>
    <body>
    
    " & Concat( ForAll(HtmlData , "<h1>" & Value & "</h1><br><table border='1'>
     <tr>
     <th>Part ID</th>
     <th>Approval date</th>
     </tr> " &Row & " </table>"
    
    
    
     ) ,Value)
     &"</body>
    </html>" )

    You can change the css format in your need and test this code .

    The result is as follows:

    vyueyunmsft_1-1698056373206.png

     

     

    Best Regards,

    Yueyun Zhang

     

  • OH-07080958-0 Profile Picture
    47 on at

    Thank you, that is exactly what I needed.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Forum hierarchy changes are complete!

In our never-ending quest to improve we are simplifying the forum hierarchy…

Ajay Kumar Gannamaneni – Community Spotlight

We are honored to recognize Ajay Kumar Gannamaneni as our Community Spotlight for December…

Leaderboard > Power Apps

#1
WarrenBelz Profile Picture

WarrenBelz 721 Most Valuable Professional

#2
Michael E. Gernaey Profile Picture

Michael E. Gernaey 320 Super User 2025 Season 2

#3
Power Platform 1919 Profile Picture

Power Platform 1919 268

Last 30 days Overall leaderboard