[Reactive Print PDF Button] How to export page to pdf THEN save to Google Drive automatically?
Forge component by Gianluca Bracca
Application Type
Mobile
Service Studio Version
11.10.10 (Build 38553)

Hi all,

What's the best way to export page to PDF then save / send it to Google Drive automatically, without user intervention or even user ever knowing?

I already know how to save PDF to client device (using Reactive PDF Print button) and I already have Google Drive Connector installed. However I don't know how to automatically send the resulting file to Google Drive without user interaction.

Application is about recipe research/development, and I want every recipe tried to be automatically backed up to Google drive, even when the trial fails and the researcher does not print/discuss. It also doubles as a backup.

Thanks in advance. Really appreciate the help.



Solution

Hello Takada,

Try using this forge component https://www.outsystems.com/forge/component-overview/364/google-drive-connector

Basically, within your existing action; The Binary Data output of your PDF Generator is something you will just toss to to your google drive using that forge component mentioned in this comment.

Hope that helps.

-Jose

Hi Jose,

Thanks for the information, I kinda get the direction you said. I'm certainly going to try more things in that direction. However, this starts to get into JavaScript and I am not a developer (at all). I am kinda stuck at this code:

html2pdf().from(element).toPdf().output('datauristring').then(function (pdfAsString) {
console.log(pdfAsString);

Could you help me a little bit more on how should I toss this "pdfAsString" to the google drive? or Maybe on how to get that "pdfAsString" to an Outsystems local/input/output variable (that I know how to handle a little bit better) ? 

I am sorry if the question is foolish, I am trying to learn javascript little by little but still on the very early stages :D

Again, thanks a lot for the help. Really appreciate it.


Hello Takada,

No worries, we've all been there. I'm also not a JS expert. Don't get me wrong, I haven't used that component you are using that's why I gave a generic answer to just mention that it will output a Binary Data (because that's the common process in other forge components).

I'm guessing that you are using this component for your application is in Reactive.

I'm not familiar with this component but upon checking, it's a single js code that exports the content of whatever Container is passed on the parameter.


I can suggest another component that might be suitable for your current need, given that you and I are not JS experts.

https://www.outsystems.com/forge/component-overview/7667/pdf-generator-web

With that component, it has Client Actions such as PDFGetData. With the PDF Get Data it will return a Text Output which is Base64 so simply just use the Base64 to Binary Converter and with the Binary Data Output, you can then use it for your google drive.

Below is a screenshot for additional details.

Regards,

-Jose

Hi guys,


it is quite interesting your discussion.

Before making my component, I had tried what you point out too (PDF Generator Web), but without success: complicated life cycle, results not in line with what I was looking for.

Regarding the request to save the output on Google Drive, I think the process is a bit trickly, as the rendering is done client side and not on server.

You could intercept the output of the component instead of saving it: this however requires a change to the Javascript that you can do by cloning the module.

In this discussion you might find a way to get the content instead of saving it: https://github.com/eKoopmans/html2pdf.js/issues/271



Good luck!
Gianluca

Hi @Jose Roberto Littaua  @Gianluca Bracca ,

Thanks for the pointers.. I am still trying all options, both with the component and the javascript. I think I'm getting closer to my solution, we'll see in couple days if I can find the best way to do this :D

Hi @Jose Roberto Littaua @Gianluca Bracca 

Finally got it to work ! I read carefully what you both told me, almost word by word  :D . 

So basically, I use the component @Gianluca Bracca made, change the javascript (by cloning the module) to intercept the Base64 binary output. Then in the javascript I push the resulting Base64 binary to another client action, which then I use the component @Jose Roberto Littaua  mentioned (pdf-generator-web) to change from Base64 to Binary. Then I toss the binary file to the Google Drive Connector Reactive component to create the file inside my Google drive.

In addition, I use an OnReady client action to trigger another javascript (setTimeout() ) to trigger that whole thing. So now I have an automated process where when someone hit "save" from another page, it will directly go to an intermediate screen where all data is collected, presented in a nice way, and where the pdf is being built, then tossed the result to Google Drive, then returns to a "home" page. The whole thing from "save" to "home" took about 8 seconds until it appears in my Google Drive. Pretty good for what we need to do !

Considering I'm not a developer and a beginner in Outsystems platform, maybe some people have other (maybe faster, more effective) solutions, but this is already perfect for me.

Thank you both for your pointers ! I basically use all those things you guys mentioned. I am so happy with this !


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.