g_modal - クライアント

  • リリースバージョン: Yokohama
  • 更新日 2025年01月30日
  • 所要時間：20分

    • g_modal API を使用すると、モーダルウィンドウを表示してアプリケーションの機能を拡張できます。

    この API を使用して、ワークスペースにモーダルを表示します。

    この API を使用すると、次のことができます。
    • モーダルウィンドウに入力タイプフィールドを表示します。
    • UI ページや外部リンクなどのフレームに何かを表示します。
    • ユーザーの確認時にアクションを実行します。
    • コンポーネントをロードします。
    • HTML を使用してモーダルのコンテンツを入力します。

    g_modal:alert(文字列タイトル、文字列メッセージ、関数コールバック、スタイルオブジェクト)

    UI アクションに関連するアラートメッセージを表示します。

    表 : 1. パラメーター
    名前 タイプ 説明
    title 文字列 オプション。モーダルのヘッダーに表示するタイトル。

    デフォルト:アラート
    メッセージ 文字列 モーダル本文に表示するメッセージ。
    注:
    パラメーターを 1 つだけ渡すと、メソッドはそれを message パラメーターとして扱います。
    コールバック 関数 オプション。フォームが送信され、サーバーで処理された後に呼び出す関数。
    コールバック関数の形式 callbackFunction(文字列 action_verb, 文字列 sys_id, 文字列 table, 文字列 displayValue) は、次のとおりです。
    • action_verb：実行した UI アクションの名前。例：
      • sysverb_cancel (キャンセルボタン)
      • sysverb_insert (送信ボタン)
      • sysverb_save ([保存] ボタン)。
    • sys_id：影響を受けるレコードの sys_id。
    • table：レコードを含むテーブルの名前。
    • displayValue：フォームに表示される値。

    Default (デフォルト)：
    styleオブジェクトオプション。モーダルに表示する確認ボタンのスタイル。
    "style": {
  "buttonTitle": "String",
  "buttonType": "String"
}
    style.buttonTitle 文字列 オプション。確認ボタンに表示するテキスト。

    デフォルト:OK
    style.buttonType 文字列 オプション。表示する確認ボタンのタイプ。

    デフォルト:デフォルト
    表 : 2. 戻り値
    タイプ 説明
    Promise callbackパラメーターが渡された場合、成功した場合はpromiseを返し、それ以外の場合はエラーを返します。

    次のコード例は、このメソッドを呼び出して、「担当者のみがこのアクションを終了できます」という警告メッセージを表示する方法を示しています。

    function onClick(g_form) {

  if (g_user.userID != g_form.getValue('assigned_to')) {
    g_modal.alert('Only the assigned to can end this action.');
    return;
  }

  var msg = getMessage("Are you sure you want to take this action?");
  g_modal.confirm(getMessage("Confirmation"), msg, function (confirmed) {
    if (confirmed) {
      g_form.setValue('state', 'closed_complete');
      g_form.save();
    }
  });

  return false;
}

    g_modal - confirm(文字列タイトル, 文字列メッセージ, 関数コールバック, スタイルオブジェクト)

    UI アクションに関連する確認メッセージを表示します。

    表 : 3. パラメーター
    名前 タイプ 説明
    title 文字列 オプション。モーダルのヘッダーに表示するタイトル。

    デフォルト:確認
    メッセージ 文字列 モーダル本文に表示するメッセージ。
    注:
    パラメーターを 1 つだけ渡すと、メソッドはそれを message パラメーターとして扱います。
    コールバック 関数 オプション。フォームが送信され、サーバーで処理された後に呼び出す関数。
    コールバック関数の形式 callbackFunction(文字列 action_verb, 文字列 sys_id, 文字列 table, 文字列 displayValue) は、次のとおりです。
    • action_verb：実行した UI アクションの名前。例：
      • sysverb_cancel (キャンセルボタン)
      • sysverb_insert (送信ボタン)
      • sysverb_save ([保存] ボタン)。
    • sys_id：影響を受けるレコードの sys_id。
    • table：レコードを含むテーブルの名前。
    • displayValue：フォームに表示される値。

    Default (デフォルト)：
    style オブジェクト オプション。モーダルに表示する [確認] ボタンと [キャンセル] ボタンのスタイル。
    "style": {
  "cancelTitle": "String",
  "cancelType": "String",
  "confirmTitle": "String",
  "confirmType": "String"
}
    style.cancelTitle 文字列 オプション。キャンセルボタンに表示するテキスト。

    デフォルト:キャンセル
    style.cancelType 文字列 オプション。表示するキャンセルボタンのタイプ。

    デフォルト:confirm
    style.confirmTitle 文字列 オプション。[確認] ボタンに表示するテキスト。

    デフォルト:OK
    style.confirmType 文字列 オプション。表示する確認ボタンのタイプ。

    デフォルト:デフォルト
    表 : 4. 戻り値
    タイプ 説明
    Promise callbackパラメーターが渡された場合、成功した場合はpromiseを返し、それ以外の場合はエラーを返します。

    次のコード例は、このメソッドを呼び出して「このアクションを実行してもよろしいですか?」という確認メッセージを表示する方法を示しています。

    function onClick(g_form) {

  if (g_user.userID != g_form.getValue('assigned_to')) {
    g_modal.alert('Only the assigned to can end this action.');
    return;
  }

  var msg = getMessage("Are you sure you want to take this action?");
  g_modal.confirm(getMessage("Confirmation"), msg, function (confirmed) {
    if (confirmed) {
      g_form.setValue('state', 'closed_complete');
      g_form.save();
    }
  });

  return false;
}

    出力:


    コードによって生成された確認モーダルを示すスクリーンショット

    g_modal - confirmDestroy(文字列タイトル, 文字列メッセージ, 関数コールバック, スタイルオブジェクト)

    UI アクションに関連する確認メッセージを表示します。確認ボタンは 破棄スタイル) として表示されます。

    表 : 5. パラメーター
    名前 タイプ 説明
    title 文字列 オプション。モーダルのヘッダーに表示するタイトル。

    デフォルト:確認
    メッセージ 文字列 モーダル本文に表示するメッセージ。
    注:
    パラメーターを 1 つだけ渡すと、メソッドはそれを message パラメーターとして扱います。
    コールバック 関数 オプション。フォームが送信され、サーバーで処理された後に呼び出す関数。
    コールバック関数の形式 callbackFunction(文字列 action_verb, 文字列 sys_id, 文字列 table, 文字列 displayValue) は、次のとおりです。
    • action_verb：実行した UI アクションの名前。例：
      • sysverb_cancel (キャンセルボタン)
      • sysverb_insert (送信ボタン)
      • sysverb_save ([保存] ボタン)。
    • sys_id：影響を受けるレコードの sys_id。
    • table：レコードを含むテーブルの名前。
    • displayValue：フォームに表示される値。

    Default (デフォルト)：
    style オブジェクト オプション。モーダルに表示する [確認] ボタンと [キャンセル] ボタンのスタイル。
    "style": {
  "cancelTitle": "String",
  "cancelType": "String",
  "confirmTitle": "String",
  "confirmType": "String"
}
    style.cancelTitle 文字列 オプション。キャンセルボタンに表示するテキスト。

    デフォルト:キャンセル
    style.cancelType 文字列 オプション。表示するキャンセルボタンのタイプ。

    デフォルト:confirm
    style.confirmTitle 文字列 オプション。[確認] ボタンに表示するテキスト。

    デフォルト:OK
    style.confirmType 文字列 オプション。表示する確認ボタンのタイプ。

    デフォルト:destructive
    表 : 6. 戻り値
    タイプ 説明
    Promise callbackパラメーターが渡された場合、成功した場合はpromiseを返し、それ以外の場合はエラーを返します。

    この 例では、...

    g_modal - richText(文字列 title, 文字列 richContent, 関数コールバック, 文字列サイズ, 文字列 cancelTitle, 文字列 confirmTitle, 文字列 cancelType, 文字列 confirmType)

    渡された HTML を使用してモーダル内のコンテンツを生成するモーダルを表示します。

    表 : 7. パラメーター
    名前 タイプ 説明
    title 文字列 オプション。モーダルのヘッダーに表示するタイトル。

    デフォルト:空欄
    リッチテキスト 文字列 モーダルに表示する HTML コンテンツ。
    注:
    このメソッドは、 <![CDATA[<script>]]> タグ、インライン JavaScript、およびセキュリティの悪用をもたらす可能性のあるその他の要素を削除します。
    コールバック 関数 オプション。フォームが送信され、サーバーで処理された後に呼び出す関数。
    コールバック関数の形式 callbackFunction(文字列 action_verb, 文字列 sys_id, 文字列 table, 文字列 displayValue) は、次のとおりです。
    • action_verb：実行した UI アクションの名前。例：
      • sysverb_cancel (キャンセルボタン)
      • sysverb_insert (送信ボタン)
      • sysverb_save ([保存] ボタン)。
    • sys_id：影響を受けるレコードの sys_id。
    • table：レコードを含むテーブルの名前。
    • displayValue：フォームに表示される値。

    Default (デフォルト)：
    タイトルをキャンセル 文字列 オプション。キャンセルボタンに表示するテキスト。

    デフォルト:キャンセル
    確認タイトル 文字列 オプション。[確認] ボタンに表示するテキスト。

    デフォルト:OK
    cancelType 文字列 オプション。表示するキャンセルボタンのタイプ。

    デフォルト:confirm
    confirmType 文字列 オプション。表示する確認ボタンのタイプ。

    デフォルト:デフォルト
    表 : 8. 返される内容
    タイプ 説明
    Promise callbackパラメーターが渡された場合、成功した場合はpromiseを返し、それ以外の場合はエラーを返します。

    g_modal - showFields(文字列タイトル, 配列フィールド, 文字列命令, 関数コールバック)

    指定したフィールドを含むモーダルウィンドウを表示します。デフォルトでは、[OK] ボタンと [キャンセル] ボタンが表示されます。

    表 : 9. パラメーター
    名前 タイプ 説明
    コールバック 関数 オプション。フォームが送信され、サーバーで処理された後に呼び出す関数。
    コールバック関数の形式 callbackFunction(文字列 action_verb, 文字列 sys_id, 文字列 table, 文字列 displayValue) は、次のとおりです。
    • action_verb：実行した UI アクションの名前。例：
      • sysverb_cancel (キャンセルボタン)
      • sysverb_insert (送信ボタン)
      • sysverb_save ([保存] ボタン)。
    • sys_id：影響を受けるレコードの sys_id。
    • table：レコードを含むテーブルの名前。
    • displayValue：フォームに表示される値。

    Default (デフォルト)：
    タイトルをキャンセル 文字列 オプション。キャンセルボタンのラベル。

    デフォルト:キャンセル
    cancelType 文字列 オプション。キャンセル ボタンのタイプ。

    デフォルト: default
    確認タイトル 文字列 オプション。[確認] ボタンのラベル。

    デフォルト:OK
    confirmType 文字列 オプション。[確認] ボタンのタイプ 。

    デフォルト: confirm
    フィールド オブジェクトのアレイ モーダルに表示するフィールドのリスト 。 各フィールドは、個別のオブジェクトで定義されます。渡す fields パラメーターは、指定したフィールドのタイプ (fields.type) によって異なります。
    fields: [
  {
    choices: "String",
    dispalyValue: "String",
    label: "String",
    mandatory: Boolean,
    name: "String",
    reference: "String",
    referringTable: "String",
    referringRecordId: "String",
    type: "String",
    value: "String"
  }
]
    fields.選択肢 オブジェクトのアレイ fields.typeパラメーターが choice に設定されている場合は必須です。関連するリストフィールドに表示するオプションのリスト。
    例：
    choices: [
  {
    displayValue: 'Value 1',
    value: 'Value1'
  },
  {
    displayValue: 'Value 2',
    value: 'Value2'
  }
]
    fields.label 文字列 モーダルでこのフィールドのラベルとして表示するテキスト。
    fields.mandatory ブール オプション。フィールドが必須かどうかを示すフラグ。
    有効な値：
    • true：フィールドは必須です。
    • false：フィールドはオプションです。

    デフォルト値：false
    fields.name 文字列 フィールドの内部名。fields.typeパラメーターが参照に設定されている場合は、現在のレコードの参照フィールドが検索に使用されます。
    fields.reference 文字列 fields.typeパラメーターが参照に設定されている場合は必須です。参照するテーブルの名前。

    例: sys_user
    fields.referringTable 文字列 fields.typeパラメーターが参照に設定されている場合は必須です。参照元のテーブルの名前。

    例: インシデント
    fields.referringRecordId 文字列 fields.typeパラメーターが参照に設定されている場合は必須です。UI アクションフォームで呼び出すレコードのSys_id。
    fields.type 文字列 モーダルに表示するフィールドのタイプ。

    有効な値：

    • ブール
    • 選択
    • glide_list
    • html
    • 参照
    • 文字列
    • textarea

    各フィールドタイプには fields.<> 渡すことができる一連のオプションがあります。
    fields.value 文字列 オプション。フィールドに表示する値。

    たとえば、選択肢フィールドに対して、ユーザープロンプトを表示できます。

    値:getMessage(' -- Select -- ')

    または、参照フィールドの場合は、関連するフォームにフィールドの値を表示できます。

    g_form.getValue('caller_id')

    デフォルト：空欄
    命令 文字列 オプション。モーダルに表示する指示。
    サイズ 文字列 モーダルのサイズ。
    可能なモーダル CSS クラス:
    • アラート:300 px
    • SM:400 ピクセル
    • md:600 px
    • lg:900 px
    title 文字列 オプション。モーダルのヘッダーに表示するタイトル。

    デフォルト:空欄
    表 : 10. 戻り値
    タイプ 説明
    Promise 成功した場合は promise を返し、それ以外の場合はエラーを返します。

    次の例は、モーダルウィンドウを使用してユーザーに理由の入力を求め、それをレコードの作業メモフィールドに戻す方法を示しています。then() メソッドは、モーダルが返すものを返す promise を返します。この場合は fieldValues です。クライアント側の作業メモフィールドとフィールド値は、 updatedFields アレイにあります。返されるフィールドは 1 つだけであるため、この例ではインデックス位置を 0 と想定しています。

    function onClick(g_form) {
    g_modal.showFields({
        title: "Enter your reason",
        fields: [{
            type: 'textarea',
            name: 'work_notes',
            label: getMessage('Reason'),
            mandatory: true
        }],
        size: 'lg'
    }).then(function(fieldValues) {
        g_form.setValue('work_notes', fieldValues.updatedFields[0].value);
        g_form.save();
    });
}

    出力:

    関連コードによって生成されたモーダルのスクリーンショット。

    次の例では、上記の例を拡張して、選択肢フィールドと参照フィールドを追加します。

    function onClick(g_form) {

    var fields = [{
        type: 'textarea',
        name: 'work_notes',
        label: getMessage('Reason'),
        mandatory: true
    },
    {
        type: 'choice',
        name: 'reason_code',
        label: getMessage('Reason code'),
        value: getMessage(' -- Select -- '),
        choices: [
          {
            displayValue: 'Duplicate',
            value: 'duplicate'
          },
          {
            displayValue: 'Canceled',
            value: 'canceled'
          }
        ],
        mandatory: true
    },
    {
        type: 'reference',
        name: 'caller_id',
        label: getMessage('What is your name?'),
        mandatory: true,
        reference: 'sys_user',
        referringTable: 'incident',
        referringRecordId: g_form.getUniqueValue(),
	 value: g_form.getValue('caller_id'),
	 displayValue: g_form.getDisplayValue('caller_id')
    }
  ];

  g_modal.showFields({
    title: "Enter your reason",
    fields: fields,
    size: 'lg'
  }).then(function(fieldValues) {
        g_form.setValue('work_notes', fieldValues.updatedFields[0].value);
        g_form.setValue('caller_id', fieldValues.updatedFields[2].value);
        g_form.save();
  });
}

    出力:

    関連コードによって生成されたモーダルのスクリーンショット。

    g_modal - showFrame(文字列タイトル、文字列URL、関数コールバック、文字列サイズ、文字列の高さ、文字列autoCloseOn)

    コンテンツに外部 URL または UI ページへのリンクを使用するモーダルを表示します。

    表 : 11. パラメーター
    名前 タイプ 説明
    title 文字列 オプション。モーダルのヘッダーに表示するタイトル。

    デフォルト:空欄
    url 文字列 IFrame にロードする情報の URL。
    注:
    引数が 1 つだけ渡された場合は、 url パラメーターとして扱われます。
    コールバック 関数 オプション。フォームが送信され、サーバーで処理された後に呼び出す関数。
    コールバック関数の形式 callbackFunction(文字列 action_verb, 文字列 sys_id, 文字列 table, 文字列 displayValue) は、次のとおりです。
    • action_verb：実行した UI アクションの名前。例：
      • sysverb_cancel (キャンセルボタン)
      • sysverb_insert (送信ボタン)
      • sysverb_save ([保存] ボタン)。
    • sys_id：影響を受けるレコードの sys_id。
    • table：レコードを含むテーブルの名前。
    • displayValue：フォームに表示される値。

    Default (デフォルト)：
    サイズ 文字列 モーダルのサイズ。
    可能なモーダル CSS クラス:
    • アラート:300 px
    • SM:400 ピクセル
    • md:600 px
    • lg:900 px
    高さ [Number (番号)] モーダルの高さ 。

    単位:ピクセル
    autoCloseOn 文字列 オプション。モーダルを自動的に閉じる条件 (「URL_CHANGED」など)。

    デフォルト:モーダルを自動的に閉じません。
    表 : 12. 戻り値
    タイプ 説明
    Promise 成功した場合は promise を返し、それ以外の場合はエラーを返します。この約束は、IFrame モーダルがクローズされると解決されます。

    次の例は、KB 記事レコードのsys_idとベース URL を使用して、モデルに KB 記事を表示する方法を示しています。

    function onClick(g_form) {
  var kbId = '24d9243187032100deddb882a2e3ec33'; //sysId of KB article
  g_modal.showFrame({
    url: '/kb_view.do?sys_kb_id=' + kbId,
    title: 'Test Knowledge Article',
    size: 'lg',
    height: 500
  });
}

    出力:

    コードによって生成されたモーダルのスクリーンショット

    この例では、モーダルを作成するときに埋め込み UI ページを使用する方法を示します。g_form API が iFrame にある場合は UI ページでアクセスできないため、UI ページで window.parent.postMessage() を使用して iFrame からワークスペースにデータを渡します。

    function onClick(g_form) {
  function proposeMIC(data) {
    var workNotes = data.msg + "\n" + data.workNotes;
    var notes = g_form.getValue('work_notes') + ' ' + workNotes;
    var bi = g_form.getValue('business_impact') + ' ' + data.businessImpact;
    g_form.setValue('work_notes', notes.trim());
    g_form.setValue('business_impact', bi.trim());
    g_form.submit('sysverb_mim_propose');
  }
	
  function openPopup() {
    if(!g_form.getControl('work_notes')) {
      getMessage('Cannot propose major incident as "Worknotes" is not visible', function(msg) {
	 g_form.addErrorMessage(msg);
      });
      return false;
    }

    var url = "/sn_major_inc_mgmt_mim_propose.do?sysparm_stack=no&sysparm_workspace=" + true;
    g_modal.showFrame({
      title: getMessage("Propose Major Incident"),
      url: url,
      size: 'lg',
      autoCloseOn: 'URL_CHANGED',
      callback: function (ret, data) {
        if (ret)
          proposeMIC(data);
      }
    });
  }
	
  openPopup();
}

    出力:


    コードによって生成されたモーダルのスクリーンショット