cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Raynok1
Level 8

Complex HTML table

Hi There,

 

I would like to know if it would be possible to build a complex html table like so,

Html Table.png

 

The rows are grouped by Site then by Product.
Looking at https://powerusers.microsoft.com/t5/Creating-Apps/Send-email-HTML-format-problem/td-p/121228
@timl  & @jhn1 methods seems promising. In their example, the rows are in one column but thats where I'm stuck. I'm not sure how to take their method to produce the above desired layout. 

The goal is to push the html table to a word and PDF document.

 

Kind Regards,

3 REPLIES 3
Highlighted
Raynok1
Level 8

Re: Complex HTML table

So far I've been able to produce this, 

 

html1.png

 

Code: 

 

"<!DOCTYPE html>
<html>
<head>
<style>
thead {background: #195870;}

table, th, td {
border: 1px solid black;
}
</style>
</head>

<body>
<table class=,table,>

<thead>
<tr>
<th class=,sr-only,>Site</th>
<th class=,sr-only,>Products</th>
<th scope=,col,>Details</th>
<th scope=,col,>Unit Cost</th>
<th scope=,col,>Total</th>
</tr>
</thead>
<tbody>
<tr>"
& Concat(Sort(Gallery1.AllItems,Site & Supplier),"

<td colspan=,1,><br>""Site: "&Site&"</td>

<tr>
<td> <th scope=,row, class=,sr-only,>"&Service&"</th>

<tr>
<td><td align=center>"&Supplier&"</td><td align=center>"&BillingAmount&"</td><td align=center>"&BillingMarkup&"</td>
</tr>"
)&"

<tr>

<th scope=,row, class=,sr-only,>Total</th>
<td><td>Test</td>

</tr>

</tbody>
</table>"

 

 

Still figuring out how to group them by Site and Product.

Raynok1
Level 8

Re: Complex HTML table

More Progress, 

Following another example :  https://powerusers.microsoft.com/t5/Creating-Apps/Send-email-HTML-format-problem/td-p/121228

Current result and the example of the end goal. Just need to figure out how to group "Products" now. Getting close.



html2.png

 

Raynok1
Level 8

Re: Complex HTML table

Managed to get the items aligned but its pulling blank products,
It shouldnt show Product 3 under Site 1, there is no Products3 under Site 1, likewise for Site2. 


html3.png

 

Clear(TableRows);
Clear(galleryGrouped);
Clear(galleryGrouped2);

ClearCollect(galleryGrouped,
GroupBy(Gallery, "Site", "Service")
);
///Supplier is items/////
ClearCollect(galleryGrouped2,
GroupBy(Gallery, "Service", "Supplier")
);
ForAll(galleryGrouped,
Collect(TableRows,
{SortCol: Site & "0",Value:"<tr><td colspan=""2"" style=""Background-color:gray;"">" &
Site & "</td></tr>"}
);
ForAll(galleryGrouped2,
Collect(TableRows,
{SortCol: Site& Service & "0",
Value:" <tr>
<td> <th scope=,row, class=,sr-only,>"&Service&"</th>"
}
));

ForAll(Service,
Collect(TableRows,
{SortCol: Site& Service & "1",
Value:" <tr>
<td> <th scope=,row, class=,sr-only,>"&Supplier&"</th>" & "
<td> <th scope=,row, class=,sr-only,>"&BillingAmount&"</th>" }

))
)

 

Helpful resources

Announcements
firstImage

PowerApps Monthly Community Call!

Join us next Wednesday for our Demo Extravaganza, October 16, 2019 8am PDT.

firstImage

Microsoft Business Applications Virtual Launch Event

Join us for an in-depth look at the new innovations across Dynamics 365 and the Microsoft Power Platform.

firstImage

Watch Sessions On Demand!

Continue your learning in our online communities.

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

FirstImage

Power Platform World Tour

Coming to a city near you

thirdimage

PowerApps Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

FourthImage

Join PowerApps User Group!!

Connect, share, and learn with your peers year-round

SecondImage

Power Platform Summit North America

Register by September 5 to save $200

Top Kudoed Authors
Users Online
Currently online: 457 members 4,663 guests
Please welcome our newest community members: