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

oberon
Thu, 05 Aug 2021 23:17:02 +0000
Tutorials and DIY Guides

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

Staff Edit | For DND, this link can be used instead

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(
' \n' +
' \n' +
' '+ item.produit + ' \n'+
' '+ item.quantite + ' \n'+
' '+ item.prix + ' \n' +
' \n'+
' \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










<div id="m_8514590629868396670wrapper" dir="ltr" style="background-color: #<?= json.style.factureBackgroundColor;?>; margin: 0; padding: 70px 0; width: 100%;">





<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 ?>"/>






<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">



<?= json.labels.factureHeaderTitle;?><?= json.labels.factureHeaderDescription;?>











<td id="m_8514590629868396670body_content" style="background-color: <?= json.style.factureBodyColor;?>;" valign="top">





<?= json.labels.factureBodyTop;?>
<?= json.labels.BodyBillNumber;?><?= json.labels.factureDate; ?>




<?= json.table.product.factureColumnProduct1;?>
<?= json.table.product.factureColumnProduct2;?>
<?= json.table.product.factureColumnProduct3;?>



<?!= productList ?>



<?= json.table.payment.factureRowPayment1;?>
<?= json.table.payment.factureRowPaymentContent1;?>


<?= json.table.payment.factureRowPayment2;?>
<?= json.table.payment.factureRowPaymentContent2;?>








<?= json.table.address.factureColumnAddress1;?>
<?= json.table.address.factureColumnAddressContent1;?>

<?= json.table.address.factureColumnAddress2;?>
<?= json.table.address.factureColumnAddressContent2;?>



<?= json.labels.factureGreetings;?>

























<?= json.labels.factureBottomMessage; ?>





















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




// when we get a message from the app, display it on the page
ThunkableWebviewerExtension.receiveMessage(function(message) {
 document.body.innerHTML = message;
});

Facture





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

4 posts - 3 participants