PDF Template Tables - doesn't print cells - all data on top of each other

[crmclients]

I'm trying to print related items in a PDF template using this example in the documentation:


{{tableTag}}

{{#each contacts}}

{{trTag}}

{{tdTag}}{{name}}{{/tdTag}}

{{tdTag}}{{amount}}{{/tdTag}}

</tr>

{{/trTag}}

{{/each}}

{{/tableTag}}


Some questions (appreciate any help in advance ) -> please note cannot do code except in template using cloud version

1. the "</tr?" is that a typo?
2. how would I do this using regular html? what i try just prints the html not the data
3. is there something missing for it to create the cells?
4. How do you print the header?

When I follow this example i get errors Unexpect token {{/tdTag}} ! Previous token {{#[each]}} is not closed Unexpect token: {{/tdTag}} ! Unexpect token: {{/trTag}} ! Unexpect token: {{/each}} ! Unexpect token: {{/tableTag}} !

When i follow this 2nd example below on the same page I get the attached screen shot


{{#tableTag width="80%" border="0.5pt" cellpadding="4"}}

{{#each opportunities}}

{{#trTag}}

{{#tdTag width="40%"}}{{name}}{{/tdTag}}
{{#tdTag width="30%"}}{{assignedUserName}}{{/tdTag}}
{{#tdTag width="30%" align="right"}}{{stage}}{{/tdTag}}

{{/trTag}}

{{/each}}

{{/tableTag}}

Some questions regarding this example

1. Should the table be 100%?
2. Does it matter that it is not and the cells add up to 100?
   • I tried changing the % but that didn't change the fields printing on top of each other
3. Is there a guide like this with examples for boarder, colors, or does html elements translate?
4. How would I do this in HTML in the PDF template?
   • examples that I tried only prints the html code

[telecastg]

Hello crmclients

I haven't tried the new table helper but try this and see if it helps:

{{#tableTag}}
    {{#each contacts}}
        {{#trTag}}
            {{#tdTag}}{{name}}{{/tdTag}}
            {{#tdTag}}{{amount}}{{/tdTag}}
        {{/trTag}}
    {{/each}}
{{/tableTag}}

[crmclients]

thanks - i did take out the <tr> but it still doesn't work
it doesn't seem to know how to shift over for the next column, prints everything in one spot

[crmclients]

telecastg have you tied with regular html? i'd be happy if that worked \0/

i just tried this example with a new Opportunities template (fields populated) but it's blank


{{#tableTag width="80%" border="0.5pt" cellpadding="4"}}
{{#each opportunities}}

{{#trTag}} {{#tdTag width="40%"}}{{name}}{{/tdTag}}

{{#tdTag width="30%"}}{{assignedUserName}}{{/tdTag}}

{{#tdTag width="30%" align="right"}}{{stage}}{{/tdTag}}

{{/trTag}}
{{/each}}
{{/tableTag}}

[crmclients]

crazy --&gt; if i smush the rows on one line it spreads out into cells however something keeps "correcting" the bracket placements and after 2 saves it seems to add/move brackets - I'm cut pasting the same lines

kinda didn't work - cannot control the layout - creates a line in-between - discovered source button (</>)...

[telecastg]

As I mentioned I haven't tried the special tag helpers.

I kind of gave up on the TCPDF engine and use my browser engine to render PDF so I haven't kept up with the enhancements.

If you want to try without the special tag helpers, I would write the template like this, but I suspect that TCPDF will not accept the CSS commands without the special tag helpers.

<table>
    {{#each opportunities}}
        <tr>
            <td style="width:20%">{{name}}</td>
            <td style="width:"10%">{{amount}}</td>  
            <td>{{stage}}</td>
        </tr>
    {{/each}}
</table>

If this doesn't work, maybe Maximus can shed some light

[shalmaxb]

Hi, here is a table example, that I use and that works. I would only mention, that you write your code in codeview not WYSIWYG. This table has an address block on top and then two columns (<td>) with terms on the left side and the placeholders on the right side.

<table>
<tbody>

<tr><td style="width: 51%; padding: 3px 2px; font-size:11px; text-align: left">An<br>{{name}}<br>{{firstname}}&nbsp;{{secon dname}}<br>{{strasseAusstellungsort}}<br>{{postalc ode}}&nbsp;{{city}}
</td>
<td style="width: 22%; font-size:11px; padding: 3px 2px; text-align: right">
Number:&nbsp;<br>
Ust.ID:&nbsp;<br>
Date:&nbsp;<br>
InvoiceNumber:&nbsp;<br>
service:&nbsp;<br>
Due:&nbsp;
</td>
<td style="width: 22%; font-size:11px; padding: 3px 2px; text-align: left">
{{number}}<br>
{{ID number}}<br>
{{date}}<br>
{{invoiceNumber}}<br>
{{service}}<br>
{{due}}
</td>
<td width="5%"><span style="font-size: 10px; padding: 3px 2px; font-weight: normal;">&nbsp;</span></td>
</tr>
</tbody>
</table>

The styles are working, too and as you see, in this case, the width does not have to be complete 100%. For every section you will need a new table, i.e. if the next section would have more than two columns, that has to be a new table.
Avoid to mix codeview and WYSIWYG. I experienced, that the WYSIWYG view messes up the code. It starts already, that in an empty window, you can see in codeview, that TCPDF inserts a <p><br/></p> (I always delete this first in codeview).
I create my tables in an external editor and copy the code into the codeview. I also had some good experiences to create a template in the email editor and copy that code over to the PDF editor (in this case watch the curly brackets, they are a bit different in email editor.
One more thing that I found is, that you should use the font Helvetica, the others give strange results sometimes.

Overall, don`t expect too much from TCPDF, it is more a pain in the ass, but as I read, Yuri is already improving the PDF feature for a later version of espoCRM.

[crmclients]

" I experienced, that the WYSIWYG view messes up the code"

this was totally happening to me! it thought i was going crazy - code was changing - brackets moving - thx for the confirmation on this!

[item]

Hello,
here a sample .. but copy-past in code view, not wysiwig !
color, font and so.

<table colspan="12" cellspacing="1" style="font-size: 11px;" width="100%">
<tbody>
<tr>
<td colspan="12" width="100%" style="background-color: #F5F2D9;text-align: center;"></td>
</tr>
<tr>
<td width="100%" colspan="12" style="text-align: center;background-color: rgb(198, 177, 28); color: #ffffff;">detail</td>
</tr>
<tr>
<td colspan="2" width="15%" style="background-color: rgb(198, 177, 28); color: #ffffff;text-align: center;">type</td>
<td colspan="2" width="10%" style="background-color: rgb(198, 177, 28); color: #ffffff;text-align: center;">flow</td>
<td colspan="4" width="50%" style="background-color: rgb(198, 177, 28); color: #ffffff;text-align: center;">info</td>
<td colspan="2" width="10%" style="background-color: rgb(198, 177, 28); color: #ffffff;text-align: center;">rate</td>
<td colspan="2" width="15%" style="background-color: rgb(198, 177, 28); color: #ffffff;text-align: center;">amount</td>
</tr>
<!-- {{#each payrollItems}} -->
<tr>
<td colspan="2" width="15%" style="background-color: rgb(198, 177, 28); color: #ffffff;">{{type}}</td>
<td colspan="2" width="10%" style="background-color: rgb(198, 177, 28); color: #ffffff;">{{flow}}</td>
<td colspan="4" width="50%" style="background-color: rgb(198, 177, 28); color: #ffffff;">{{info}}</td>
<td colspan="2" width="10%" style="background-color: rgb(198, 177, 28); color: #ffffff;text-align: right;">{{rate}}%</td>
<td colspan="2" width="15%" style="background-color: #F5F2D9;text-align: right;"><b>{{amount}}€</b></td>
</tr>
<!-- {{/each}} -->
<tr>
<td colspan="12" width="100%" style="background-color: #F5F2D9;text-align: center;"></td>
</tr>
<tr>
<td colspan="4" width="25%" style="background-color: rgb(198, 177, 28); color: #ffffff;">Resume</td>
<td colspan="4" width="60%" style="background-color: rgb(198, 177, 28); color: #ffffff;">{{amountCredit}} - {{amountDebit}}</td>
<td colspan="4" width="15%" style="background-color: #F5F2D9;text-align: right;"><b>{{amount}}€</b></td>
</tr>

</tbody>
</table>

[crmclients]

item thanks for the color element! - using the editor worked in the editor but not when the PDF was produced and I couldn't see why
shalmaxb thanks for the example and confirmation - I thought it was just me
telecastg thanks for the confirmation, I was able to see some results in code view but cannot do headers and color

I will try all of these and report back ----> thanks so much for offering help, makes the effort/failure much less daunting!

[crmclients]

btw ---> did I miss that having a header is not/is possible?

[shalmaxb]

This could be interesting for you: https://forum.espocrm.com/forum/feat...ate-generation

[crmclients]

nevermind, I see it in your example shalmaxb or I see it: you need a table for the header then a table for the "for each" ...

[crmclients]

The 3 DEV DUDES! U R ROCKSTARS!!!! Take it on the road a billion thx!

[crmclients]

I just need to do some adjustments (alignment, $, etc) and we are golden. Other tips for anyone struggling with PDF to Print as I was:

• You can use this example in the documentation to test your data and relationships

{{#each opportunityItems}}
Item : {{name}},
Unit Price: {{unitPrice}},
Quantity: {{qty}}
Item Total: {{itemTotal}}
{{/each}}

The print out is linear, not in a table. but you can test your are pulling in the correct fields.

• There is a <tr> typo as @telegcast confirmed in one of the documentation examples FYI 2 of the 3 documentation examples don't work, see above post
• Print to PDF doesn't show up until you create a Template for that entity
• Related records will not show up w/o relationships between entities e.g. Invoice Entity and Invoice Items Entity
• Read the above for the tips on font, color, using the source button ONLY </> to make changes
• I had some issues changing the header logo image, sometimes it was better to just create a new Template; the sizing allowance for the header is not quite right --> if I figure it out I will post something; it started putting it in the footer which was unchecked - i suspect some updates and setting changes are out of sync
• You can Print to PDF from the Entity List view after checking the record-> then when you are viewing the document in the browser, move that browser tab by itself - after that just -F5 refresh- after you make a change - you don't have to do the 3 clicks every time
• @shalmaxb's post above is perfect for the header; just replace with your fields
• @items detail makes it professional with color options: go here for the codes or just search #000000 for a site that lists them
• US dimensions for 8 1/2 x 11 paper is
  • width 215.9 mm
  • height 279.4 mm
  • FYI haven't tested printing just yet

Bottom line, use regular HTML code in the source editor, not WYSIWYG, to format your PDF.

Next challenge, Emailing Quotes but the input above I suspect has slayed all the dragons!

[item]

Hello,
not understand "professional color" .. this color used is from the logo of ours company.
here a sample.. with colspan .. width .. for you .. you must adapt all td with this value.. and sample text-align left/right/center
total colspan always 12 ... total width must give always 100%

for error creation in pdf... always work on copy (duplicate) .. so if OK ..then paste only code to the first template.. modify only one by one ... one error, pdf error all and then loose time to search

<tr>
<td colspan="6" width="50%" style="background-color: rgb(198, 177, 28); color: #ffffff;text-align: left;">type</td>
<td colspan="2" width="15%" style="background-color: rgb(198, 177, 28); color: #ffffff;text-align: right;">flow</td>
<td colspan="2" width="15%" style="background-color: rgb(198, 177, 28); color: #ffffff;text-align: right;">info</td>
<td colspan="2" width="20%" style="background-color: rgb(198, 177, 28); color: #ffffff;text-align: right;">rate</td>
</tr>