IBM forms experience External library error :jsPDF

Question

so I was following the current standard way of adding an external js library to forms experience builder (tutorial: https://www.youtube.com/watch?v=wRW4vBUT4oM).

I was able to successfully add jquery and run jquery codes, but i am not able to run the jsPDF library, I am getting a reference error "ReferenceError: jsPDF is not defined".

I am running the function onClick generate pdf button (see: http://54.191.245.162:9080/forms/anon/org/app/f445e78b-fc77-4ef4-80f9-c82cfe207be8/launch/index.html?form=F_Form1)

this is my code on application start

app.getSharedData().loadScript = function (url, callback) {

    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement("script")
        script.type = "text/javascript";
    script.src = url;

    script.onreadystatechange = callback;
    script.onload = callback;

    // Fire the loading
    head.appendChild(script);
}

then onNew form event I am passing the URL and callback function

var JSPDFurl = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js'
var jqueryURL = 'https://code.jquery.com/jquery-3.3.1.slim.min.js'

app.getSharedData().loadScript(jqueryURL, function () {

    app.getSharedData().loadScript(JSPDFurl, function () {

        function onClick() {

            console.log('on click function is running')
            console.log('JQUERY WORKING', $('.first-name input').val("jay chacko"))

              var pdf = new jsPDF('p', 'pt', 'letter');
              pdf.canvas.height = 72 * 11;
              pdf.canvas.width = 72 * 8.5;
              pdf.fromHTML(document.body);
              pdf.save('test.pdf');
        };

        var element = document.getElementById("clickbind");
        element.addEventListener("click", onClick);

    })
})

Answer 1

For some reason the latest version of jsPDF is throwing error inside IBM FORMS, maybe an internal global scope conflict. version 1.2.60 and below seems to works fine and not throwing the above error.