servicenow - ServiceNow - 从表单按钮单击事件调用客户端脚本以保存图像和标题

Question

我试图在 User(sys_user) 部分创建自定义功能以将照片和标题保存到自定义表中。我想保存照片和标题，并将所有上传的照片与标题一起显示为缩略图。但是当我尝试调用客户端脚本时，它甚至没有触发客户端脚本中的函数。以下是我遵循的步骤

1. 使用以下代码创建了一个 UI 宏

   <?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. 创建格式化程序并通过“表单设计”在用户表单中添加格式化程序。成功显示如下

3. 创建一个包含列的表“u_sitephoto” site_photo，以及对用户表site_photo_caption的引用列userid

4. 以“OnLoad”类型创建客户端脚本

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

但是单击上传按钮时出现以下错误

未捕获的 ReferenceError：saveValues 未在 HTMLButtonElement.onclick 中定义

我想获得一些帮助来解决以下问题

1. 要解决上述错误，并在按钮单击时触发客户端脚本

2. 使用该用户上传的所有照片重新加载图像缩略图（当前添加了一些占位符图像，如图所示）

3. 在取消按钮上单击删除所选照片以进行上传

提前感谢您的出色建议和帮助

Answer 1

尝试关注如何解决第一个问题。

UI 宏在服务器端呈现，因此它无法从客户端脚本中检索函数。您可以直接在<script>UI 宏的标签中定义函数。在函数中，使用GlideAjax调用后端脚本包含，您可以在其中放置创建“u_sitephoto”表的新记录的代码。

顺便说一句，我使用的是巴黎版的 ServiceNow。

UI 宏中的示例函数：

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

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