Form WidgetにClient処理を含むカスタムボタンを追加する方法

atk
Tera Guru

元々Platform UI用に作成していたFormを、Service Portal (またはEmployee Center) から使用できるように移行する要件があります。
そこで、OOBのForm Widgetの利用を考えているのですが、移行対象のFormにはClient処理を含むボタン (UI Action)がいくつかあり、Form Widgetではこれらが使用できないこと (参考Link) が課題になっています。


下記の方法でForm Widget上にClient処理を含むボタンを配置できることは調べて分かったのですが、こちらの方法はAngularJSの知識が必要で、私たちチームにとっては運用の難易度が高いカスタマイズになることが懸念点です。
Service Portal: Client and Server Side Buttons
https://www.servicenow.com/community/itsm-articles/service-portal-client-and-server-side-buttons/ta-...

 

OOBのForm Widgetに、Client処理を含むボタンを実装する方法は他に何かありますでしょうか。
なお、既存のFormに実装済みのボタン (UI Action) はいくつかのものがありますが、例をひとつ挙げると下記のようなものです。

 

/* 記入内容を一時保存するボタン。
   必須項目が未入力でも保存できるようにするため、Client処理で各Fieldの必須化を外してからServer処理を行なう。 */

//Client-side function
function client_script() {
    var fields = g_form.getEditableFields();
    for (var i = 0; i < fields.length; i++) {
		g_form.setMandatory(fields[i], false);
    }
	gsftSubmit(null, g_form.getFormElement(), 'draft');	
}

if(typeof window == 'undefined')
	server_script();

//Server-side function
function server_script(){		
	current.update();
	action.setRedirectURL(current);
}
1 件の受理された解決策

iwai
Giga Sage

特殊な方法ですが、ClientScript の onLoad から HTMLを書き換えて ボタンを追加できます。ClientScript の設定でUI Typeは"Mobile / Service Portal"にしています。Type は "onLoad"。 下記Scriptの click の 中に 処理したいScriptを記載してください。

function onLoad() {
    var win = globalThis ? globalThis : null;
    if (win && typeof win.jQuery != 'undefined' && typeof win.jQuery.fn.jquery != 'undefined') {
        var jq = win.jQuery;
        // ボタンをフッターに追加
        jq('.panel-footer').prepend('<button class="myButton btn btn-default">Test onLoad JQuery Button</button>');
        // ボタンがクリックされたときの処理
        jq('.myButton').click(function() {
            alert('ボタンがクリックされました!');
        });
    }
}

 

元の投稿で解決策を見る

2件の返信2

iwai
Giga Sage

特殊な方法ですが、ClientScript の onLoad から HTMLを書き換えて ボタンを追加できます。ClientScript の設定でUI Typeは"Mobile / Service Portal"にしています。Type は "onLoad"。 下記Scriptの click の 中に 処理したいScriptを記載してください。

function onLoad() {
    var win = globalThis ? globalThis : null;
    if (win && typeof win.jQuery != 'undefined' && typeof win.jQuery.fn.jquery != 'undefined') {
        var jq = win.jQuery;
        // ボタンをフッターに追加
        jq('.panel-footer').prepend('<button class="myButton btn btn-default">Test onLoad JQuery Button</button>');
        // ボタンがクリックされたときの処理
        jq('.myButton').click(function() {
            alert('ボタンがクリックされました!');
        });
    }
}

 

atk
Tera Guru

iwaiさん、

ご教示いただきましてありがとうございます。

このようなやり方もあるのですね。Server側への連携が必要な場合はGlideAjaxを使えば出来そうですね。

大変参考になりました。