Displaying lists in HTML PDF export template

Get Help
1

I just discovered the HTML > PDF generation option in Fibery, which looks really useful. I added a button to one of my databases that uses the Attach PDF action to generate the PDF into a Files field, and I have “Treat Template as HTML page” checked. Most of this is working great, but I’m running into trouble when trying to include a list of entities in my template.

I have a database called “Meals” and a database called “Dishes”. Meals have a one-to-many relationship with Dishes. I want to display the name of the Meal at the top of the PDF (simple enough) and then below that have a bulleted list with the names of each Dish connected to that Meal. The button that calls the PDF generation is on Meals.

If I use Markdown {- Dishes:Name -}, the PDF generates successfully, but the names of the Dishes are all listed in one long line, rather than a styled vertical bulleted list:

image
image308×107 3.06 KB

If I use HTML and JavaScript as shown here:

<table>
	<% for(let item of Entity.Dishes) {%>
        <tr>
			<td><%= item.Name %></td>
		</tr>
	<%}%>
</table>

…then the PDF fails to generate and I get a popup error that says “Failed to execute Action “Attach PDF To Printable PDF Using Template”: Entity.Dishes is not iterable.” (“Printable PDF” is the name of my Files field.)

I tried this as an unordered list, too (I’d actually prefer to use that than a table in this case), but got the same error.

		<ul> 
			<% for(let item of Entity.Ingredients) %>
				<li> <%= item.Name %> </li>
			<% %>
		</ul>

I also tried it using the formatting used in this documentation, but again, same error.

<% for (const item of Entity["Dishes"]) {%>
		- <%= item.Name %>
	<% } %>

Any idea what I’m doing wrong here? (Or alternatively, is there a way to style the markup version and I can bypass using JS altogether?)

My full template code:

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
    	body {
    		font-family:Trebuchet MS,Sans-Serif;
    		}
    </style>
</head>

<body>

	<h1>{{Name}}</h1>
 
	<ul> 
		<% for(let item of Entity.Ingredients) %>
			<li> <%= item.Name %> </li>
		<% %>
	</ul>
		
</body>

</html>
2

This is the way you should be doing it, so I am surprised that you are not seeing a bulleted list.
Are you willing to share your space so that we can debug (or invite us into your workspace, so we can check things out first hand).

3

Hi Chr1sG,

Yes, I’d be happy to invite you in to take a look! How should I go about doing that?

4

You can invite me as a user (preferably admin) into your workspace (it won’t cost you anything)

chris(at)fibery(dot)io

5

Okay, just invited you!

6

Check out the Print PDF copy button I created. Seems to be working as expected, with the Meal name at the top, and bulleted list of the names of the Dishes.
Feel free to reach out via the in-chat human support if you have any more q.s
More effective than community msg ping pong(!)

7

Ah, okay, so it looks like I should NOT have been checking the “Treat Template as HTML page” box. Is there a way to apply styling to the page when just using markup?

8

You’re limited to markdown formatting options if you don’t tick the box (and I know that this is more limited than full HTML).

However, if you initialise the Dishes up front, using {!Dishes:Name!} you can use HTML and use <li> <%= item.Name %> </li> within a loop to get what you need:

{!Dishes:Name!}
<!--Styling-->
<style>
	body {
		font-family:Trebuchet MS,Trebuchet,Sans-Serif;
		}
</style>

</head>

<body>

	<h1>{{Name}}</h1>
 
	<% for (const item of Entity["Dishes"]) {%>
		<li> <%= item.Name %> </li>
	<% } %>
		
</body>

</html>
9

Aha, I think initializing the database was the piece I was missing! It looks like this generates successfully with the properly bulleted list while still letting me add CSS styling to the overall doc.

Thank you so much for your help, Chr1sG!