GlideAjaxを使用してユーザーフレンドリーな申請画面に! Potal画面にサーバーデータを表示する方法

技術

Employee Center Scripting

社内業務に関するシステムを一元化して運用・管理できるクラウドサービス「ServiceNow」。
株式会社KYOSOでは、これまでの豊富な運用経験をもとに、ServiceNowの企画立案から運用・保守、内製化までトータルでサポートしています。

このブログでは、サーバーに保存されているデータをGlideAjaxという技術を使用してクライアント側で利用する方法をご紹介させていただきます。

目的

ServiceNowで申請アプリを作成しているとこんな時はありませんか?

  • ユーザー入力は最低限にしておいて、マスターデータを初期値に設定したい
  • ポータル側にサーバー側のデータを利用してメッセージを表示させたい
  • あらかじめサーバーに登録しておいたデータをクライアント側で利用したい

これらはServiceNowが用意しているGlideAjaxを使用することにより簡単に実現できます。

本ブログでは、Potal Siteに申請書を公開し、ユーザーの個人情報など、マスターデータは初期値として画面読み込み時に設定する方法を例に進めていきます。

前提条件:ServiceNowの環境

  • 作成 ・・・ PDI
  • バージョン ・・・ Tokyo
  • 操作 ・・・ System Administrator (admin)
  • 開発環境 ・・・ Studio 

設定ゴール

EmployeeCenterで任意のカタログを開くとデータが入力されている

手順

Script Include を作成する

[Create Application File] から [Script Include] を新規作成

〈プロパティ〉

Name : 任意の名称
Accessible from : This application scope only (スコープ内でのみ使用する場合)
Client callable : true
Active : True

〈スクリプト〉

//Ajaxクラス生成
var PerInfo_Ajax = Class.create();
PerInfo_Ajax.prototype = Object.extendsObject(global.AbstractAjaxProcessor, {
    //この中に関数を定義していき、クライアント側から呼び出す
    getPersonalInfo: function() {
//ログイン中ユーザーのsys_id
        var user_id = this.getParameter('sysparm_user_id');         
var grPerson = new GlideRecord('任意のテーブル名');
        //ユーザーIDを比較し、合致したデータを取得
        if (grPerson.get('user_sysid', user_id)) {
           //resultオブジェクトにマスターテーブルから取得する値を列挙
            result = {
                "r_name": grPerson.getValue("name"),
				"r_address": grPerson.getValue("address")
            };
			
            return JSON.stringify(result);
			
            //個人情報マスターテーブルにデータが存在しない場合は、nullを返却
        } else {
            return null;
        }
    },
    type: 'PerInfo_Ajax'
});

Catalog Client Script を作成する

[Create Application File] から [Catalog Client Script] を新規作成

〈プロパティ〉

Name : 任意の名称
Applies to : A Catalog Item
Active : True
UI Type : Mobile/Service Portal
Type : onLoad
Catalog Item : 任意のカタログアイテム
Applies on a Catalog Item view : True

〈スクリプト〉

//画面読み込み時に起動する関数
function onLoad() {
    //Script Includeで定義した関数をパラメータに設定
    var ga = new GlideAjax("PerInfo_Ajax");
    ga.addParam('sysparm_name', 'getPersonalInfo');
  //ログイン中のユーザーIDをパラメータに設定  
ga.addParam('sysparm_user_id', g_user.userID);
    //GlideAjaxの実行
    ga.getXMLAnswer(function(answer) {
        var clear_value;
        //マスターデータがあった場合はマスターデータの値をセット
        if (answer) {
            var returned_data = JSON.parse(answer);
            g_form.setValue('name', returned_data.r_name);
			g_form.setValue('address', returned_data.r_address);
        } 
    });
}

実装後

申請書の名前欄と住所欄にマスターデータが表示されるようになりました。

さいごに

いかがでしたでしょうか?
今回ご紹介したGlideAjaxは初めはとっつきにくいかもしれませんが、利用することでより一層ユーザーにとって使いやすいシステムに近づくことができます。
自分自身、この方法を学習することを通じて、ServiceNow全体の理解を深めることができました。

最後まで閲覧いただき、ありがとうございました。
あなたにとって有益な情報を提供できたのであれば、大変嬉しく思います。

参考

投稿者プロフィール

H. U
H. U
2022年よりServiceNow業務に従事。主に開発を担当しています。
ServiceNow/VB/PHP/MySQL

保有資格
- ServiceNow Certified System Administrator
- ServiceNow Certified Application Developer
- ServiceNow Certified Implementation Specialist - IT Service Management

※ServiceNow®は、米国および/またはその他の国における ServiceNow, Inc.の商標または登録商標です

TOP