June 29, 2019 8:11 pm

Published by

When a user needs to add a screenshot to a record (in this example we will use Incident) the process when using baseline widgets would be:

  1. Take screenshot
  2. Save file
  3. Upload saved file as an attachment on the Catalog Item/Record Producer

It would be a much better User Experience to be able to take the screenshot, copy it to the clipboard and then paste it directly to the record – you may recognize this functionality if you have ever used the ServiceNow HI portal. This functionality does not exist in the baseline platform but it is fairly easy to add!

This solution requires us to modify the baseline SC Catalog Item Widget to add a textarea input to the layout and event listener to react to a paste event – this will allow us to paste an image into any Catalog Item or Record Producer without having to create separate Variables on each item.

Modify the baseline SC Catalog Item Widget

  • In the Widget Editor, open SC Catalog Item [widget-sc-cat-item-v2]
  • Clone the Widget

Update the Link Function with the following. The HTML should be added before the <sp-attachment-button></sp-attachment-button> element around Line 97

//timeout waits for DOM to be fully rendered
setTimeout(function(){
  //find the element that we are pasting into
  elem.find('#imagepaste').on('paste', function(e){
    var files = [];
    var items = (event.clipboardData || event.originalEvent.clipboardData).items;
    angular.forEach(items, function(item,key){
      if(item.type.match(/image/)){
        files.push(item.getAsFile());
        scope.attachmentHandler.onFileSelect(files);
      }
    })
  })
},0)

 

<textarea id="imagepaste">
</textarea>

 

Add the new Widget to the sc_cat_item Page

  • In the Page Designer, open the sc_cat_item page
  • Remove the existing SC Catalog Item Widget from the page and replace it with the Widget created above

Testing

  • Go to the Service Portal > Service Catalog > Can We Help You? > Create Incident
  • Paste an image into the textarea that has been added next to the attachment button
  • Observe the image is added to the Record Producer

 

You can see the full solution in this Update Set: SnowGuy – Image paste