Javascript trigger action for form fields created using PDFTron WebViewer FormBuilder UI

Question

I am currently evaluating WebViewer version 5.2.8. I need to set some javascript function/code as an action for triggers like calculate trigger, format trigger and keystroke trigger through the WebViewer UI. Please help me on how to configure javascript code for a form field trigger in WebViewer UI.

Thanks in advance,

Syed

Andy Andy · Accepted Answer · 2020-01-03T21:22:30

Sorry for the late response!

You will have to create the UI components yourself that will take in the JavaScript code. You can do something similar to what the FormBuilder demo does with just HTML and JavaScript. However, it may be better to clone the open source UI and add your own components.

As for setting the action, I would recommend trying out version 6.0 instead as there is better support for widgets and form fields in that version. However, we are investigating a bug with the field actions that will throw an error on downloading the document. You should be able to use this code to get it working first:

    docViewer.on('annotationsLoaded', () => {
      const annotations = annotManager.getAnnotationsList();
      annotations.forEach(annot => {
        const action = new instance.Actions.JavaScript({ javascript: 'alert("Hello World!")' });
        // C cor Calculate, and F for Format
        annot.addAction('K', action);
      });
    });

Once the bug has been dealt with, you should be able to download the document properly.

Otherwise, you will have to use the full API and that may be less than ideal. It would be a bit more complicated with the full API and I would not recommend it if the above feature will be fixed soon.

Let me know if this helps or if you need more information about using the full API to accomplish this!

EDIT

Here is the code to do it with the full API! Since the full API works at a low level and very closely to the PDF specification, it does take a lot more to make it work. You do still have to update the annotations with the code I provided before which I will include again.


    docViewer.on('documentLoaded', async () => {
      // This part requires the full API: https://www.pdftron.com/documentation/web/guides/full-api/setup/
      const doc = docViewer.getDocument();
      // Get document from worker
      const pdfDoc = await doc.getPDFDoc();

      const pageItr = await pdfDoc.getPageIterator();

      while (await pageItr.hasNext()) {
        const page = await pageItr.current();
        // Note: this is a PDF array, not a JS array
        const annots = await page.getAnnots();
        const numAnnots = await page.getNumAnnots();

        for (let i = 0; i < numAnnots; i++) {
          const annot = await annots.getAt(i);

          const subtypeDict = await annot.findObj('Subtype');
          const subtype = await subtypeDict.getName();

          const actions = await annot.findObj('AA');

          // Check to make sure the annot is of type Widget
          if (subtype === 'Widget') {
            // Create the additional actions dictionary if it does not exist
            if (!actions) {
              actions = await annot.putDict('AA');
            }

            let calculate = await actions.findObj('C');

            // Create the calculate action (C) if it does not exist
            if (!calculate) {
              calculate = await actions.putDict('C');
              await Promise.all([calculate.putName('S', 'JavaScript'), calculate.putString('JS', 'app.alert("Hello World!")')]);
            }

            // Repeat for keystroke (K) and format (F)
          }
        }

        pageItr.next();
      }
    });

    docViewer.on('annotationsLoaded', () => {
      const annotations = annotManager.getAnnotationsList();
      annotations.forEach(annot => {
        const action = new instance.Actions.JavaScript({ javascript: 'app.alert("Hello World!")' });
        // K for Keystroke, and F for Format
        annot.addAction('C', action);
      });
    });

You can probably put them together under the documentLoaded event but once the fix is ready, you can delete the part using the full API.

Javascript trigger action for form fields created using PDFTron WebViewer FormBuilder UI

1 Answers