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

Go to solution
yundlu316
Kilo Guru

‎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?

0 Helpfuls
  • 8,848 Views
1 ACCEPTED SOLUTION

Go to solution
Oleg
Mega Sage

‎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.

View solution in original post

14 REPLIES 14

Go to solution
Ankur Bawiskar
Tera Patron
Tera Patron

‎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

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

Go to solution
yundlu316
Kilo Guru
In response to Ankur Bawiskar

‎06-17-2019 08:05 PM

Thanks Ankur, is that code for the Service Portal?  

0 Helpfuls

Go to solution
Ankur Bawiskar
Tera Patron
Tera Patron
In response to yundlu316

‎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

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

Go to solution
yundlu316
Kilo Guru
In response to Ankur Bawiskar

‎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?

0 Helpfuls