# PDF automatic Generation **URL:** \ **Category:** Developer\ **Tags:** custom-widgets\ **Created:** [August 29, 2022, 2:27pm UTC](https://community.tulip.co/t/pdf-automatic-generation/6198 "2022-08-29T14:27:09Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![FahdERM](https://avatars.discourse-cdn.com/v4/letter/f/ce7236/32.png) [@FahdERM](https://community.tulip.co/u/FahdERM)\ **Post date:** [August 29, 2022, 2:27pm UTC](https://community.tulip.co/t/pdf-automatic-generation/6198/1 "2022-08-29T14:27:09Z")
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, ---
**Author:** ![Pete\_Hartnett](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tulip.co/pete_hartnett/32/3678_2.png) [@Pete\_Hartnett](https://community.tulip.co/u/Pete_Hartnett)\ **Post date:** [August 29, 2022, 2:38pm UTC](https://community.tulip.co/t/pdf-automatic-generation/6198/2 "2022-08-29T14:38:19Z")
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](https://community.tulip.co/t/attachment-sendgrid/5893) 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](https://community.tulip.co/t/attachment-sendgrid/5893) 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](https://community.tulip.co/uploads/short-url/bQdrpZH6LD86Mfz4oh2G6gH2zJa.json) (1.9 KB) _NOTE: This widget hasn’t gone through the standard Tulip code review process, use at your own risk_ ---
**Author:** ![FahdERM](https://avatars.discourse-cdn.com/v4/letter/f/ce7236/32.png) [@FahdERM](https://community.tulip.co/u/FahdERM)\ **Post date:** [August 29, 2022, 2:50pm UTC](https://community.tulip.co/t/pdf-automatic-generation/6198/3 "2022-08-29T14:50:28Z")
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, ---
**Author:** ![Pete\_Hartnett](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tulip.co/pete_hartnett/32/3678_2.png) [@Pete\_Hartnett](https://community.tulip.co/u/Pete_Hartnett)\ **Post date:** [August 29, 2022, 2:52pm UTC](https://community.tulip.co/t/pdf-automatic-generation/6198/4 "2022-08-29T14:52:42Z")
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 ---
**Author:** ![FahdERM](https://avatars.discourse-cdn.com/v4/letter/f/ce7236/32.png) [@FahdERM](https://community.tulip.co/u/FahdERM)\ **Post date:** [August 29, 2022, 2:59pm UTC](https://community.tulip.co/t/pdf-automatic-generation/6198/5 "2022-08-29T14:59:59Z")
Hey @Pete_Hartnett, Great. I will test that and keep you informed of the result. Thank you for your help, ---
**Author:** ![FahdERM](https://avatars.discourse-cdn.com/v4/letter/f/ce7236/32.png) [@FahdERM](https://community.tulip.co/u/FahdERM)\ **Post date:** [August 30, 2022, 7:32am UTC](https://community.tulip.co/t/pdf-automatic-generation/6198/6 "2022-08-30T07:32:37Z")
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, ---
**Author:** ![Pete\_Hartnett](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tulip.co/pete_hartnett/32/3678_2.png) [@Pete\_Hartnett](https://community.tulip.co/u/Pete_Hartnett)\ **Post date:** [August 30, 2022, 12:34pm UTC](https://community.tulip.co/t/pdf-automatic-generation/6198/7 "2022-08-30T12:34:21Z")
Hey- Made another iteration of this widget to (hopefully) make its operation more clear. https://fast.wistia.net/embed/iframe/6vuj43r11c 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- ![image](https://us1.discourse-cdn.com/flex020/uploads/agilemfg/original/2X/f/fb1f9d8d977904c7b3c6f1e2c8f92bf4dc8255c5.png) And the app variables- ![image](https://us1.discourse-cdn.com/flex020/uploads/agilemfg/original/2X/9/901052775b6ca545c783b1f07972540f7712d934.png) Does this make more sense? Pete [customWidget-Form V3.json](https://community.tulip.co/uploads/short-url/5VEe7P6SRxfNdxXNJmXqCLAKAWD.json) (1.9 KB) _Same note as before - this widget hasn’t gone through code review, use with caution_ ---
**Author:** ![FahdERM](https://avatars.discourse-cdn.com/v4/letter/f/ce7236/32.png) [@FahdERM](https://community.tulip.co/u/FahdERM)\ **Post date:** [September 2, 2022, 1:20pm UTC](https://community.tulip.co/t/pdf-automatic-generation/6198/8 "2022-09-02T13:20:02Z")
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, ---
**Author:** ![Pete\_Hartnett](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tulip.co/pete_hartnett/32/3678_2.png) [@Pete\_Hartnett](https://community.tulip.co/u/Pete_Hartnett)\ **Post date:** [September 2, 2022, 1:40pm UTC](https://community.tulip.co/t/pdf-automatic-generation/6198/9 "2022-09-02T13:40:26Z")
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` ![image](https://us1.discourse-cdn.com/flex020/uploads/agilemfg/original/2X/2/2b3180201d6fd0838c2e43fcd93fe6ae49f64fdb.png) Pete ---
**Author:** ![FahdERM](https://avatars.discourse-cdn.com/v4/letter/f/ce7236/32.png) [@FahdERM](https://community.tulip.co/u/FahdERM)\ **Post date:** [September 5, 2022, 1:50pm UTC](https://community.tulip.co/t/pdf-automatic-generation/6198/10 "2022-09-05T13:50:40Z")
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, ---
**Author:** ![Pete\_Hartnett](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tulip.co/pete_hartnett/32/3678_2.png) [@Pete\_Hartnett](https://community.tulip.co/u/Pete_Hartnett)\ **Post date:** [September 5, 2022, 2:38pm UTC](https://community.tulip.co/t/pdf-automatic-generation/6198/11 "2022-09-05T14:38:17Z")
Hey @FahdERM - Totally, here is a SO thread that walks through going from base64 to image- > It looks like it is as simple as: ```auto 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 ---
**Author:** ![FahdERM](https://avatars.discourse-cdn.com/v4/letter/f/ce7236/32.png) [@FahdERM](https://community.tulip.co/u/FahdERM)\ **Post date:** [September 7, 2022, 12:16pm UTC](https://community.tulip.co/t/pdf-automatic-generation/6198/12 "2022-09-07T12:16:01Z")
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, ---
**Author:** ![Pete\_Hartnett](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tulip.co/pete_hartnett/32/3678_2.png) [@Pete\_Hartnett](https://community.tulip.co/u/Pete_Hartnett)\ **Post date:** [September 7, 2022, 12:22pm UTC](https://community.tulip.co/t/pdf-automatic-generation/6198/13 "2022-09-07T12:22:50Z")
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. ![image](https://us1.discourse-cdn.com/flex020/uploads/agilemfg/original/2X/a/ac9071155c51b74a6359fb76e718152210bf7564.png) If I did want to send this in an email. I would just pass the value of that b64 prop to a connector. ![image](https://us1.discourse-cdn.com/flex020/uploads/agilemfg/original/2X/0/0c7dd0f6c22f0babce0c6e57865ebf30296623f6.png) If I wanted to save that. I would pass it to a savebase64 custom widget. Pete ---
**Author:** ![FahdERM](https://avatars.discourse-cdn.com/v4/letter/f/ce7236/32.png) [@FahdERM](https://community.tulip.co/u/FahdERM)\ **Post date:** [September 7, 2022, 12:25pm UTC](https://community.tulip.co/t/pdf-automatic-generation/6198/14 "2022-09-07T12:25:55Z")
Hey @Pete_Hartnett, By my post i ment this button trigger : ![image](https://us1.discourse-cdn.com/flex020/uploads/agilemfg/original/2X/d/d400068ceb3b7229490910bf29b8236726dbf58b.png) thanks, ---
**Author:** ![Pete\_Hartnett](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tulip.co/pete_hartnett/32/3678_2.png) [@Pete\_Hartnett](https://community.tulip.co/u/Pete_Hartnett)\ **Post date:** [September 7, 2022, 12:27pm UTC](https://community.tulip.co/t/pdf-automatic-generation/6198/15 "2022-09-07T12:27:36Z")
Whoops! Here it is! ![image](https://us1.discourse-cdn.com/flex020/uploads/agilemfg/original/2X/e/e648c57587b277089b69492760a7584d107acf09.png) ---
**Author:** ![FahdERM](https://avatars.discourse-cdn.com/v4/letter/f/ce7236/32.png) [@FahdERM](https://community.tulip.co/u/FahdERM)\ **Post date:** [February 1, 2023, 2:02pm UTC](https://community.tulip.co/t/pdf-automatic-generation/6198/19 "2023-02-01T14:02:23Z")
Hi @Pete_Hartnett , is it possible, using this widget, to create a table on the document and send it using sendGrid connector? ![image](https://us1.discourse-cdn.com/flex020/uploads/agilemfg/original/2X/3/3b08c6e158446fe3983b9bf828b0dce1ac20c5a0.png) What you see here is a step that i have created and i have to send using sendGrid. Knowing that we can’t send stpes, i have to, first generate the document using your widget and after that send it by Email. But i think i can’t do that using this widget because if so it will take too much to define every X and Y of each data. Do you have idea on how i can generate the document and send it using SendGrid? thanks in advance, ---
**Author:** ![ChrisF](https://avatars.discourse-cdn.com/v4/letter/c/d6d6ee/32.png) [@ChrisF](https://community.tulip.co/u/ChrisF)\ **Post date:** [November 22, 2023, 11:41am UTC](https://community.tulip.co/t/pdf-automatic-generation/6198/20 "2023-11-22T11:41:32Z")
Hi Pete, I would like to test this widget, but I’m getting errors while importing: Error while importing. Please contact Tulip support. Can you help? Regards Chris ---
**Author:** ![ChrisF](https://avatars.discourse-cdn.com/v4/letter/c/d6d6ee/32.png) [@ChrisF](https://community.tulip.co/u/ChrisF)\ **Post date:** [December 8, 2023, 11:26am UTC](https://community.tulip.co/t/pdf-automatic-generation/6198/21 "2023-12-08T11:26:33Z")
@Pete_Hartnett ??? Any idea? ---
**Author:** ![Pete\_Hartnett](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tulip.co/pete_hartnett/32/3678_2.png) [@Pete\_Hartnett](https://community.tulip.co/u/Pete_Hartnett)\ **Post date:** [December 8, 2023, 1:24pm UTC](https://community.tulip.co/t/pdf-automatic-generation/6198/22 "2023-12-08T13:24:21Z")
Hey @ChrisF Thanks for the patience, didn’t see your previous message. Attached is the r267 version of this widget. Pete [customWidget-Form V3.json](https://community.tulip.co/uploads/short-url/xmuQfq276BvrY96qEl2VW05eIkc.json) (1.9 KB) ---
**Author:** ![ChrisF](https://avatars.discourse-cdn.com/v4/letter/c/d6d6ee/32.png) [@ChrisF](https://community.tulip.co/u/ChrisF)\ **Post date:** [December 11, 2023, 9:46am UTC](https://community.tulip.co/t/pdf-automatic-generation/6198/23 "2023-12-11T09:46:16Z")
@Pete_Hartnett tyvm for sharing this version - I was able to import it without any problems. Regards Chris