Create Invoice (Display on Thunkable live,Send by email with pdf attachment)

oberon · August 5, 2021, 11:17pm

Hello after many research I finally succeeded in creating dynamic invoices in pdf and manage the sending.

Thanks @cttricks for his tutorial which helped me a lot.

We will use
https://www.google.com/script/start/

https://x.thunkable.com/

Project : REMIX

1.Launch https://www.google.com/script/start/ and create a new project

2. Paste this code on your code.gs

function doPost(e) {


    var productList = [];
    var json = (JSON.parse(e.parameters.facture));
    var products = json.table.product.products;

   var item;

for (var item_index in products) {
  item = products[item_index];
  productList.push(
'<tbody>\n' + 
'<tr style="height: 68px;">\n' +
'<td style="color: #636363; border: 1px solid #e5e5e5; padding: 12px; text-align: left; vertical-align: middle; font-family: '+"'Helvetica Neue'"+', Helvetica, Roboto, Arial, sans-serif;overflow-wrap: break-word; height: 68px; width: 25.4%;">'+ item.produit + '</td>\n'+ 
'<td style="color: #636363; border: 1px solid #e5e5e5; padding: 12px; text-align: left; vertical-align: middle; font-family: '+"'Helvetica Neue'"+', Helvetica, Roboto, Arial, sans-serif; height: 68px; width: 28.4%;">'+ item.quantite + '</td>\n'+ 
'<td style="color: #636363; border: 1px solid #e5e5e5; padding: 12px; text-align: left; vertical-align: middle; font-family: '+"'Helvetica Neue'"+', Helvetica, Roboto, Arial, sans-serif; height: 68px; width: 46%;">'+ item.prix + '</td>\n' +
'</tr>\n'+
'</tbody>\n');

}
if(json.mail.pdf.pdfSend == true) 
   {
  var imgb64 ="";
  imgb64 = HtmlService.createTemplateFromFile('imgb64');
  imgb64 = imgb64.evaluate().getContent();
   }
  var html =     HtmlService.createTemplateFromFile('EmailTemplate');
  html.json = json;
  html.productList = productList.join('');
  var template = html.evaluate().getContent();


 if(json.mail.send.sendEmail == true) 
   {
  if(json.mail.pdf.pdfSend == true) 
   {
    var template2 = template;
    template2= template2.replace(json.style.factureHeaderImg,imgb64);
    var blob = Utilities.newBlob(template2, "text/html", "text.html");
    blob.setName(json.mail.pdf.pdfName + ".pdf");
    var pdf = blob.getAs("application/pdf");


        MailApp.sendEmail({
   to: json.mail.send.to,
   subject: json.mail.send.subject,
   htmlBody:  template, 
   attachments: [pdf]
 
   });
   }
   else{
             MailApp.sendEmail({
   to: json.mail.send.to,
   subject: json.mail.send.subject,
   htmlBody:  template
 
   });
   }
   }
    return ContentService.createTextOutput(template)
 
}

3. Creates 2 html files

4.

a) Change the name of the first html file to “EmailTemplate” and copy this code

<!DOCTYPE html>
<html>
  <meta charset="utf-8">
  <head>
    <base target="_top">
  </head>
  <body>
    <div class="">
<div style="padding: 0;">
<div id="m_8514590629868396670wrapper" dir="ltr" style="background-color: #<?= json.style.factureBackgroundColor;?>; margin: 0; padding: 70px 0; width: 100%;">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top">
<div id="m_8514590629868396670template_header_image">
<p style="margin-top: 0;"><img class="CToWUd" style="border: none; display: inline-block; font-size: 14px; font-weight: bold; height: auto; outline: none; text-decoration: none; text-transform: capitalize; vertical-align: middle; height: 128px; width: 128px; max-width: <?= json.style.factureSizeImage;?>; margin-left: 0; margin-right: 0;" src="<?= json.style.factureHeaderImg ?>"/></p>
</div>

<table id="m_8514590629868396670template_container" style="background-color: #ffffff; border: 1px solid #dedede; border-radius: 3px;" border="0" width="600" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top">
<table id="m_8514590629868396670template_header" style="background-color: <?= json.style.factureHeaderColor;?>; color: #00000; border-bottom: 0; font-weight: bold; line-height: 100%; vertical-align: middle; font-family: 'Helvetica Neue',Helvetica,Roboto,Arial,sans-serif; border-radius: 3px 3px 0 0;" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td id="m_8514590629868396670header_wrapper" style="padding: 36px 48px; display: block;">
<h1 style="font-family: 'Helvetica Neue',Helvetica,Roboto,Arial,sans-serif; font-size: 30px; font-weight: 300; line-height: 150%; margin: 0; text-align: left; color: #00000; background-color: inherit;"> <?= json.labels.factureHeaderTitle;?><?= json.labels.factureHeaderDescription;?></h1>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table id="m_8514590629868396670template_body" border="0" width="600" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td id="m_8514590629868396670body_content" style="background-color: <?= json.style.factureBodyColor;?>;" valign="top">
<table border="0" width="100%" cellspacing="0" cellpadding="20">
<tbody>
<tr>
<td style="padding: 0px 48px 32px;" valign="top">
<div id="m_8514590629868396670body_content_inner" style="color: #636363; font-family: 'Helvetica Neue',Helvetica,Roboto,Arial,sans-serif; font-size: 14px; line-height: 150%; text-align: left;">
<p style="margin: 0 0 16px;"><?= json.labels.factureBodyTop;?></p>
<h2 style="color: #000; display: block; font-family: 'Helvetica Neue',Helvetica,Roboto,Arial,sans-serif; font-size: 18px; font-weight: bold; line-height: 130%; margin: 0 0 18px; text-align: left;"><a style="font-weight: normal; text-decoration: underline; color: #202020;" target="_blank" rel="noopener" data-saferedirecturl=""><?= json.labels.BodyBillNumber;?></a><?= json.labels.factureDate; ?></h2>
<div style="margin-bottom: 40px;">
<table style="color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; width: 100%; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; height: 321px;" border="1" cellspacing="0" cellpadding="6">
<thead>
<tr style="height: 46px;">
<th style="color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left; height: 46px; width: 25.4%;" scope="col"><?= json.table.product.factureColumnProduct1;?></th>
<th style="color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left; height: 46px; width: 28.4%;" scope="col"><?= json.table.product.factureColumnProduct2;?></th>
<th style="color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left; height: 46px; width: 46%;" scope="col"><?= json.table.product.factureColumnProduct3;?></th>
</tr>
</thead>

