Where is the code behind <sp-attachment-button>?

[yundlu316]

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?

[Alikutty A]

Hi,

Can you tell me what styling you want to apply on the attachment icon?

Thanks!

[Oleg · Accepted solution]

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.

[yundlu316]

Thank you!!

[yundlu316]

Hi OlegKi, I tried making a minor edit to the sp-attachment-button directive just to see if it would show up and I haven't had any luck getting it to work.  Below is my directive code, all I did was change the icon from a glyphicon paperclip to a Font Awesome check:

/*! RESOURCE: /scripts/app.$sp/directive.spFileAttachmentButton.js */
angular.module('sn.$sp').directive('spFileAttachmentButton', 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=""><i class="fas fa-check"></i></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);
			});
		}
	}
});
;

I pulled the new directive into my widget in the Angular Providers related list and in my HTML I commented out <sp-attachment-button> and replaced it with <sp-file-attachment-button>.  I don't think I'm missing any steps, but the new directive isn't showing up at all in my widget.  Any thoughts?  Thanks!

[yundlu316]

I'm also seeing this error in the console...