The support for users to easily copy / paste images, often times screenshots, to Service Portal is a requirement often seen. Here is how I have accomplished this.
You need to apply this change to any widget that you want to support copy/paste. In this example we will use the "Ticket Conversations" widget, but the same logic can be applied to "SC Catalog Item" or "Ticket Attachments" widget.
Open your instance and go to /sp_config. The click the Widget Editor and open "Ticket Conversations".
We cannot edit this widget as it is read only. Thus you need to create a copy of it by clicking the burger icon to the right and select "Clone "Ticket Conversations""
Giv your new copy a meaningfull name.
Place a checkmark in "HTML Template" and "Client Script". These are the only places we will make changes.
On line 6 add the attribute ng-paste="paste($event)" inside the <div> tag on the HTML part to the left.
In the "Client Script" window to your right add the $scope.paste function. It is not so important where you add it, just make sure not to place at the same level as the other functions. I added mine on line 56. Here is the code for copy/paste:
$scope.paste = function (event) {
var files = [];
var clipData = event.originalEvent.clipboardData;
angular.forEach(clipData.items, function (item, key) {
if (clipData.items[key].type.match(/image.*/)) { // if it is a image
files.push(clipData.items[key].getAsFile());
$scope.attachmentHandler.onFileSelect(files);
}
});
}
Click the Save icon in the upper right corner and close the widget editor.
Go back to /sp_config and open the Designer
Open the "Ticket Form" page,
Hover the "Ticket Conversations" instance in the main window and click the little trash icon. This will not delete the widget, but only remove the instance of the widget. Next drag your newly created Widget to the place where the "Ticket Conversations" was.
That is it. You can now copy paste/images into the Ticket Conversation. Only requirement is that the user clicks the conversation before pasting.
You may also want to add the following business rule on the sys_attachment table to avoid the creation of files with the name "blob" without any extensions.
I hope that you find this usefull. Any suggestions for improvements are welcomed 🙂 Please endorse if this works for you or like if you want to see more like this.
Hi Lasse,
I agree that we should use the latest browsers where possible, however depending on the company it can take years to roll out the latest browsers due to their incompatibilities with other systems (local and 3rd party).
IE is still a widely used browser compared to its successor - below are stats from last month (source Browser market share Worldwide | StatCounter Global Stats) where you can see that IE usage is double the current usage of its successor (Edge).
| Date | Chrome | Safari | Firefox | IE | Edge |
| 2017-08 | 54.89% | 14.88% | 5.9% | 3.69% | 1.8% |
Don't get me wrong, the solution that you have made is fantastic and feel that it is a valuable contribution to the ServiceNow community, as it absolutely is a heavily requested feature that businesses require - so thank you! I appreciate that it can be time consuming to try to make this work on IE11 and it's completely your prerogative to support this or not - I just believe that ServiceNow is used on IE11 for lots of companies that are restricted in upgrading/using alternative browsers and this would be very beneficial to them also if it can be done. Either way...
Thanks
Is there any way this functionality can be included inside of a cloned ticket form ? I tried adding the paste event in html in various spots, and moved the client script portion around in the code making sure not to interrupt the functions but was not able to get it working. When i paste into the activity section, the post button greys out and nothing happens.
As a workaround I added this functionality to the ticket attachments widget, added to the bottom of the page and changed the HTML with a quick instruction.
Works like a charm inside of RP's.
I can elaborate.
In our SP, for our end users to view their incidents, they can go either go to the "my requests" at the top of the header, or from clicking into specific incidents from the homepage widget i created with help from the forum "List with keyword search" widget. Either way brings them into the form view. In that form view the widget is named "clonedform" which was a clone of the default "form" widget. The clonedform widget is the one i was wondering if this could be added to.
The HTML code and CS code has been added as well in case you can see where it should be placed or if it wont work in this configuration.
To allow the ability to paste in screenshots to already existing incidents i just modified the attachment widget with your steps and the paste works there and updates the ticket form in real time.
HTML code from clonedform widget.
<div ng-if="!data.isValid && !data.emptyStateTemplate" class="panel panel-default" ng-paste="paste($event)">
<div class="panel-body wrapper-lg text-center">
${Record not found}
</div>
</div>
<div ng-if="!data.isValid && data.emptyStateTemplate" class="panel-shift">
<div class="empty-state-wrapper panel panel-default" ng-include="data.emptyStateTemplate"></div>
</div>
<div ng-if="data.isValid" class="panel-shift">
<div class="" ng-if="!data.f._view.length && data.hideRelatedLists && data.emptyStateTemplate">
<div class="empty-state-wrapper panel panel-default" ng-include="data.emptyStateTemplate"></div>
</div>
<div class="" ng-if="!data.f._view.length && data.hideRelatedLists && !data.emptyStateTemplate">
<div class="panel panel-default">
<div class="panel-heading"><span class="panel-title">{{data.f.title}}</span> <span ng-if="options.showFormView == 'true' && data.f.view != ''">[{{data.f.view_title}} view]</span></div>
<div class="panel-body wrapper-lg text-center">
${No elements to display}
</div>
</div>
</div>
<div class="panel panel-default" ng-if="data.f._view.length || !data.hideRelatedLists" >
<div class="panel-heading" ng-if="data.f.title.length" sp-context-menu="getUIActionContextMenu(event)">
<span class="dropdown m-r-xs" ng-if="(data.isAdmin || getUIActions('context').length > 0) && options.omitHeaderOptions != 'true'">
<span class="dropdown-toggle glyphicon glyphicon-menu-hamburger" style="line-height: 1.4em" id="adminMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"></span>
<ul class="dropdown-menu" aria-labelledby="adminMenu">
<li ng-if="::data.isAdmin"><a href="/{{data.f.table}}.do?sys_id={{data.f.sys_id}}" target="_blank">${Open in platform}</a></li>
<li ng-if="::data.isAdmin" class="dropdown-header">${Configure}</li>
<li ng-if="::data.isAdmin"><a href="/slushbucket.do?sysparm_referring_url={{adminMenu.encodedPageUrl}}&sysparm_list={{data.f._sections[0].id}}&sysparm_form=section&sysparm_view={{data.f.view}}" target="_blank">${Form Layout}</a></li>
<li ng-if="::data.isAdmin"><a href="/slushbucket.do?sysparm_referring_url={{adminMenu.encodedPageUrl}}&sysparm_list={{data.f.table}}&sysparm_form=related_list&sysparm_view={{data.f.view}}" target="_blank">${Related Lists}</a></li>
<li ng-if="::data.isAdmin"><a href="/list?id=lf&table=sys_ui_policy&filter=table%3D{{data.f.table}}%5EORtableIN{{data.f.table}},sys_metadata%5Eactive%3Dtrue%5Eui_type%3D1%5EORui_type%3D10" ng-click="openRelatedList($event, {id:'lf', table: 'sys_ui_policy', filter: 'table%3D{{data.f.table}}%5EORtableIN{{data.f.table}},sys_metadata%5Eactive%3Dtrue%5Eui_type%3D1%5EORui_type%3D10'})">${UI Policies} <span class="badge pull-right" ng-if="f.policy.length">{{f.policy.length}}</span></a></li>
<li ng-if="::data.isAdmin"><a href="/list?id=lf&table=sys_script_client&filter=table%3D{{data.f.table}}%5EORtableIN{{data.f.table}},sys_metadata%5Eactive%3Dtrue%5Eui_type%3D1%5EORui_type%3D10" ng-click="openRelatedList($event, {id: 'lf', table: 'sys_script_client', filter: 'table%3D{{data.f.table}}%5EORtableIN{{data.f.table}},sys_metadata%5Eactive%3Dtrue%5Eui_type%3D1%5EORui_type%3D10'})">${Client Scripts} <span class="badge pull-right" ng-if="adminMenu.getClientScriptCount()">{{adminMenu.getClientScriptCount()}}</span></a></li>
<li ng-if="getUIActions('context').length > 0 && data.isAdmin" role="separator" class="divider"></li>
<li ng-repeat="action in getUIActions('context')"><a href="" ng-click="triggerUIAction(action)">{{action.name}}</a></li>
<li ng-if="::data.isAdmin || getUIActions('context').length > 0" role="separator" class="divider"></li>
<li><a target="_new" href="/{{data.f.table}}.do?PDF&sys_id={{data.sys_id}}&sysparm_view={{data.f.view}}">${Export to PDF}</a></li>
<li><a target="_new" href="/{{data.f.table}}.do?PDF&landscape=true&sys_id={{data.sys_id}}&sysparm_view={{data.f.view}}">${Export to PDF (landscape)}</a></li>
</ul>
</span>
<span class="panel-title">{{data.f.title}}</span> <span ng-if="options.showFormView == 'true' && data.f.view != ''">[{{data.f.view_title}} view]</span>
<div ng-if="attachmentHandler && data.canAttach" title="{{::data.addAttachmentMsg}}" class="pull-right attachment-button">
<sp-attachment-button></sp-attachment-button>
</div>
</div>
<div class="panel-body">
<!-- performance debug -->
<div ng-if="data.show_sql">
<div class="comment">
<span ng-if="data.f._perf.sql_count">${SQL Statements {{data.f._perf.sql_count}}}, </span>
<span>${Time {{data.f._perf.time}}}</span>
</div>
<div ng-repeat="s in data.f._perf.sql" class="{{s.type}}">
{{s.statement}}
</div>
</div>
<!-- attachments -->
<sp-attachment-manager table="data.table" sys-id="data.f._attachmentGUID" omit-edit="!data.canAttach"></sp-attachment-manager>
<!-- form -->
<div>
<sp-model form_model="data.f" mandatory="mandatory"></sp-model>
</div>
<!-- UI Action Links -->
<div ng-if="getUIActions('link').length > 0">
<label style="margin: 0;">${Related Links}</label>
<div ng-repeat="action in getUIActions('link')">
<a href ng-click="triggerUIAction(action)">{{action.name}}</a>
</div>
</div>
<!-- related lists -->
<div ng-if="!data.hideRelatedLists">
<label style="margin: 0">${Related Lists}</label>
<div style="margin-bottom: 7px; padding-bottom: 7px; border-bottom: 1px solid #f5f5f5;">
<span ng-repeat="rl in data.f._related_lists" ng-if="rl.visible">
<a ng-if="rl.type != 'REL'" href="?id=lf&table={{rl.table}}&filter={{rl.field}}%3D{{data.f.sys_id}}&view={{data.f.view}}" ng-click="openRelatedList($event, {id: 'lf', table: '{{rl.table}}', filter: '{{rl.field}}%3D{{data.f.sys_id}}'})">{{rl.plural}}
<span class="label label-as-badge label-primary" ng-if="rl.count">{{rl.count}}</span>
</a>
<a ng-if="rl.type == 'REL'" href="?id=lf&table={{rl.table}}&relationship_id={{rl.relationship_id}}&apply_to={{rl.apply_to}}&apply_to_sys_id={{rl.apply_to_sys_id}}&view={{data.f.view}}" ng-click="openRelatedList($event, {id: 'lf', table: '{{rl.table}}', apply_to: '{{rl.apply_to}}', apply_to_sys_id: '{{rl.apply_to_sys_id}}', relationship_id: '{{rl.relationship_id}}'})">{{rl.label}}
<span class="label label-as-badge label-primary" ng-if="rl.count">{{rl.count}}</span>
</a>
<span ng-if="!$last" style="padding-left: .5em; padding-right: .5em;"> | </span>
</span>
</div>
</div>
</div>
<div class="panel-footer">
<button ng-mousedown="triggerUIAction(action)" ng-repeat="action in getUIActions('button')" class="btn btn-default action-btn">{{action.name}}</button>
<span>{{status}}</span>
<!--<button ng-if="getPrimaryAction()" type="submit" ng-mousedown="triggerUIAction(getPrimaryAction())" class="btn btn-primary action-btn pull-right">${Save} <span ng-if="saveButtonSuffix">(${{{saveButtonSuffix}}})</span></button>-->
<div style="clear: both;"></div>
<div ng-if="mandatory.length" class="alert alert-info" style="margin-top: .5em">
<span ng-if="mandatory.length > 0">${Required information} </span>
<span ng-repeat="f in mandatory" class="label label-danger" style="margin-right: .5em; display: inline-block;">{{f.label}}</span>
</div>
</div>
</div>
</div>
CS from the clonedform widget.
function ($scope, $rootScope, $timeout, spUtil, $location, $window, nowAttachmentHandler) {
$scope.mandatory = [];
$scope.data.show_sql = false;
$scope.saveButtonSuffix = spUtil.getAccelerator('s');
$scope.adminMenu = {
encodedPageUrl: encodeURIComponent($location.url()),
getClientScriptCount: function() {
var count = 0;
if ($scope.data.f.client_script) {
count += $scope.data.f.client_script.onChange.length;
count += $scope.data.f.client_script.onLoad.length;
count += $scope.data.f.client_script.onSubmit.length;
}
return count;
}
};
$scope.getUIActions = function(type) {
if ($scope.data.disableUIActions)
return [];
if (type) {
return $scope.data.f._ui_actions.filter(function(action) {
//We handle the primary action button separately.
return !action.primary && action['is_' + type];
});
} else {
return $scope.data.f._ui_actions;
}
}
$scope.getPrimaryAction = function() {
var primaryActions = $scope.data.f._ui_actions.filter(function(action) {
return action.primary;
});
return (primaryActions.length) ? primaryActions[0] : null;
}
$scope.paste = function (event) {
var files = [];
var clipData = event.originalEvent.clipboardData;
angular.forEach(clipData.items, function (item, key) {
if (clipData.items[key].type.match(/image.*/)) { // if it is a image
files.push(clipData.items[key].getAsFile());
$scope.attachmentHandler.onFileSelect(files);
}
});
}
$scope.getUIActionContextMenu = function(event) {
var menu = [];
if (event.ctrlKey)
return menu;
var contextActions = $scope.getUIActions('context');
contextActions.forEach(function(action) {
menu.push([action.name, function() {
$scope.triggerUIAction(action);
}]);
});
if (contextActions.length > 0)
menu.push(null);
menu.push([$scope.data.exportPDFMsg, function() {exportPDF("");}]);
menu.push([$scope.data.exportPDFLandMsg, function() {exportPDF('true');}]);
return menu;
}
function exportPDF(landscape) {
$window.open("/" + $scope.data.f.table + ".do?PDF&landscape=" + landscape + "&sys_id=" + $scope.data.sys_id + "&sysparm_view=" + $scope.data.f.view);
}
//trigger the primary UI Action on save (if there is one)
var deregister = $scope.$on('$sp.save', function() {
var primaryAction = $scope.getPrimaryAction();
if (primaryAction)
$scope.triggerUIAction(primaryAction);
});
$scope.$on('$destroy', function() {deregister()});
$scope.triggerUIAction = function(action) {
if ($scope.data.disableUIActions)
return;
if (g_form) {
$timeout(function() {
g_form.submit(action.action_name || action.sys_id);
});
}
}
$scope.$on("spModel.uiActionComplete", function(evt, response) {
var sysID = (response.isInsert) ? response.sys_id : $scope.data.sys_id;
loadForm($scope.data.table, sysID).then(constructResponseHandler(response));
});
function constructResponseHandler(response) {
return function() {
var message;
var eventName = "sp.form.record.updated";
if (response.isInsert) {
message = $scope.data.recordAddedMsg;
var search = $location.search();
search.sys_id = response.sys_id;
search.spa = 1;
$location.search(search).replace();
} else
message = $scope.data.updatedMsg;
$scope.data.hideRelatedLists = hideRelatedLists();
$scope.$emit(eventName, $scope.data.f._fields);
$rootScope.$broadcast(eventName, $scope.data.f._fields);
$scope.status = message;
spUtil.addTrivialMessage(message);
$timeout(clearStatus, 2000);
}
}
var ctrl = this;
// switch forms
var unregister = $scope.$on('$sp.list.click', onListClick);
$scope.$on("$destroy", function() {
unregister();
})
function onListClick(evt,arg) {
loadForm(arg.table, arg.sys_id);
}
function loadForm(table, sys_id){
var f = {};
$scope.data.table = f.table = table;
$scope.data.sys_id = f.sys_id = sys_id;
f.view = $scope.data.view;
return $scope.server.update().then(setupAttachmentHandler);
}
function openRelatedList(e, queryString){
// todo: Open this in a modal
$location.search(queryString);
e.preventDefault();
}
$scope.$on('spModel.fields.rendered', function() {
if (ctrl.panels)
ctrl.panels.removeClass('shift-out').addClass('shift-in');
});
var g_form;
$scope.$on('spModel.gForm.initialized', function(e, gFormInstance) {
if (gFormInstance.getTableName() == $scope.data.f.table)
g_form = gFormInstance;
});
// Show or hide related lists
$scope.$watch('data.f._related_lists', function(){
$scope.data.hideRelatedLists = hideRelatedLists();
}, true);
function hideRelatedLists() {
if (!$scope.data.f._related_lists)
return true;
if ($scope.options.hideRelatedLists == true)
return true;
if ($scope.data.sys_id == '-1')
return true;
// If all related lists are visible=false then hide
if ($scope.data.f._related_lists.length > 0) {
for (var i in $scope.data.f._related_lists) {
var list = $scope.data.f._related_lists[i];
if (list.visible) {
return false;
}
}
}
return true;
}
function clearStatus() {
$scope.status = "";
}
function setupAttachmentHandler(){
$scope.attachmentHandler = new nowAttachmentHandler(appendSuccess, appendError);
$timeout(function() {
var sizeLimit = 1024 * 1024 * 24; // 24MB
$scope.attachmentHandler.setParams($scope.data.table, $scope.data.f._attachmentGUID, sizeLimit);
});
$scope.$on('dialog.upload_too_large.show', function(e){
console.log($scope.data.largeAttachmentMsg);
spUtil.addErrorMessage($scope.data.largeAttachmentMsg);
});
}
setupAttachmentHandler();
function appendSuccess() {
spUtil.addTrivialMessage($scope.data.attachmentUploadSuccessMsg);
$scope.$broadcast("sp.attachments.update", $scope.data.f._attachmentGUID);
}
function appendError(error) {
$scope.errorMessages.push(error);
}
}
I modified SC Catalog Item as described to allow users to copy/paste image when creating a new incident via a Record Producer.
Attachment is displayed at the bottom of the form which allow to remove it which is nice.
Is it possible to change the label (attachment.file_name , attachement.size ?
I also noticed that attachment is stored twice in sys_attachment table
Do I need to create a BR to remove the thumb_xxxxx file ?
Thanks