<?!= productList ?>

<tfoot>
<tr style="height: 67px;">
<th style="color: #636363; border-width: 4px 1px 1px; border-style: solid; border-color: #e5e5e5; border-image: initial; vertical-align: middle; padding: 12px; text-align: left; height: 47px; width: 53.8%;" colspan="2" scope="row"><?= json.table.payment.factureRowPayment1;?></th>
<td style="color: #636363; border-width: 4px 1px 1px; border-style: solid; border-color: #e5e5e5; border-image: initial; vertical-align: middle; padding: 12px; text-align: left; height: 47px; width: 46%;"><?= json.table.payment.factureRowPaymentContent1;?></td>
</tr>
<tr style="height: 46px;">
<th style="color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left; height: 46px; width: 53.8%;" colspan="2" scope="row"><?= json.table.payment.factureRowPayment2;?></th>
<td style="color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left; height: 46px; width: 46%;"><?= json.table.payment.factureRowPaymentContent2;?></td>
</tr>
</tfoot>
</table>
</div>
<table id="m_8514590629868396670addresses" style="width: 100%; vertical-align: top; margin-bottom: 40px; padding: 0;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="text-align: left; font-family: 'Helvetica Neue',Helvetica,Roboto,Arial,sans-serif; border: 0; padding: 0;" valign="top" width="50%">
<h2 style="color: #636363; display: block; font-family: 'Helvetica Neue',Helvetica,Roboto,Arial,sans-serif; font-size: 18px; font-weight: bold; line-height: 130%; margin: 0 0 18px; text-align: left;"><?= json.table.address.factureColumnAddress1;?></h2>
<address style="padding: 12px; color: #636363; border: 1px solid #e5e5e5;"><?= json.table.address.factureColumnAddressContent1;?></address></td>
<td style="text-align: left; font-family: 'Helvetica Neue',Helvetica,Roboto,Arial,sans-serif; padding: 0;" valign="top" width="50%">
<h2 style="color: #636363; display: block; font-family: 'Helvetica Neue',Helvetica,Roboto,Arial,sans-serif; font-size: 18px; font-weight: bold; line-height: 130%; margin: 0 0 18px; text-align: left;"><?= json.table.address.factureColumnAddress2;?></h2>
<address style="padding: 12px; color: #636363; border: 1px solid #e5e5e5;"><?= json.table.address.factureColumnAddressContent2;?></address></td>
</tr>
</tbody>
</table>
<p style="margin: 0 0 16px;"><?= json.labels.factureGreetings;?></p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table id="m_8514590629868396670template_footer" border="0" width="600" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td style="padding: 0; border-radius: 6px;" valign="top">
<table border="0" width="100%" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td id="m_8514590629868396670credit" style="border-radius: 6px; border: 0; color: #8a8a8a; font-family: 'Helvetica Neue',Helvetica,Roboto,Arial,sans-serif; font-size: 12px; line-height: 150%; text-align: center; padding: 24px 0;" colspan="2" valign="middle">
<p style="margin: 0 0 16px;"><?= json.labels.factureBottomMessage; ?></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

</div>

</div>

</div>
  </body>
</html>

b) Change the name of the second html file to “imgb64” and copy this code

data:image/png;base64, (YOUR BASE64 IMAGE)

Convert your image to base64 there are many converters on google

5. Deploy your script, Deploy > Webapp > access > everyone

6.Allow access until you get a URL like this, In the project define the url of the api component with this url copy

https://script.google.com/macros/s/AKfycby2cv8GDE0My0dfgdfgXBHHguJwxQJ5UK0r6_ty3xfUqRMdfgdfgwegdfgaNQJ5PjfZyg/exec

7.Create a file index.html on your desktop and copy this code
Drag it into thunkable and set the web viewer url to index.html

<html><head>
<script src="https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js" type="text/javascript"></script>
<script type="text/javascript">
// when we get a message from the app, display it on the page
ThunkableWebviewerExtension.receiveMessage(function(message) {
 document.body.innerHTML = message;
});
</script>
<title>Facture</title>
</head>
<body>
</body>
</html>

8. Modify the data with your variables and you’re done

9. Test

Browser Gmail view (html)

Browser pdf view

I hope I’ve made myself clear, don’t hesitate to tell me if I’ve made mistakes or if you need information

jared · August 6, 2021, 12:27am

This is really awesome work I can’t wait to test it out

oberon · August 17, 2021, 11:33am

I hope it will be useful to you, with pleasure

Topic		Replies	Views
Work report and print pdf Questions about Thunkable beginner	3	728	February 17, 2022
Invoicing creating Questions about Thunkable	6	607	November 8, 2024
Create and email a pdf form Questions about Thunkable	6	249	August 22, 2023
How do I convert table data to a file PDF? Questions about Thunkable	4	395	June 28, 2023
Create a PDF from app Questions about Thunkable pdf	30	3301	November 8, 2024

Create Invoice (Display on Thunkable live,Send by email with pdf attachment)

Related topics