5 Replies · Latest reply on Jan 3, 2018 2:30 PM by Amado Sierra

    Get picture from picture field on a form though a script



      I added a field type : image


      like this :


      Capture d’écran 2017-12-13 à 16.00.38.png


      It's available on some other part of service now, like to upload the logo.

      I would like to get this value.


      My need:

      I built a widget show some data, and I want to retrieve the picture attached to the record to show it on service portal


      Anyone i've done this before ?

        • Re: Get picture from picture field on a form though a script
          Corey Johansen

          How did you upload the picture? As an attachment? or are you asking how to upload and retrieve?

          What kind of form are you using? ( the form widget, a record producer, a catalog item)

            • Re: Get picture from picture field on a form though a script

              Hi corey, thank you for your answer and to try to help me


              I added a field wtih type : image on kb article.


              It's not an attachment, it's a image field where you can click, then upload a picture. same as if you go to :


              menu :

              service portal -> Worker portal :  you see you ca upload a logo. it's the same type of field.


              I wanted to script and get this image (the url where it's hosted) to show it on my widget

            • Re: Get picture from picture field on a form though a script
              Corey Johansen

              I did some research they do not make this a simple process.

              Here is what I have found. It appears that all of the banner images, icons, etc are stored in the sys_attachment table.


              In service portal you can use the attachments handler to do this for you.

              When you submit the file via snattachmenthandler, you will use the response to save a reference to it for later use.


              I suggest creating a dummy widget to test this and figure out if this can be used for what you are attempting to do.


              in the HTML of the widget paste this


              <input ng-show="false" type="file" ng-file-select="attachFiles({files: $files})" />


                 <button ng-click="uploadNewProfilePicture($event)"

                 ng-keypress="uploadNewProfilePicture($event)" type="button"

                 class="btn btn-default send-message">${Upload Picture}</button>







              In the client controller paste this


              function($scope, $element, $window, $location, $rootScope, $timeout, snAttachmentHandler, $http, spUtil,$filter) {


                 /* widget controller */

                 var c = this;


                 $scope.uploadNewProfilePicture = function($event) {


                 var $el = $element.find('input[type=file]');




                 $scope.attachFiles = function(files) {


                 snAttachmentHandler.create().uploadAttachment(files.files[0], {

                 sysparm_fieldname: "coreysIMg"

                }).then(function(response) {








              Here is the response logged in the developer console



              When you click the button click f12 and examine the response. Also examine what is stored in the sys_attachment table.


              I found this code in the user profile widget. How they store your profile picture.


              Here is a thread where a guy managed to use this

              SP Widget multiple <sp-attachment-button> needed


              Hope this helps at all.

                • Re: Get picture from picture field on a form though a script



                  Thank you for your time but I think there is a misunderstood.


                  I don't want to create a widget such as 'click to add', to attach something from the portal.


                  Let's sum a little bit :


                  Back end : I'm on a knowledge article, I have my customized field, picture, with image type, this field allow a user to click and add a image. This image is hosted in service now. So on each kb article, I can 'attached' (no as an attachment but though this field) a picture.


                  Front end : I have a widget, which showing kb article. You can see the title (retrieved, it works), the text article (retrieved it works) and I wanted to add a preview image, this one should be the picture uploaded and attach to the article though the field picture.


                  here a screenshot to visualize



                • Re: Get picture from picture field on a form though a script
                  Amado Sierra

                  Hi xif,


                  I had the same question and just found out the solution. In your widget's server-side script you need to grab the image name by using getDisplayValue. Here's an example:


                  var gr = new GlideRecord('sc_cat_item');
                  if (gr.get('04b7e94b4f7b4200086eeed18110c7fd')) {
                       data.name = gr.getValue('name');
                       data.picture = gr.getDisplayValue('picture');


                  Then in your widget's HTML:

                  <img class="img-responsive catalog-item-image" alt="{{::data.name}}" style="display: inline" ng-src="{{::data.picture}}" />


                  Calling getValue returns nothing, getDisplayValue returns the image file name (e.g. b28db9444f889200086eeed18110c724.iix )