PDF automatic Generation

Hey Guys,
I am working on a project where the customer have to, using a specific step, to join datas to a step using variables, to generate a PDF automatically usning triggers and to finally send this pdf using connectors. IS it possible to do so or not ?
I am using SendGrid to send External Emails.
thanks,

Hey @FahdERM -

Totally possible. A few different approaches to this:

  1. Create a dedicated document step that is formatted like you want your PDF.
  2. Use the Print step trigger action to save the step to a PDF document
  3. Send that PDF out with a custom widget to encode the attachment as base64. Thread here:
    Attachment SendGRid

Second approach (tricker to build, better user experience):

  1. A custom widget where the PDF is created. You pass it the text, and x and y locations, and it returns the b64 encoded image. An example of this is attached.
  2. Send the b64 from this widget to the sendgrid connector linked above.
    Attachment SendGRid

The second approach is way easier on the user side, because they don’t need to save to a specific location, then refind that file when sending it, but either should work.

Pete
customWidget-Form V2 (1).json (1.9 KB)
NOTE: This widget hasn’t gone through the standard Tulip code review process, use at your own risk

1 Like

Hey @Pete_Hartnett,
Thank you for your answer but for the first one, the user has, obligatory, to save the pdf File using the windows dialog box right?
What my customer want to do is to generate the pdf using the formatted step and to send it just by pressing one button and without having the need to save the document on the computer.
thanks,

Hey @FahdERM -

Right. So if that is the case I would definitely use the second approach. A little more involved to get setup but a better operator experience.

Pete

Hey @Pete_Hartnett,
Great. I will test that and keep you informed of the result.
Thank you for your help,

Hey @Pete_Hartnett,
I tried to test this widget today but i think it didn’t work correctly for me. An other thing, i think i can’t add variables to the pdf content right? Because the need of the customer is to be able to generate the PDF using the app variables and after that to be able to send it. Is it also possible to generate the pdf, to send it and to save it on the local computer using a Tulip button and not the widget button. I mean is it possible to do this using just a Boolean variable that have to be on True to execute the widget trigger?
thanks,

Hey-

Made another iteration of this widget to (hopefully) make its operation more clear.

In short, this widget takes an array of objects, each of those objects needs:

  • Text - the text to be displayed
  • X - The x position of the text, from the top left corner
  • y - The y position of the text, from the top left corner

This widget will render that text on the image, and update a b64 prop. This b64 prop can/should be stored to a variable, and then sent to SendGrid.

Here is the widget configuration-

And the app variables-

Does this make more sense?
Pete

customWidget-Form V3.json (1.9 KB)
Same note as before - this widget hasn’t gone through code review, use with caution

Hey @Pete_Hartnett,
Thank you for your answer but i can’t get the image in the widget i don’t know why. Despite the image URL, i get white page in my app.
Any ideas why?
thanks,

Hey @FahdERM -

The IMG URL Prop needs to be set to a web hosted link to your form. the example I am using is:
https://i.ibb.co/XLp9RrW/kaizen-audit.jpg

Pete

Hey @Pete_Hartnett,
Thank you for these answers. Is it possible to convert this B64 file to PNG or JPEG and to also save it automatically with the Email sending on the User computer?
thank you for your help,

Hey @FahdERM -

Totally, here is a SO thread that walks through going from base64 to image-

It looks like it is as simple as:

var image = new Image();
image.src = 'data:image/png;base64,iVBORw0K...';

From here a button could trigger users to select a location to save these files.

Pete

Hey @Pete_Hartnett,
Hope you are doing well.
Can you please share with me your add to form trigger in which (i suppose) you are storing the data to be added in the array of objects.
thanks,

Hey @FahdERM -

In the most recent version I shared, there arent any triggers on the widget itself. The widget just continually updates the b64 prop with the current base64 for the image.

If I did want to send this in an email. I would just pass the value of that b64 prop to a connector.

If I wanted to save that. I would pass it to a savebase64 custom widget.

Pete

Hey @Pete_Hartnett,
By my post i ment this button trigger :


thanks,

Whoops! Here it is!

Okay okay.
Thanks @Pete_Hartnett,
Do you have an idea why it won’t show the All_Fields_V2-1 variable in this case?


image

thanks,