How to use DOM element within client script in UI Builder

[Hari1]

Hi,

I am trying to run the below code within client script in UI Builder.

function handler({
    api,
    event,
    helpers,
    imports
}) {
    helpers.timing.setTimeout(function() {
        var script = this.document.createElement('script');
        script.src='https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js';
        script.onload = function() {
            takeScreenshot();
        };
        this.document.head.appendChild(script);
    });

    function takeScreenshot() {
        html2canvas(this.document.body, {
            onrendered: function(canvas) {
                var canvasVal = canvas.shadowRoot;
                var dataURL = canvas.toDataURL("image/png");
                var link = this.document.createElement("a");
                link.href = dataURL;
                link.download = "screenshot.png";
                link.click();
            }
        });
    }
}

I see an error message stating "html2canvas is not a function" in the browser log. Thanks.

[Brad Tilton]

I would do this in a custom component. That way it's reusable and you can easily add it to other record pages as well.

[Hari1]

@Brad TiltonCan you please provide me the steps on how to achieve this or a script that could help. Thanks.

[William Busby]

Sometimes the best response to a requirement is 'No' in a very professional manner.

[Sheldon Swift]

Conceptually, you would load html2canvas into the DOM like this:

function handler({api, event, helpers, imports}) {

    helpers.timing.setTimeout(function() {
        if (typeof this.document !== 'undefined') {
            var script = this.document.createElement('script');
            script.src='https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js'; 
            script.onload = function() {
                console.log('html2canvas is loaded and ready to use.');
            };
            this.document.head.appendChild(script);
        } else {
            console.error('Document is undefined.');
        }
    });
}

Then, you would add a button component with an event handler to run the script to take the screenshot when the button is clicked. The issue is, to @Brad Tilton's point, the UI builder components are in a shadow DOM. Since the shadow DOM might isolate your script from the global context where html2canvas is loaded, you need to ensure that the script is accessible within the shadow DOM.

[Hari1]

@Sheldon  SwiftI am not sure how to make the script accessible within the shadow DOM. Can you please help me out with the steps?
I was referring to the link shadow DOM. But i have no clue on how to achieve this. Below are the steps that i am following

1. I have created a button component on the UI Builder form.

2. I am calling the event - Button clicked

3. Event that i am calling when button clicked is the client script with the above code where i am having an issue with accessing html2canvas