ServiceNow - Call a client script from form button click event to save image and caption

Question

I was trying to create custom feature in User(sys_user) section to Save a photo and caption to a custom table. I want to save the photo and caption and show all the uploaded photo as thumbnail along with caption. But when I tried to call client-script it is not even trigger the function in client script. Following are the steps i followed

1. Created a UI macro with following code

   <?xml version="1.0" encoding="utf-8" ?>
   <j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
   <div class="container">
       <g:ui_form>
       <h1>Choose an image file:</h1>
       <p>Supported file types: .jpg, .png, .bmp, .gif, .jpeg, .ico, .svg</p>
       <div class="row">
           <input name="site_photo_upload" id="site_photo_upload" type="file" class="upld-file" style="padding:20px;"></input>
       </div>
       <div class="form-group">
           <label class="control-label col-sm-2" for="fieldone" style="width:100px">Description</label>
           <div class="col-sm-10">
               <input type="text" name="site_photo_caption" id="site_photo_caption" class="form-control col-md-3" id="fieldone"
                   placeholder="Enter Description maximum 40 letters..." style="width:300px;height:75px;"></input>
           </div>
       </div>
   
   
   
       <div class="form-group" style="padding:20px;">
           <button id="btn_cancel">Cancel</button>
           <g:dialog_button id="btn_submit_site_photo" name="btn_submit_site_photo" onclick="saveValues()" type="button" class="btn">Upload</g:dialog_button>
       </div>
   </g:ui_form>
   
   </div>
   
   
   <div class="container" style="padding:30px 0;border-top:1px solid #ccc;">
       <div class="card-deck">
   
           <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 col-xl-3" style="padding:0;">
               <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                   <img class="card-img-top" style="width:100%;" src="https://picsum.photos/309/200?image=1050"
                       alt="Card image cap"></img>
   
                   <p class="card-text" style="padding:10px 0;">caption placeholder</p>
   
               </div>
           </div>
   
           <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 col-xl-3" style="padding:0;">
               <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                   <img class="card-img-top" style="width:100%;" src="https://picsum.photos/309/200?image=1050"
                       alt="Card image cap"></img>
   
                   <p class="card-text" style="padding:10px 0;">caption placeholder</p>
   
               </div>
           </div>
   
       </div>
   </div>
   </j:jelly>
   

2. Created a formatter and added the formatter in User form through 'Form Design'. It successfully displayed as below

3. Create a table 'u_sitephoto' with columns site_photo, site_photo_caption and a reference column userid to User table

4. Create a client script in 'OnLoad' type

   function saveValues() {
       var site_photo = document.getElementById("site_photo_upload").value;
       var site_photo_caption = document.getElementById("site_photo_caption").value;
       var sitephoto_record = new GlideRecord('u_sitephoto');
       sitephoto_record.initialize();
       sitephoto_record.setValue('site_photo', site_photo);
       sitephoto_record.setValue('site_photo_caption', site_photo_caption);
       sitephoto_record.insert();
   }
   

But I am getting the following error when clicking the Upload button

Uncaught ReferenceError: saveValues is not defined at HTMLButtonElement.onclick

I would like to get some help for resolving the following issues

1. To resolve above error, and trigger the client script on button click

2. Reload the image thumbnails(currently added some placeholder images as shown in the image) with all the uploaded photos for that user

3. On cancel button click remove the selected photo for uploading

Answer 1

Try following about how to resolve the 1st issue.

UI macro is rendered in server side, so it can't retrieve functions from a Client Script. You can define the function directly in <script> tag of UI macro. Within the function, use GlideAjax to call backend Script Include in which you can put your code of creating a new record of 'u_sitephoto' table.

BTW, I am using Paris version of ServiceNow.

Sample function in UI macro:

function saveValues() {
    <!-- You could use $j to call JQuery in UI macro -->
    var site_photo = $j("#site_photo_upload").get(0).files[0];
    var site_photo_caption = $j("#site_photo_caption").val();
    
    var ajax = new GlideAjax('SitePhoneUtils');
    ajax.addParam('sysparm_name', 'savePhotos');
    ajax.addParam('sysparm_site_photo', site_photo);
    ajax.addParam('sysparm_photo_caption', site_photo_caption);
    ajax.getXML();
}

Sample function in Script Include - SitePhoneUtils

savePhotos: function() {
    var site_photo = this.getParameter('sysparm_site_photo');
    var site_photo_caption = this.getParameter('sysparm_site_photo_caption');
    var gr = new GlideRecord('u_sitephoto');
    gr.initialize();
    gr.site_photo = site_photo;
    gr.site_photo_caption = site_photo_caption;
    gr.insert();
}