Take snapshot of the form on click of a button

[Hari1]

Hi,

I have a requirement to take a snapshot of the incident/change/workspace forms on click of the button i,e we need to add a button on the form and on click of it. We need to get the snapshot of the form. Can we achieve this in servicenow.

Thanks

[Hari1]

Hi @Shaqeel 

The above script is working fine in incident form. It is not working on the workspace. Can you please help with the logic to make it work on the workspace. I see an error on the console stating the below.

"SCRIPT:EXEC Error while running Client Script "GlideScopedScript": ReferenceError: document is not defined"

[Shaqeel]

@Hari1 

Let me ask my colleague and get back to you for workspace.

Could you mark it as Solution/Helpful.

Regards

Shaqeel

[Shaqeel]

@Hari1 

1. Create a new button for Workspace form.

Workspace experience>>Administration>>All config

write following script:

function takeScreenshot() {
    // Define a function to capture the screenshot
    html2canvas(document.body).then(function(canvas) {
        var dataURL = canvas.toDataURL("image/png");
        // Create a download link and trigger it
        var link = document.createElement("a");
        link.href = dataURL;
        link.download = "screenshot.png";
        link.click();
    });
}

// Inject the html2canvas script if not already loaded
if (typeof html2canvas === 'undefined') {
    var script = document.createElement('script');
    script.src='https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js';
    script.onload = function() {
        takeScreenshot();
    };
    document.head.appendChild(script);
} else {
    takeScreenshot();
}

2. You need to load html2canvas library in workspace.

Create new UI script for html2canvas.

script:

if (typeof html2canvas === 'undefined') {
    var script = document.createElement('script');
    script.src='https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js';
    document.head.appendChild(script);
}

3. Create OnLoad client script.

// Ensure the html2canvas library is available
addLoadEvent(function() {
    if (typeof html2canvas === 'undefined') {
        var script = document.createElement('script');
        script.src='https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js';
        document.head.appendChild(script);
    }
});

// Function to capture the screenshot
function takeScreenshot() {
    html2canvas(document.body).then(function(canvas) {
        var dataURL = canvas.toDataURL("image/png");
        var link = document.createElement("a");
        link.href = dataURL;
        link.download = "screenshot.png";
        link.click();
    });
}

4. Add button to trigger the script in workspace UI.

Now Experience Framework > Experience > App Shell.
Open: Your workspace app shell configuration.
Navigate to: Components.
Click: New and add a new button component with the following configuration:
json

{
  "name": "takeScreenshotButton",
  "type": "button",
  "label": "Take Screenshot",
  "onClick": "takeScreenshot"
}

Kindly try and please do let us know if it works or not.

Mark Solution/helpful.

Regards

Shaqeel

[Hari1]

Hi @Shaqeel 

Thank you for your response. I really appreciate your time. I have created a page using the UI Builder i need this functionality to be added on to that page. I am trying to follow the above steps but it doesn't seems to be working. Can you please help me with this?
Below is the UI builder page:

[Shaqeel]

@Hari1 

You are missing out something.

It is the right way.

Check with other team member.

Kindly mark solution/helpful