ダイアログを作成する

目次

ダイアログを作成する

ダイアログを作成します。
ダイアログ内に表示する内容は独自のカスタマイズが可能です。

このAPIは非同期なAPIです。
同期的に処理したい場合は、次のページを参照してください。

関数

PC

kintone.createDialog(config)

引数

引数名 必須 説明
config オブジェクト 必須 ダイアログの設定
config.title 文字列 省略可 タイトル文字列
省略した場合は表示されません。
config.body Elementオブジェクト 省略可 ダイアログ本文の要素
省略した場合は表示されません。
config.showOkButton 真偽値 省略可 OKボタンを表示するかどうか
  • true:表示する
  • false:表示しない
省略した場合は表示されます。
config.okButtonText 文字列 省略可 OKボタンに表示するテキスト
省略した場合はログインユーザーの言語にしたがって「OK」を意味するテキストが表示されます。
config.showCancelButton 真偽値 省略可 キャンセルボタンを表示するかどうか
  • true:表示する
  • false:表示しない
省略した場合は表示されません。
config.cancelButtonText 文字列 省略可 キャンセルボタンに表示するテキスト
省略した場合はログインユーザーの言語にしたがって「Cancel」を意味するテキストが表示されます。
config.showCloseButton 真偽値 省略可 閉じるボタンを表示するかどうか
  • true:表示する
  • false:表示しない
省略した場合は表示されません。
表示しない場合、Escキーでダイアログを閉じる機能も無効化されます。
config.beforeClose 関数 省略可 OKボタン/キャンセルボタン/閉じるボタン/Escキーのいずれかの操作でダイアログを閉じる前に実行される関数
関数の引数にはユーザーが選択した操作が渡されます。
  • OK:OKボタンをクリック
  • CANCEL:キャンセルボタンをクリック
  • CLOSE:閉じるボタンをクリック、またはEscキーを押下
関数の戻り値としてfalse、またはPromiseの解決後にfalseになる値を返した場合はダイアログを閉じません。

戻り値

戻り値はPromiseオブジェクトです。
Promiseオブジェクトの解決時に次の値が取得できます。

戻り値 説明
show 関数 作成したダイアログを表示する非同期な関数
引数はありません。
戻り値はPromiseオブジェクトです。
ダイアログを閉じるとPromiseオブジェクトが解決され次の値が取得できます。
  • OK:ユーザーがOKボタンをクリックしたとき
  • CANCEL:ユーザーがキャンセルボタンをクリックしたとき
  • CLOSE:ユーザーが閉じるボタンをクリックしたとき、またはEscキーを押下したとき
  • FUNCTION:close関数が呼び出されたとき
close 関数 ダイアログを閉じる関数
引数および戻り値はありません。

利用できる画面

PC

利用できる画面は、全体カスタマイズの適用画面に従います。
kintone全体のカスタマイズが適用される画面

ただし、次の画面では利用できません。

  • 検索画面
  • アプリストア
  • プラグイン設定画面

サンプルコード

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const bodyElement = document.createElement('p');
bodyElement.textContent = 'このレコードを削除しますか?';

// ダイアログを作成する
const dialog = await kintone.createDialog({
  title: '確認',
  body: bodyElement,
  okButtonText: '削除する',
  showCancelButton: true,
  cancelButtonText: 'キャンセル',
  showCloseButton: true,
  beforeClose: (action) => {
    if (action === 'OK') {
      console.log('削除する');
      // 削除処理
    } else {
      console.log('削除をキャンセルしました');
    }
  }
});

// ダイアログを表示する
await dialog.show();

注意事項

引数のconfig.bodyに指定されたElementオブジェクトは、そのままダイアログ本文の要素として組み込まれます。
必要に応じてサニタイズ処理を行ってください。