Making HTML data multi line when pulling into a table

(0) Share

Report

Posted on by Markswan20

121

Hi,

I am trying to pull data from a SharePoint List into HTML in order to email directly to a user. I am currently using the following code.

"<table border='1',border-collapse: collapse, width='100%'>" &
"<th>Record Date</th><th>Command Type</th><th>Incident Type</th><th>Case ID</th><th>Skill Level</th><th>Exercise Name</th><th>Training Name</th><th>CPD Name</th>" &
Concat(colRecords,"<tr><td>" & 'Log Date' & "</td><td>" & 'Command Type' & "</td><td>" & 'Incident Type' & "</td><td>" & 'Case ID' & "</td><td>" & 'Command Level' & "</td><td>" & 'Exercise Name' & "</td><td>" & 'Training Name' & "</td><td>" & CPDName &"</td>")&"</Table>"

The data for each record appears in a single line, i have tried inserting <tr> after Case ID to make the data appear over 2 lines, it splits the headings correctly but all the data comes below the Command level etc and not below the headings, is there a way to do it so each record comes under its retrospective heading?

Also if so can the headings be repeated for each record and not just once.

Regards

Mark

Categories:

Building Power Apps

I have the same question (0)

All responses (17)

Answers (1)

elseb 774 Moderator on at

Like (0)

Report
Hi,

Try this, I've started you off with few columns, If it'll work for you just add the remaining ones and style the table as required.

Although I've used your code with my data and it also looked ok, so maybe I misunderstand the issue...

"<table style='margin:auto'> <tr><th colspan=4><h2 style='text-align:left'>Table name</h2></th></tr> <tr style='background-color:LightBlue'> <th style='width:150px;text-align:left; padding-left:10px'>Record Date</th> <th style='width:150px;text-align:left; padding-left:10px'>Command Type</th> <th style='width:150px;text-align:left; padding-left:10px'>Incident Type</th> <th style='width:100px;text-align:left; padding-left:10px'>Case ID</th> </tr> <tr><td style='padding-top:5px;'></td></tr> " & Concat(colRecords, " <tr style='background-color:#f9f9f9'> <td style='text-align:left; padding-left:10px'>"& 'Log Date' &"</td> <td style='text-align:left; padding-left:10px'>"& 'Command Type' &"</td> <td style='text-align:left; padding-left:10px'>"& 'Incident Type' &"</td> <td style='text-align:left; padding-left:10px'>"& 'Case ID' &"</td> </tr> ") & "</table>"

Was this reply helpful? Yes No
Markswan20 121 on at

Like (0)

Report

Thanks for the response, i'm sorry i think i may have confused the situation, your code works the same as mine you were correct however im after the end result looking like the attached picture. Instead of it being in 1 line the data is spread across 2 lines.

example.jpg

Was this reply helpful? Yes No
elseb 774 Moderator on at

Like (0)

Report

ah gotcha 🙂 screenshot helped,

to achieve that you have to adjust html to alternate headers <th> and cells <td> twice, so basically leave the table as is, and split the content in two and put those parts one after the other.

I can't really write the code now but if you won't work it out i will help you in a bit when i'm free.

Was this reply helpful? Yes No
Markswan20 121 on at

Like (0)

Report

Thank you for the response, i've had a bit of a play with <th> and <td> but cant seem to get the code to do what i want, when you get a spare moment could you have a look where i need to utilise the coding to get the required outcome. Thanks elseb

Was this reply helpful? Yes No
elseb 774 Moderator on at

Like (0)

Report
Hi, sure have a look at the below

"<table style='margin:auto'> <tr><th colspan=4><h2 style='text-align:left'>Table name</h2></th></tr> <tr style='background-color:LightBlue'> <th style='width:150px;text-align:left; padding-left:10px'>Record Date</th> <th style='width:150px;text-align:left; padding-left:10px'>Command Type</th> </tr> <tr><td style='padding-top:5px;'></td></tr> " & Concat(colRecords, " <tr style='background-color:#f9f9f9'> <td style='text-align:left; padding-left:10px'>"& 'Log Date' &"</td> <td style='text-align:left; padding-left:10px'>"& 'Command Type' &"</td> </tr> ") &" <tr style='background-color:LightBlue'> <th style='width:150px;text-align:left; padding-left:10px'>Incident Type</th> <th style='width:100px;text-align:left; padding-left:10px'>Case ID</th> </tr> <tr><td style='padding-top:5px;'></td></tr> " & Concat(colRecords, " <tr style='background-color:#f9f9f9'> <td style='text-align:left; padding-left:10px'>"& 'Incident Type' &"</td> <td style='text-align:left; padding-left:10px'>"& 'Case ID' &"</td> </tr> ") & "</table>"

it should work with your data but my test collection looked like this:

ClearCollect( colRecords, Table( {'Log Date': Now(),'Command Type': "command 1",'Incident Type': "incident 1",'Case ID': "case 1"}, {'Log Date': Now(),'Command Type': "command 2",'Incident Type': "incident 2",'Case ID': "case 2"}, {'Log Date': Now(),'Command Type': "command 3",'Incident Type': "incident 3",'Case ID': "case 3"}, {'Log Date': Now(),'Command Type': "command 4",'Incident Type': "incident 4",'Case ID': "case 4"}, {'Log Date': Now(),'Command Type': "command 5",'Incident Type': "incident 5",'Case ID': "case 5"} ) )

result:

should give you good understanding of what you need to do.

Was this reply helpful? Yes No
Markswan20 121 on at

Like (0)

Report

Thank you for spending time looking at this code it's been really helpful, it's not quite where it needs to be, the way in which the format is required. I need each result under its own heading.
Incident Type
Incident 1
Incident Type
Incident 2

Basically the headings get repeated for every result.

Does this make sense and is it possible?

Thanks again it's really appreciated.

Was this reply helpful? Yes No
elseb 774 Moderator on at

Like (0)

Report
That completely defeats the purpose of the table, just put

<td style='text-align:left; padding-left:10px'>Incident Type: "& 'Incident Type' &"</td>

and get rid of the headers, you'll get the same effect

Was this reply helpful? Yes No
Markswan20 121 on at

Like (0)

Report

Thanks Seb, i still need all 4 columns i just used the Incident Type as an example.

Was this reply helpful? Yes No
elseb 774 Moderator on at

Like (0)

Report
I understand but If you put header every line this is not a table anymore that's why i suggested to add the tag like above, scrap the header entirely as it will only take 50% of real estate on the screen and do it like that:

"<table border='1',border-collapse: collapse, width='100%'>" & Concat(colRecords,"<tr><td>Record Date: " & 'Log Date' & "</td><td>Command Type: " & 'Command Type' & "</td><td>Incident Type: " & 'Incident Type' & "</td><td>Case ID: " & 'Case ID' & "</td><td>Skill Level: " & 'Command Level' & "</td><td>Exercise Name: " & 'Exercise Name' & "</td><td>Training Name: " & 'Training Name' & "</td><td>CPD Name: " & CPDName &"</td>")&"</Table>"

Was this reply helpful? Yes No
Markswan20 121 on at

Like (0)

Report

That is pretty much exactly what i'm after, the only difference is i want Record Date , Command Type, Incident Type & Case ID on the 1st line with their individual results, a break in the records so that the next 4 are below it.
Just means i have 4 on each line as opposed to all 8.

Thanks Seb

Mark

Was this reply helpful? Yes No