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

Posted 2023-02-16

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

【英文标题】：ServiceNow - Call a client script from form button click event to save image and caption

【发布时间】：2021-03-18 10:22:55

【问题描述】：

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

使用以下代码创建了一个 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"
                    ></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"
                    ></img>

                <p class="card-text" style="padding:10px 0;">caption placeholder</p>

            </div>
        </div>

    </div>
</div>
</j:jelly>

创建了一个格式化程序并通过“表单设计”在用户表单中添加了格式化程序。成功显示如下

创建一个表“u_sitephoto”，其中包含site_photo、site_photo_caption 列和一个引用列userid 到用户表

创建一个'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();

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

Uncaught ReferenceError: saveValues is not defined at htmlButtonElement.onclick

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

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

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

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

提前感谢您的宝贵建议和帮助

【参考方案1】：

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

UI 宏在服务器端呈现，因此它无法从客户端脚本中检索函数。 您可以直接在 UI 宏的<script> 标签中定义函数。 在函数内，使用GlideAjax调用后端Script Include，您可以在其中放置创建'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();