/** * Instantiate JSFiller object */ const JSFiller = new JSFillerSDKClient.SDK();
/** * Then, initialize it by listeners: * * .on('state', handleState) * - Will be called when the application changes state * - Possible states: `init`, `opening`, `ready`, `destroyed` * * .on('event', handleEvent) * - Will be called when an event occurs in the application * - Possible events: `acted`, `done` * * .on('error', handleError) * - Will be called when an error occurs in the application * - Possible errors: `APP_DOMAIN_ERROR`, `APP_IS_NOT_ACTIVE`, `QUOTA_HAS_ENDED` * * More information in docs: https://... and in the code below */
JSFiller.on('state', function(state) { switch (state.type) { case 'init': // Use it for the first type of application: JSFiller.loadPreparedDocument(); // Accessible only in 'INIT' state // or // Use for second type of application: // JSFiller.loadNewDocument('https://www.irs.gov/pub/irs-pdf/fw9.pdf'); // These methods accessible only in 'init' state break;
case 'opening': // Typical use case for this ???????? break;
case 'ready': // Typical use case for this ???????? break;
case 'destroyed':
// As example you can unload the editor frame or reload it using:
// JSFiller.reload();
break;
}
});
JSFiller.on('event', function(event) {
switch (event.type) {
case "acted":
// Fires every time the user changed the document, as example at this point you can get any data from the editor:
// JSFiller.getAllContent(); // Return A-JSON (all content data)
// and/or
// JSFiller.getFieldsContent(); // Return only pairs 'fieldName': 'fieldValue'
break;
case "done":
/**
* Fires when the user has finished working on the document
* and pressed the "done" button
* Here you can:
* - Save PDF as File:
*/
JSFiller.savePDF({
filename: 'name.pdf', // Default
/** * or * * Print PDF via browser print dialog: */ // JSFiller.printPDF({ // onComplete: function() { // console.log('pdf printed'); // } // });
/** * or * * Get Blob PDF file: */ // JSFiller.getPDFBlob({ // onComplete: function(data) { // console.log('pdf blob: ', data.blob); // } // }); break; } });
/** * But you can add listeners later same way */ JSFiller.on('error', function(error) { switch(error.type) { case "APP_DOMAIN_ERROR": // In case of this error you should verify the domain in application setup page break;
case "APP_IS_NOT_ACTIVE": // In case of this error you should activate you application break;
case "QUOTA_HAS_ENDED": // The quota has ended, contact support please. break;
case "APP_ERROR": // Other errors break; } });
/** * After you can run editors and configure it */ JSFiller.runEditor({ mode: 'main', containerId: 'iframe-container', clientId: '376213244', clientSecret: 'XCaawORZdAkdfeusMWHWv6fhFf9f2GLZjOxX', enforceRequiredFields: false, appearance: { doneButton:{ visible: true, label: 'Done' }, logo:{ visible: true, url: 'https://alwaystp.wpengine.com/wp-content/uploads/2022/02/ATP-Logo.png' }, tools:[ {'text': true}, {'signature': true, 'options': {'type':true, 'draw': true, 'upload':true, 'capture':false }}, {'initials': true, 'options': {'type':true, 'draw':true, 'upload':true, 'capture':false }}, {'date': true}, {'x': true}, {'v': true}, {'o': true}, {'erase': true}, {'highlight': true}, {'blackout': true}, {'textbox': true}, {'arrow': true}, {'line': true}, {'pen': true}, {'sticky': true} ], options:[ {'wizard': true}, {'help': true}, {'search': true}, {'pagesPanel': true} ], advancedOptions:[ {'addFillableFields': true}, {'addWatermark': true} ] } });
/** * Other methods you can use * - JSFiller.hasChanges(); // return true if changes were made by the user in current editor session, * otherwise false will be returned. * - JSFiller.done(); // trigger done (same as done button). Accessible only in 'ready' state * - JSFiller.destroy(); // trigger destroy * - JSFiller.reload(); // reload iframe * - JSFiller.getState(); // return current editor's state **/