- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
06-17-2019 07:53 PM
We want to edit the way the ootb <sp-attachment-button> looks, where is this code located? Is there a way to change some styling for that button?
Solved! Go to Solution.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
06-17-2019 10:04 PM
The code of <sp-attachment-button> is included in https://<yourinstance>.service-now.com/scripts/js_includes_sp.jsx or https://<yourinstance>.service-now.com/scripts/app.$sp/directive.spAttachmentButton.js. It's below:
/*! RESOURCE: /scripts/app.$sp/directive.spAttachmentButton.js */
angular.module('sn.$sp').directive('spAttachmentButton', function(cabrillo, $rootScope, i18n) {
'use strict';
return {
restrict: 'E',
template: function() {
var inputTemplate;
if (cabrillo.isNative()) {
inputTemplate = '<button href="#" title="" ng-click="showAttachOptions()" class="panel-button sp-attachment-add btn btn-link" aria-label=""><span class="glyphicon glyphicon-camera"></span></button>';
} else {
inputTemplate = '<input type="file" style="display: none" multiple="true" ng-file-select="attachmentHandler.onFileSelect($files)" class="sp-attachments-input"/>';
inputTemplate += '<button title="" ng-click="attachmentHandler.openSelector($event)" class="panel-button sp-attachment-add btn btn-link" aria-label=""><span class="glyphicon glyphicon-paperclip"></span></button>';
}
return ['<span class="file-upload-input">', inputTemplate, '</span>'].join('');
},
controller: function($element, $scope) {
$scope.showAttachOptions = function() {
var handler = $scope.attachmentHandler;
cabrillo.attachments.addFile(handler.tableName, handler.tableId, null, {
maxWidth: 1000,
maxHeight: 1000
}).then(function(data) {
handler.getAttachmentList();
$rootScope.$broadcast("added_attachment");
}, function() {
console.log('Failed to attach new file');
});
}
;
$scope.$on('attachment_select_files', function(e) {
$scope.$evalAsync(function() {
$($element).find('.sp-attachments-input').click();
});
});
},
link: function(scope, el, attr) {
i18n.getMessage("Add attachment", function(msg) {
el.find("button").attr("title", msg);
el.find("button").attr("aria-label", msg);
});
}
}
});
If you need to change the code you can modify it and save it as new directive under another name.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
06-17-2019 07:57 PM
Hi,
you would find a ui page with name as attachment; there is the code
Mark Correct if this solves your issue and also mark Helpful if you find my response worthy based on the impact.
Thanks
Ankur
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
06-17-2019 08:05 PM
Thanks Ankur, is that code for the Service Portal?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
06-17-2019 08:19 PM
Hi,
That UI page is rendered whenever you click on the attachment icon either in native or service portal.
Mark Correct if this solves your issue and also mark Helpful if you find my response worthy based on the impact.
Thanks
Ankur
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
06-17-2019 08:27 PM
Hey Ankur, I don't know that we're talking about the same thing actually. When I open up the console and inspect the paperclip icon, I can see the following code:
<sp-attachment-button>
<span class="file-upload-input">
<input type="file" style="display: none" multiple="true" ng-file-select="attachmentHandler.onFileSelect($files)" class="sp-attachments-input">
<button title="Add attachment" ng-click="attachmentHandler.openSelector($event)" class="panel-button sp-attachment-add btn btn-link" aria-label="Add attachment">
<span class="glyphicon glyphicon-paperclip"></span>
</button>
</span>
</sp-attachment-button>
However, I'm not sure where I can go make edits to the way it looks different. Do you know where the above code is located?