Event for handling submit form programmatically

[Wil van Antwerpen]

Hi,

We want to be able to handle data entered in PDF's with a form programmatically.
When you load such a pdf in the PdfViewer, the PDF Viewer control helpfully shows a "Submit Form" button in the toolbar.
If you click on that button, it will start a json download with the data you just entered in the form.
That's neat, but we would very much like that it doesn't start a download, but instead allows us to load that data directly into the database.

So far I have not been able to catch the event for when the user clicks that button. Somehow the toolbarClick event isn't triggered and where one would expect a downloadStart event to be triggered, that one is only triggered when you press the save button. I've tried a few other events from the documentation API in the mean time, but no success.

There's this question: https://www.syncfusion.com/forums/177998/get-dataformfields-in-json-format  which looks promising. But I wonder if there's really no way to use the existing button in the toolbar?

Ideas welcome, I must be overlooking something simple.

Thanks!

--
Wil

[Chinnamunia Karthik Chinna Thambi]

Hi Wil,

We have the exportFormFieldsAsObject method that allows to you can obtain the form field data without JSON download. We have provided the code snippet and sample for this functionality using customize toolbar.

Code snippet:

 

pdfviewer.toolbarClick = function (args) {

    if (args.item && args.item.id === 'exportFields') {

        debugger;

        pdfviewer.exportFormFieldsAsObject().then(function (value) {

            console.log(value);

        });

    }

};

 

function CheckExportBtnEnable() {

    var fields = pdfviewer.formFieldCollections;

    let toolbar = document.getElementById('pdfViewer_toolbarContainer')

        .ej2_instances[0];

    toolbar.items[0].disabled = fields.length ? false : true;

}

Sample:  https://stackblitz.com/edit/7ztjvr-jpyfdo?file=index.js,index.html

Steps to get the form field values without JSON download:

• Run the sample
• Load the form field document. Now, the ExportFormFields button is enabled.
• Fill the form fields.
• Click the ExportFormFields button. Now, you can get the form fields value in the console and then you can save this data into the database on your end.

[Wil van Antwerpen]

Hi Chinnamunia,

Meanwhile I found that exportStart is triggered for the original "Submit form" button. But as at that time there is no data in the arguments it doesn't work for this. Trying to call exportFormFieldsAsObject from that event will cause a recursive loop as it triggers the exportStart by itself. So that was a no go.

Your reply also confirms that there is no event that I can use for the original "Submit Form" button that's in the toolbar.

Now basically that's fine. Having a custom toolbar button could work for this if we remove the Submit Form button.

The problem I currently have is that when I try to load another pdf from the most recent version of the control (24.2.9) that it never loads. See also:  https://www.syncfusion.com/forums/187222/setting-documentpath-before-load-no-longer-lets-you-load-the-pdf 
Note that the workaround mentioned there sadly does not work in my live project, load is broken for me.

Whereas the custom toolbar item logic you present as a solution apparently does not work or even exist in SyncFusion 23.1.9 .. which I was using now.

So sadly I'm no further to a solution as neither works for this.

Thanks for your attention.

--
Wil

[Chinnamunia Karthik Chinna Thambi]

Hi Wil,

Please find the details.

Event for handling submit form programmatically

When the submit button is clicked, it triggers the exportStart event and then the exportSuccess event is triggered upon completion of the export process. We have provided the sample to export the form fields data without JSON download.   Code snippet:     let cancelExport = false;   pdfviewer.exportStart = function (args) {   if(!cancelExport){     cancelExport = true;     args.cancel = true;     pdfviewer.exportFormFieldsAsObject().then(function (value) {       console.log(value);       cancelExport = false;     });     } };   pdfviewer.exportSuccess = function (args) {   console.log(args); }; Sample:  https://stackblitz.com/edit/7ztjvr-dkopni?file=index.js,index.html Steps to export the form fields:   Run the sample. Click the Submit button. This triggers the exportStart event, within this event, we cancel the default JSON file download using args.cancel = true; Now, we utilize the exportFormFieldsAsObject method to export the form fields as object. Subsequently, the exportSuccess event is triggered.

Regarding the "Setting documentPath before load no longer lets you load the pdf" issue.

Kindly follow the respective ticket for further updates on this.

Kindly try this and let us know, if you have any concerns.

[Wil van Antwerpen]

Sorry for the delay, finally got a chance to try this out.

This works very very nicely.
Well done!

Thank you!

--
Wil

[Chinnamunia Karthik Chinna Thambi]

Hi Wil,

We are glad to know that the reported query was resolved on your end. So, we are closing this ticket.