Hello everyone,
I’m working with a Glide table that includes several columns such as product description, quantity, price, total amount, and 5-6 images. I’d like to generate a PDF containing this information. It should be dynamic, as the data in the document will keep changing — this PDF is meant for work order management, and each work order needs its own PDF document.
I’m fine with a process that requires a couple of extra clicks, like using a print option and then saving as PDF. Could anyone guide me on how to achieve this?
Please note: I prefer not to use services like PDFMonkey or DocsAutomator, as they consume multiple updates (about 3 updates per PDF), and my app needs to generate a large number of PDFs.
Hi Maxime,
Thanks for the reference, video helped me out a lot
1 Like
I am glad it helped! Thanks to @Gideon_Lahav_Busines !
Hello again,
I’ve completed about 90% of the document following the video tutorial, but I’m struggling with adding images. My Glide table has a column with multiple images, and I need to incorporate these dynamic images into my HTML document.
For single images, there’s no problem. However, I’m having difficulty with the multiple dynamic images. I’ve tried using split column functions, then attempted using a joined list followed by split column, but I’ve encountered Glide restrictions each time.
Could someone please help me resolve this issue of adding multiple dynamic images from my Glide table to my HTML document?
Thank you.
What have you done so far?
I’m developing a work order management app that needs to generate PDFs after each completed task. These PDFs need to include all data from the work order table, which contains columns like:
- Dates
- Customer names
- Assignee information
- Services and products (as dynamic inline lists that can vary per work order)
- Customer and assignee signatures
I’ve completed most of the functionality, but I’m currently stuck on handling multiple dynamic images in the PDF generation process.
Specifically, I’m using Glide’s native multiple image column, which I need to split up individually. However, I can’t split it directly using the split column feature. My current approach is:
- First, using a joined list to convert the images to text format
- Then using split column on that text
- But I can’t use split column in the template, so I’m trying to use joined list again
- Then sourcing that to a template column
This is where I get lost and stuck. I need a solution to properly handle these multiple dynamic images in my PDF generation workflow.
You could use JavaScript to handle the joined list and convert it to valid HTML and then use the return in your template. Would that work for you?
Although I don’t have coding skills, I’ve attempted to use JavaScript (with ChatGPT’s help) to solve my image display problem, but I couldn’t get it working or fully understand how to implement it. A simple JavaScript solution that could convert joined list of image URLs into proper HTML that would work.
Here’s the code ChatGPT suggested, which I’ve tried:
javascript
// First attempt:
let images = Array.isArray(p1) ? p1 : (p1 ? p1.split(",") : []);
return images.map(img => `<img src="${img}" style="width:100%;max-width:300px;margin-bottom:10px;">`).join('');
// Second attempt:
let images = p1 ? p1.split(",") : [];
return images.map(img => `<img src="${img}" style="width:100%;max-width:300px;margin-bottom:10px;">`).join('');
I’m hoping for a straightforward solution that can take joined list of image URLs and convert them to HTML that would display properly in my PDF template.
You could actually just set:
const images = p1 ? p1.split(",") : [];
return images.map(img => `<img src="${img}" style="width:100%;max-width:300px;margin-bottom:10px;">`).join('');
It all depends on what should your final HTML look like. What is your final HTML template that you have and/or want to get?
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
vertical-align: top;
min-height: 20px;
min-width: 100px;
word-break: break-word;
}
th {
background-color: #f2f2f2;
text-align: left;
}
.title {
background-color: #f2f2f2;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 50px; /* Added padding below header */
}
.header-left img {
max-height: 60px;
}
.header-right {
text-align: right;
}
.header-right h2 {
margin: 0;
}
.company-info {
font-size: 14px;
margin-top: 5px;
}
.wo-images {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-top: 10px;
}
.wo-images img {
width: 100%;
height: auto;
max-height: 250px;
object-fit: contain;
border: 1px solid #ddd;
padding: 4px;
background-color: #fff;
}
</style>
</head>
<body>
<!-- Header row -->
<div class="header">
<div class="header-left">
<img src="{{logo}}" alt="Logo">
</div>
<div class="header-right">
<h2>SERVİS FORMU</h2>
<p class="company-info">
Tel:
</p>
</div>
</div>
<!-- Customer and Service Info -->
<table>
<tr>
<th colspan="2">MÜŞTERİ BİLGİLERİ</th>
<th colspan="2">SERVİS BİLGİLERİ</th>
</tr>
<tr>
<td class="title">Müşteri Adı</td>
<td>{{customer_name}} </td>
<td class="title">Tarih</td>
<td>{{date}} </td>
</tr>
<tr>
<td class="title">Yetkili Kişi</td>
<td>{{contact_person}} </td>
<td class="title">Servis No</td>
<td>{{form_number}} </td>
</tr>
<tr>
<td class="title">Telefon Numarası</td>
<td>{{telephone}} </td>
<td class="title">Teknisyen Adı</td>
<td>{{user_1}} </td>
</tr>
<tr>
<td class="title">Adres Bilgisi</td>
<td>{{address}} </td>
<td class="title">Adres Bilgisi</td>
<td>Kadıköy Mah. Bağdat Cad. No:102/A İzmit/Kocaeli</td>
</tr>
</table>
<!-- Job Info -->
<table>
<tr>
<th colspan="4">İŞ BİLGİLERİ</th>
</tr>
<tr>
<td class="title">İş Türü</td>
<td>{{title}} </td>
<td class="title">Cihaz Tipi</td>
<td>{{product_type}} </td>
</tr>
<tr>
<td class="title">Marka</td>
<td>{{brand}} </td>
<td class="title">Model</td>
<td>{{model}} </td>
</tr>
</table>
<!-- Customer Report -->
<table>
<tr>
<th colspan="2">MÜŞTERİ BİLDİRİMİ</th>
</tr>
<tr>
<td colspan="2">{{details}} </td>
</tr>
</table>
<!-- Product/Service Table -->
<table>
<tr>
<th style="width: 50%;">ÜRÜN / HİZMET</th>
<th style="width: 10%;">MİKTAR</th>
<th style="width: 20%;">B.FİYAT</th>
<th style="width: 20%;">TOPLAM TUTAR</th>
</tr>
{{table_rows1}}
{{table_rows2}}
</table>
<!-- Total Row -->
<table style="width: 100%; border-collapse: collapse; margin-bottom: 20px;">
<tr>
<td style="font-size: 12px; font-style: italic; font-weight: normal; text-align: left; border: none;">
Fiyatlarımıza KDV dahil değildir
</td>
<td style="text-align: right; border: none; padding-right: 120px;">
<strong>GENEL TOPLAM: {{grand_total}} </strong>
</td>
</tr>
</table>
<!-- Technician Notes -->
<table>
<tr>
<th colspan="2">TEKNİSYEN AÇIKLAMALARI</th>
</tr>
<tr>
<td colspan="2">{{user_notes}} </td>
</tr>
</table>
<!-- Signatures -->
<table>
<tr>
<th>SERVİS TEKNİSYENİ İMZA / KAŞE</th>
<th>MÜŞTERİ İMZA / KAŞE</th>
</tr>
<tr>
<td>
<img src="{{image_usersignature}}" alt="Teknisyen İmza" style="max-height: 80px;">
</td>
<td>
<img src="{{image_cussignature}}" alt="Müşteri İmza" style="max-height: 80px;">
</td>
</tr>
</table>
<!-- Work Order Images -->
{{image_rows}}
</body>
</html>
script
“```”
At the bottom {{image_rows}} i am intending to show all the images
Edit your message and add
```html
at the beginning. And “```” at the end
You can use the JavaScript I gave you and use that column in your template to replace {{image_rows}}.
Ask your chat GPT prompt to make it fit in your existing HTML code. I am sure it will make a beautiful container for the images.
Show me what it gives you 
it is very late night here in my country (2:30 AM) Tomorrow morning i will try again and let you know.
Thanks a lot for your time
You can ping me anytime!
There are also a lot of people here to help in this wonderful community.
1 Like
Hi Maxime,
I cannot thank you enough for your help - you truly saved my day! Your code worked perfectly; I only needed to add a bit more padding on both sides.
Everything else functioned exactly as expected.
2 Likes
