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

      Hello,

       

      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
              xif

              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) {

                 $event.stopPropagation();

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

                 $el.click();

                }

                

                 $scope.attachFiles = function(files) {

                 console.dir(snAttachmentHandler);

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

                 sysparm_fieldname: "coreysIMg"

                }).then(function(response) {

                 console.log(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
                  xif

                  Hello,

                   

                  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

                   

                  sample.jpg

                • 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 )

                   

                  Regards,

                   

                  Amado