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

[Mark Manders]

Why? What could possibly be the use case for that? 

This is not OOB possible and also nothing someone posted on share. With all the possibilities any computer has, I don't think this will be added to the platform either.

[Dr Atul G- LNG]

Hi @Hari1 

OOTB there is nothing available like thsi, and it will be a pure customization. You can download the record and use it further.

[Sohail Khilji]

HI @Hari1 ,

Its possible with servicenow as in my past experince i have seen ATF using screenshot functionality. so here is a small utility script which i found that can be customized in UI action too.

Take a look :

1) Create an UI Script with below code.


function addPasteEvent() {


  document.onpaste = function (event) {


  // use event.originalEvent.clipboard for newer chrome versions


  var items = (event.clipboardData   || event.originalEvent.clipboardData).items;


  // find pasted image among pasted items


  var blob = null;


  for (var i = 0; i < items.length; i++) {


  if (items[i].type.indexOf("image") === 0) {


  blob = items[i].getAsFile();


  }


  }


  // load image if there is a pasted image


  if (blob !== null) {


  var reader = new FileReader();


  reader.onload = function(event) {


  console.log(event.target.result); // data url!


  attachClipboardData(event.target.result);


  };


  reader.readAsDataURL(blob);


  }


  };


}



function attachClipboardData(data){


  var recordSysID = g_form.getUniqueValue();


  var recordTable = g_form.getTableName();


  var temp = data.toString().replace(/data:/g,'').split(';');


  var contentType = temp[0];


  var fileName = 'Screen shot.'+contentType.split('/')[1];


  var content = temp[1].toString().replace(/base64,/g,'');




  showLoadingDialog();


  var attach = new GlideAjax('<script>'); // Specify the script include name after completing step 2


  attach.addParam('sysparm_name','attachScreenshot');


  attach.addParam('sysparm_tableName',recordTable);


  attach.addParam('sysparm_sys_id',recordSysID);


  attach.addParam('sysparm_content_type',contentType);


  attach.addParam('sysparm_value',content);


  attach.addParam('sysparm_filename',fileName);


  attach.getXML(getResponse);




  function getResponse(response) {


  alert('Screen shot attached to ticket!');


  window.location.reload();


  }


}



2) Create a script include with below function in it.


attachScreenshot : function() {


  var StringUtil = GlideStringUtil;


  var value = StringUtil.base64DecodeAsBytes(this.getParameter('sysparm_value'));


  var tableName = this.getParameter('sysparm_tableName');


  var sys_id = this.getParameter('sysparm_sys_id');


  var filename = this.getParameter('sysparm_filename');


  var content_type = this.getParameter('sysparm_content_type');




  var attachment = new Attachment();


  attachment.write(tableName, sys_id, filename, content_type, value);


  },



3) Call the UI Script function in an onload script of incident/problem/change/global table as required.


function onLoad() {


  addPasteEvent();


}

After doing these just take a screen shot using print screen and paste it over an incident form. You can see the attachment added after a form reload.

NOTE: Its working fine in Chrome and FF. I don't have IE 11 to test. You can give it a try.

I HOPE THIS HELPS... 

[Shaqeel]

hi @Hari1 

follow these steps:

1. Create UI action.

Use this 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. Add Client script to support the UI action.

type(OnLoad)

Script:

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

Kindly let us know if it works or not.

Regards

Shaqeel