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

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
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>
Created a formatter and added the formatter in User form through 'Form Design'. It successfully displayed as below
Create a table 'u_sitephoto' with columns site_photo, site_photo_caption and a reference column userid to User table
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
To resolve above error, and trigger the client script on button click
Reload the image thumbnails(currently added some placeholder images as shown in the image) with all the uploaded photos for that user
On cancel button click remove the selected photo for uploading
Thanks in advance for your great suggestions & helps

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();
}