Modify a Markdown Table for Advanced Printing Templates

This post is going to show you how to make a Podio Markdown Table look clean and presentable inside our Advanced Printing Templates extension. First and foremost, please make sure you've read our other blog post about making a markdown table in a Podio calculation field: Dynamic Markdown Tables in Podio.

I'm going to start as if you have a Markdown Table set up already. The trickiest part of this whole process is that it is mostly trial and error. The number of characters that span an Advanced Printing Templates page is somewhere from 100-115. (It differs due to the width of different characters, as well as the margins you personally set for your template.) Because of this, you need to take the number of columns in your table and figure out how many characters you want per column. The difference for each column will be based on the content.
F.ex: a column displaying a price, up to the 100-thousands, ($100,000.00) would take 11 characters, and you'd only want more if the header on the column needed more characters than that. 

Define each of your columns and split them up into a total of 100-115 characters. (Important note: Between each column you'll need 3 characters so that it will have a divider and format correctly into Markdown.)
There will only be an issue if you have too many characters, but you can adjust it afterwards. This is why the process requires so much trial and error.

Once you've done a bit of math and figured out how you generally want to divide the columns, this is how you'll update your markdown table with the needed spacing.
Wherever the data for the column is getting added into the table (including the headers) you'll need to make some changes. For each specific column, add an open parenthesis before the data. After the data, add something like this:

+ "\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0").slice(0, 11)

If we're using our previous example with 11 characters, this is how it would look. You need one: "\u00A0" for each character you want the column to span. (\u00A0 is the javascript character for a space, however this space does not show up inside a Podio calculation field!)
The .slice(0, 11) is taking the full string (your data plus all the javascript space characters) and cutting it off after it counts from 0 (the beginning) till 11 (the 11th character) and then wont let the string go any further. (note that if the string IS longer than 11, it will simply be cut off)

Here is an example of a row doing this all together:

markdownTable += (@PodioVariable[i] + "\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0").slice(0, 11)

Another thing you need to change, is the section where you put "--- | ---" on the 2nd line to create the markdown table. Since it won't auto-format using the markdown in APT, you need to make those dashes the right character length. Using our previous example of 11 characters it would like this:

----------- |

Again, you may need one or 2 more dashes in each to make align it the correct way, and make it look the way you want in APT.

Once you've added the spaces in all places where the data gets added to a table, make sure the table is displaying in Podio correctly as it looked before you added the spaces. Now you can pull the table into APT. You have to do this a little differently than you normally would.
First off, pull the variable into the template like normal, the difference will come on the HTML side, so click the source button at the top left in APT to see the HTML source code. Around the variable you just pulled in, you need to add a <pre></pre> tag. (This prerenders javascript, so that the spaces will get displayed from Podio) You will most likely want to change the css as well, as the standard <pre> tag has a gray background, a border, and more padding than the rest of the content (this extra padding will probably make the table not fit correctly right off the bat) so if you add this inside the opening <pre> tag:

style="padding:0px; border:0px; background-color:#fff;"

You can also change the 'font-size' and the 'line-height' elements to make the table the correct size to fit where you need it. (changing the font-size will affect how wide the table is as well.) So since you can format things the way you like, this can change the number of characters needed to make the table as wide as you need. This is where you just keep tweaking it and reloading the template (after saving) to make sure it looks how you want. But now you can have a nicely formatted table with dynamic content from Podio, pulled into your Advanced Printing Template!

If you need more help, please contact us, or Live Chat us and we can set you in the right direction, or help you build out your Advanced Printing Templates!