GlideModal - クライアント
GlideModal API は、モーダルと呼ばれるコンテンツオーバーレイを表示するためのメソッドを提供します。モーダルは、ページの上に表示され、ユーザーがアクションを実行すると閉じるインタラクティブなウィンドウです。モーダルを使用して、情報を表示したり、質問したり、アクションを実行したりすることができます。
クライアントサイド JavaScript を使用できる任意の場所で、スクリプトで GlideModal メソッドを使用します。これらのメソッドは、ほとんどの場合 [クライアント] チェックボックスがオンになっている UI アクションから呼び出されます。
GlideModal API を使用して、カスタムモーダルを作成することも、既存のベースシステムモーダルを活用することもできます。
GlideModal はワークスペースでは機能しません。代わりに g_modal API を使用します。
- 静的テキスト
- 動的テキスト
- Forms
- イメージ
- ボタン
glide_confirm、glide_info、glide_alertなどのベースシステムモーダルを取得します。- UI ページまたは渡された HTML からモーダルコンテンツを作成します。
- モーダルでタイトルを設定します。
- モーダルの本文コンテンツを設定します。
- モーダルの幅を設定します。
- 設定を取得して設定します。
- モーダルビューを切り替えます。
var dialog = new GlideModal("my_modal");
//Set the dialog title
dialog.setTitle('Show title');
//Set the dialog width
dialog.setWidth(550);
//Display the modal
dialog.render();このコード例は、 renderWithContent() メソッドと HTML を使用してモーダルを作成およびレンダリングし、モーダルのコンテンツを定義する方法を示しています。
function cancelDialog(){
var dialog = new GlideModal('cancelTask');
//Sets the dialog title
dialog.setTitle('Cancel Task');
//Set up valid custom HTML to display
dialog.renderWithContent('<div style="padding:15px"><p>What action do you want to take?</p>
<p><select name="cancellation" id="taskCancellation" class="form-control">
<option value="cancelOnly" role="option">Cancel this task but keep the requested item open</option>
<option value="cancelAll" role="option">Cancel this and all other tasks, closing the requested item</option>
</select></p><div style="padding:5px;float:right"><button style="padding:5px;margin-right:10px" onclick="window.changeTaskAction(this.innerHTML,jQuery(\'#taskCancellation\').val())" class="btn btn-default">Abort</button><button style="padding:5px" class="btn btn-primary" onclick="window.changeTaskAction(this.innerHTML,jQuery(\'#taskCancellation\').val())">Cancel Task</button></div></div>');
//Use the windows object to ensure the code is accessible from the modal dialog
window.changeTaskAction = function(thisButton, thisAction){
//Close the GlideModal dialog window
dialog.destroy();
//Submit to the back-end
if(thisButton=='Cancel Task'){
if(thisAction=="cancelAll"){
g_form.setValue('state',4); //Closed Incomplete -- will close the Requested Item and all other open tasks
}else{
g_form.setValue('state',7); //Closed Skipped -- will only close this task
}
//Regular ServiceNow form submission
gsftSubmit(null, g_form.getFormElement(), 'cancel_sc_task');
}
};
return false; //Prevents the form from submitting when the dialog first load
}
ベースシステムモーダル
ベース ServiceNow インスタンスは、UI ページとして定義された次のモーダルを提供します。これらは、 GlideModal でモーダルを表示するときに使用できます。
glide_alert_standard: [OK ] ボタンと情報アイコンまたは警告アイコンがあるアラートモーダル。-
glide_ask_standard: [はい ] ボタンと [いいえ ] ボタンがある確認モーダル。 -
glide_confirm: [保存しない]、[ キャンセル]、および [保存 ] ボタンがある確認モーダル。 -
glide_confirm_basic: [OK ] および [キャンセル ] ボタンがある、アイコンのない確認モーダル。 -
glide_confirm_standard: [OK ] および [キャンセル] ボタン、および情報アイコンまたは警告アイコンがある確認モーダル。 -
glide_info:情報アイコンとモーダルウィンドウの幅の [OK ] ボタンを含む情報モーダル。 -
glide_progress_standard: [閉じる ] ボタン、情報アイコンまたは警告アイコン、およびスクロールする進捗状況バーがある情報モーダル。進捗状況バーはアニメーション GIF 画像であり、一般的な進捗状況バーとして更新することはできません。 -
glide_progress_no_button:情報アイコンまたは警告アイコン、およびスクロールする進捗状況バーがある情報モーダル。進捗状況バーはアニメーション GIF 画像であり、一般的な進捗状況バーとして更新することはできません。 -
glide_prompt:プロンプトテキストボックスと [OK] および [キャンセル] ボタンを含むモーダル。 -
glide_warn: [OK ] ボタンがあるがアイコンのないシンプルなモーダル。
設定
モーダル設定は、レンダリングされるモーダルにデータを渡す方法を提供します。設定値を設定するには、 setPreference() メソッドまたは setPrefAndReload() メソッドを使用します。次に、 GlideModal - getPreference(文字列名) メソッドを使用して設定された設定を取得します。
UI ページで設定を取得するには、 RP.getWindowProperties().get('preference_name') 関数を使用します。
- autoFocus:モーダルがレンダリングされた後、モーダルが自動的にフォーカスを受け取るかどうかを示すフラグ。モーダルが初期化されたら true に設定します。
- body:渡されたコンテンツをモーダルの本文に設定します。
- buttonClass: ボタンクラスを設定します。
- buttonClassCancel:モーダルのキャンセルボタンのクラスを設定します。
- buttonClassComplete:モーダルの [OK] ボタン (完了) のクラスを設定します。
- buttonLabel ボタンラベルを設定します。
- buttonLabelCancel:モーダルのキャンセルボタンのラベルを設定します。
- buttonLabelComplete:モーダルの [OK] ボタン (complete) のラベルを設定します。
- callbackParam:コールバックパラメータを設定します。
- focusTrap:モーダルが開いているときに、モーダルの外部にあるすべてのインタラクションをブロックするかどうかを示すフラグ。モーダルが初期化されたら false に設定します。
- modal_title:モーダルのタイトルを設定します。setTitle() メソッドで使用されます。
- onPromptCancel: ユーザーが [キャンセル] ボタンを選択したときに呼び出す関数を定義します。例:
dialog.setPreference("onPromptCancel", function() { return false; }); - onPromptComplete: ユーザーが [OK ] ボタンを選択したときに呼び出す関数を定義します。例:
dialog.setPreference("onPromptComplete", function () { gsftSubmit(null, g_form.getFormElement(), 'check_button'); });
GlideModal - GlideModal(文字列 id, ブール readOnly, 数値/文字列の幅)
GlideModal クラスのインスタンスを作成します。
| 名前 | タイプ | 説明 |
|---|---|---|
| ID | 文字列 | モーダルにロードするUI ページ名前。 利用可能な UI ページのリストは、 |
| readOnly | ブーリアン | オプション。モーダルのコンテンツが読み取り専用かどうかを示すフラグ。 有効な値:
デフォルト値:false |
| 幅 | 数値または文字列 | オプション。モーダルの幅 (ピクセル単位) またはモーダル CSS クラス。ピクセル幅が渡されると、指定された幅が対応する CSS クラスに揃えられます。 可能なモーダル CSS クラス:
デフォルト:modal-md 最大幅:900 ピクセル 注: GlideModal - setWidth(数値/文字列の幅)メソッドを使用してモーダルの幅を設定することもできます。 |
次のコード例は、既存の UI ページを使用して GlideModal オブジェクトを作成する方法を示しています。
var dialog = new GlideModal('UI_dialog_name');
//Set the dialog title
dialog.setTitle('Show title');
//Set the desired preferences
dialog.setPreference('table', 'task');
dialog.setPreference('name', 'value');
//Opens the dialog
dialog.render();
次のコード例は、 glide_confirm ファイルを使用して GlideModal オブジェクトを作成する方法を示しています。
var dialog = new GlideModal('glide_confirm', true, 300);
dialog.setTitle(new GwtMessage().getMessage('Confirmation'));
dialog.setPreference('body', new GwtMessage().format("This will complete all update sets in the batch. Continue changing state to complete?"));
dialog.setPreference('focusTrap', true);
dialog.setPreference('onPromptComplete', doComplete);
dialog.setPreference('onPromptCancel', doCancel);
dialog.render();
function doComplete() {
callback(true);
}
function doCancel() {
callback(false);
}
GlideModal - destroy()
現在のモーダルを閉じます。
| 名前 | タイプ | 説明 |
|---|---|---|
| なし |
| タイプ | 説明 |
|---|---|
| なし |
次のコード例は、 destroy() メソッドを使用してモーダルを閉じる方法を示しています。
function cancelDialog(){
var gmod = new GlideModal('cancelTask');
//Sets the dialog title
gmod.setTitle('Cancel Task');
//Set up valid custom HTML to be displayed
gmod.renderWithContent('<div style="padding:15px"><p>What action do you want to take?</p>
<p><select name="cancellation" id="taskCancellation" class="form-control">
<option value="cancelOnly" role="option">Cancel this task but keep the requested item open</option>
<option value="cancelAll" role="option">Cancel this and all other tasks, closing the requested item</option>
</select></p><div style="padding:5px;float:right"><button style="padding:5px;margin-right:10px" onclick="window.changeTaskAction(this.innerHTML,jQuery(\'#taskCancellation\').val())" class="btn btn-default">Abort</button><button style="padding:5px" class="btn btn-primary" onclick="window.changeTaskAction(this.innerHTML,jQuery(\'#taskCancellation\').val())">
Cancel Task</button></div></div>');
//Use the windows object to ensure our code is accessible from the modal dialog
window.changeTaskAction = function(thisButton, thisAction){
//Close the glide modal dialog window
gmod.destroy();
//Submit to the back-end
if(thisButton=='Cancel Task'){
if(thisAction=="cancelAll"){
g_form.setValue('state',4); //Closed Incomplete -- closes the Requested Item and all other open tasks
}else{
g_form.setValue('state',7); //Closed Skipped -- only closes this task
}
//Regular ServiceNow form submission
gsftSubmit(null, g_form.getFormElement(), 'cancel_sc_task');
}
};
return false; //Prevents the form from submitting when the dialog first load
}
次のコード例は、 GlideModal.get().destroy() を使用してモーダルを閉じる方法を示しています。
// The following button should be declared somewhere in the UI page HTML.
<button onclick="closeMe()">close</button>
// The following code is in the client script.
function closeGlideModal() {
try {
GlideModal.get().destroy();
}catch(err){
console.warn("closeGlideModal ERROR: "+err.message);
var x = document.getElementById('THE_NAME_OF_YOUR_UI_PAGE' + '_closemodal');
if (x) {
x.click();
} else {
console.warn("No 'X' close button found!");
}
}
}
function closeMe() {
setTimeout(function(){
closeGlideModal();
},100);
}
GlideModal - get(文字列 id)
指定された UI ページ名で識別される GlideModal オブジェクトを返します。
このメソッドを使用して、 GlideModal.get().destroy() などの他の GlideModal 操作で使用する GlideModal オブジェクトを取得します。
| 名前 | タイプ | 説明 |
|---|---|---|
| ID | 文字列 | モーダルに関連付けられたUI ページ の名前。 ベースインスタンスで提供される ベースシステムモーダル を指定することもできます。 利用可能な UI ページのリストは、 . |
| タイプ | 説明 |
|---|---|
| GlideModal | 要求された GlideModal オブジェクト。 |
この例では、 get() メソッドを使用して、 destroy() メソッドを使用して閉じるモーダルを取得する方法を示します。
// If the modal was initially created like this:
var dialog = new GlideModal("glide_confirm");
dialog.render();
// Some code using the modal
.
.
.
// Now use the get() and destroy() methods to close the modal
var glideModal = new GlideModal().get("glide_confirm");
glideModal.destroy();
// You could also code it like this:
GlideModal.prototype.get("glide_confirm").destroy();
GlideModal - getPreference(文字列名)
指定した設定 (プロパティ) の値を返します。設定を使用して、レンダリング中のページにデータ渡します。
モーダルを作成するアクションを呼び出すと、通常は GlideModal - setPreference(文字列名, 文字列値) メソッドを使用してモーダルに必要な設定も作成されます。UI ページクライアントスクリプトは、このメソッドと次の関数 RP.getWindowProperties().get('preference_name') を使用して、これらの設定を使用できます。
| 名前 | タイプ | 説明 |
|---|---|---|
| name | 文字列 | 取得する設定値の名前。この値は、 GlideModal - setPreference(文字列名, 文字列値) メソッドを使用してモーダルに事前に設定しておく必要があります。 |
| タイプ | 説明 |
|---|---|
| 文字列 | 指定された設定の値。 |
この例は 設定を設定し、指定されたモーダルからその設定を取得する簡単なケースを示しています。
var dialog = new GlideModal('UI_dialog_name');
// Sets the dialog title
dialog.setTitle('Modal title');
// Sets the value of the preference table
dialog.setPreference('table', 'incident');
// Gets the value of the preference table
var title = dialog.getPreference('table');
GlideModal:レンダリング()
モーダルで API がインスタンス化されたときに指定された UI ページをレンダリングします。UI に表示するには、モーダルを定義した後にこのメソッドを呼び出す必要があります。
UI ページを使用してモーダルのコンテンツを生成する場合は、このメソッドを呼び出します。モーダル内に HTML を表示する場合は、 GlideModal - renderWithContent(オブジェクト html) または GlideModal - renderWithContent(文字列 html) を呼び出してモーダルをレンダリングします。
| 名前 | タイプ | 説明 |
|---|---|---|
| なし |
| タイプ | 説明 |
|---|---|
| なし |
次のコード例は、UI ページの glide_confirm と glide_info を使用して GlideModal オブジェクトをインスタンス化し、さまざまな設定を行い、適切なモーダルを UI (レンダリング) に表示する方法を示しています。
var UpdateSetClient = Class.create({
mergeConfirm: function () {
var filterCriteriaMsg = "Please select filter criteria matching two or more update sets to merge";
var messageMap = new GwtMessage().getMessages([filterCriteriaMsg, "Confirmation",
"Are you sure you want to merge these {0} update sets? You will not be able to undo this action",
"Invalid selection", "OK", "Cancel"]);
var list = GlideList2.get('sys_update_set');
var dialog;
if (list.totalRows == 0 || list.totalRows == 1) {
dialog = new GlideModal('glide_info', true, 300);
dialog.setPreference('focusTrap', true);
dialog.setTitle(messageMap["Invalid selection"]);
dialog.setPreference('body', messageMap[filterCriteriaMsg]);
dialog.setPreference('buttonLabel', messageMap["OK"]);
dialog.render();
return;
}
dialog = new GlideModal('glide_confirm', true, 300);
dialog.setTitle(messageMap["Confirmation"]);
dialog.setPreference('focusTrap', true);
dialog.setPreference('body', new GwtMessage().format(
messageMap["Are you sure you want to merge these {0} update sets? You will not be able to undo this action"],
list.totalRows));
dialog.setPreference('buttonLabelComplete', messageMap["OK"]);
dialog.setPreference('onPromptComplete', this.merge);
dialog.setPreference('buttonLabelCancel', messageMap["Cancel"]);
dialog.setPreference('onPromptCancel', this.mergeExit);
dialog.render();
},
merge: function () {
var list = GlideList2.get('sys_update_set');
var query = list.getQuery();
var name = $('update_set_name').value;
var comments = $('update_set_comments').value;
var gurl = new GlideAjax('AngularProcessor','angular.do');
gurl.addParam('sysparm_type', 'hub_client');
gurl.addParam('type', 'merge_update_sets');
gurl.addParam('name', name);
gurl.addParam('comments', comments);
gurl.addParam('query', query);
gurl.getXML(function (response) {
var data = response.responseText.evalJSON();
var p = data.progress;
if (p) {
var progressId = p.progress_id;
var map = new GwtMessage().getMessages(["Close", "Update Set Merge"]);
var dialogClass = window.GlideModal ? GlideModal : GlideDialogWindow;
var dd = new dialogClass("hierarchical_progress_viewer", false, "40em", "10.5em");
dd.setPreference('focusTrap', true);
dd.setTitle(map["Update Set Merge"]);
dd.setPreference('sysparm_renderer_execution_id', progressId);
dd.setPreference('sysparm_renderer_expanded_levels', '0'); // collapsed root node by default
dd.setPreference('sysparm_button_close', map["Close"]);
dd.render();
//when all trackers are completed
dd.on("executionComplete", function(trackerObj) {
if (trackerObj.state == "2") {
var redirectUrl = new GlideURL('sys_update_set_list.do');
window.location.replace(redirectUrl.getURL());
return;
}
var closeBtn = $("sysparm_button_close");
if (closeBtn) {
closeBtn.onclick = function() {
dd.destroy();
};
}
});
}
});
},
mergeExit: function () {
// Do nothing interesting...
}
});
GlideModal - renderWithContent(オブジェクト html)
指定されたオブジェクトベースの HTML コンテンツを使用してモーダルを表示します。
HTML からモーダルコンテンツを派生させる場合は、render() メソッドの代わりに renderWithContent() メソッドを使用します。
| 名前 | タイプ | 説明 |
|---|---|---|
| html | オブジェクト | モーダルに表示する HTML コンテンツ。 |
| タイプ | 説明 |
|---|---|
| なし |
次の例はモーダルに「Hello World」を表示する方法を示しています。
var dialog = new GlideModal();
dialog.renderWithContent('<div>Hello World</div>');
GlideModal - renderWithContent(文字列 html)
指定された文字列ベースの HTML コンテンツを含むモーダルを表示します。
HTML からモーダルコンテンツを派生させる場合は、render() メソッドの代わりに renderWithContent() メソッドを使用します。
| 名前 | タイプ | 説明 |
|---|---|---|
| html | 文字列 | モーダルに表示する HTML コンテンツ。 |
| タイプ | 説明 |
|---|---|
| なし |
このコード例は、ユーザーが選択できる選択肢のリストを含む、渡された HTML 文字列を使用して構築されたモーダルを表示する方法を示しています。
function cancelDialog(){
var dialog = new GlideModal('cancelTask');
//Sets the dialog title
dialog.setTitle('Cancel Task');
//Set up valid custom HTML to display
dialog.renderWithContent('<div style="padding:15px"><p>What action do you want to take?</p>
<p><select name="cancellation" id="taskCancellation" class="form-control">
<option value="cancelOnly" role="option">Cancel this task but keep the requested item open</option>
<option value="cancelAll" role="option">Cancel this and all other tasks, closing the requested item</option>
</select></p><div style="padding:5px;float:right"><button style="padding:5px;margin-right:10px" onclick="window.changeTaskAction(this.innerHTML,jQuery(\'#taskCancellation\').val())" class="btn btn-default">Abort</button><button style="padding:5px" class="btn btn-primary" onclick="window.changeTaskAction(this.innerHTML,jQuery(\'#taskCancellation\').val())">Cancel Task</button></div></div>');
//Use the windows object to ensure the code is accessible from the modal dialog
window.changeTaskAction = function(thisButton, thisAction){
//Close the GlideModal dialog window
dialog.destroy();
//Submit to the back-end
if(thisButton=='Cancel Task'){
if(thisAction=="cancelAll"){
g_form.setValue('state',4);//Closed Incomplete -- will close the Requested Item and all other open tasks
}else{
g_form.setValue('state',7);//Closed Skipped -- will only close this task
}
//Regular ServiceNow form submission
gsftSubmit(null, g_form.getFormElement(), 'cancel_sc_task');
}
};
return false;//Prevents the form from submitting when the dialog first load
}
GlideModal - setPreference(文字列名, 文字列値)
指定された設定 (プロパティ) の値を設定します。設定を使用して、レンダリング中のページにデータ渡します。
UI ページで設定を取得するには、 RP.getWindowProperties().get('preference_name') 関数を使用します。設定の詳細については、「 GlideModal - クライアント」を参照してください。
| 名前 | タイプ | 説明 |
|---|---|---|
| name | 文字列 | 値を設定する設定の名前。 |
| 値 | 文字列 | 指定された設定に保存する値。 |
| タイプ | 説明 |
|---|---|
| なし |
次のコード例は、 table 設定を「task」に設定し、 name 設定を「value」に設定する方法を示しています。
var dialog = new GlideModal('UI_dialog_name');
//Set the dialog title
dialog.setTitle('Show title');
//Set the desired preferences
dialog.setPreference('table', 'task');
dialog.setPreference('name', 'value');
//Opens the dialog
dialog.render();
次の例は、glide_confirmモーダルで基本設定を行う方法を示しています。
var dialog = new GlideModal('glide_confirm', true, 300);
dialog.setTitle('Example Title');
dialog.setPreference('body', 'Example Body');
dialog.setPreference('focusTrap', true);
dialog.setPreference('callbackParam', 'exampleParameter');
dialog.setPreference('buttonClassComplete', 'btn-primary');
dialog.setPreference('onPromptComplete', function(param) {
console.log('Prompt completed with param: ' + param);
});
dialog.setPreference('onPromptCancel', function(param) {
console.log('Prompt cancelled with param: ' + param);
});
dialog.render();
GlideModal - setPreferenceAndReload(アレイプロパティ)
指定された設定を行い、モーダルを再ロードします。
| 名前 | タイプ | 説明 |
|---|---|---|
| プロパティ | アレイ | 設定として設定する名前と値のペア。 |
| タイプ | 説明 |
|---|---|
| なし |
この例では、モーダルを作成してレンダリングし、 ボディ 設定を更新してモーダルを再読み込みする方法を説明します。
var dialog = new GlideModal('glide_confirm');
dialog.setPreference('body', 'This is a test modal body');
dialog.setTitle('This is a test modal title');
dialog.render();
...
dialog.setPreferenceAndReload({'body': 'this is another body'})
GlideModal - setTitle(文字列タイトル)
モーダルのタイトルを設定します。
| 名前 | タイプ | 説明 |
|---|---|---|
| title | 文字列 | モーダルのタイトルに表示するテキスト。 |
| タイプ | 説明 |
|---|---|
| なし |
次のコード例は、モーダルタイトルを「更新するテーブル」に設定する方法を示しています。
var dialog = new GlideModal('UI_dialog_name');
//Sets the dialog title
dialog.setTitle('Table to update');
dialog.setPreference('table', 'task');
dialog.setWidth(550);
//Opens the dialog
dialog.render();
GlideModal - setWidth(数値/文字列の幅)
モーダルの幅を設定します。
GlideModal - GlideModal(文字列 id, ブール readOnly, 数値/文字列の幅)メソッドを使用して最初に API をインスタンス化するときに、モーダルの幅を設定することもできます。
| 名前 | タイプ | 説明 |
|---|---|---|
| 幅 | 数値または文字列 | モーダルの幅 (ピクセル単位) またはモーダル CSS クラス。ピクセル幅が渡されると、指定された幅が対応する CSS クラスに揃えられます。 可能なモーダル CSS クラス:
最大幅:900 ピクセル |
| タイプ | 説明 |
|---|---|
| なし |
次のコード例は、モーダルの幅を 550 ピクセルに設定する方法を示しています。
var dialog = new GlideModal('UI_dialog_name');
//Sets the dialog title
dialog.setTitle('Show title');
dialog.setPreference('name', 'value');
dialog.setWidth(550);
//Opens the dialog
dialog.render();
GlideModal - switchView(文字列 newView)
ビューを変更し、モーダルを再ロードします。
| 名前 | タイプ | 説明 |
|---|---|---|
| newView | 文字列 | 使用するビュー。 |
| タイプ | 説明 |
|---|---|
| なし |
この例では、方法が