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

yundlu316
Kilo Guru

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?

1 ACCEPTED SOLUTION

Oleg
Mega Sage

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.

View solution in original post

14 REPLIES 14

Ankur Bawiskar
Tera Patron
Tera Patron

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

Regards,
Ankur
Certified Technical Architect  ||  9x ServiceNow MVP  ||  ServiceNow Community Leader

Thanks Ankur, is that code for the Service Portal?  

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

Regards,
Ankur
Certified Technical Architect  ||  9x ServiceNow MVP  ||  ServiceNow Community Leader

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?