kintone UI Componentでkintoneライクなアラートを表示する

はじめに

kintone UI Componentのドキュメントに「Guides」ページがあって、プラグイン画面を作成する手順などがステップ・バイ・ステップで解説されています。

その中で、kintoneライクなダイアログを表示させているこの部分。
これだけピックアップして使えるととても便利だと思ったので、
関数を作ってみました。ほぼ自分用メモです。

完成イメージ

やりかた

Dialogコンポーネントのインスタンスを作成するラッパー関数をまず作成。
イベントハンドラ内に直接書いても動きますが、関数化しておく方が使い回せて絶対便利。

const { Button, Dialog } = Kuc

const createDialog = ({ text, cancelButton = false, onSubmit, onCancel }) => {
  // 本文
  const content = document.createElement('div')
  content.style.textAlign = 'center'
  content.style.padding = '48px 24px'
  content.innerHTML = `<p>${text}</p>`

  // フッター（ボタン配置位置）
  const footer = document.createElement('div')
  footer.style.textAlign = 'center'

  // キャンセルボタン
  if (cancelButton) {
    const dialogCancelButton = new Button({
      text: 'Cancel',
      type: 'normal',
    })
    dialogCancelButton.style.marginRight = '16px'
    dialogCancelButton.addEventListener('click', async () => {
      if (onCancel) {
        await onCancel()
      } else {
        dialog.close()
      }
    })
    footer.appendChild(dialogCancelButton)
  }

  // OKボタン
  const dialogOKButton = new Button({
    text: 'OK',
    type: 'submit',
  })
  dialogOKButton.addEventListener('click', async () => {
    if (onSubmit) {
      await onSubmit()
    } else {
      dialog.close()
    }
  })
  footer.appendChild(dialogOKButton)

  // Dialogインスタンスを作成して返す
  const dialog = new Dialog({
    content,
    footer,
  })
  return dialog
}

イベントハンドラから使うときは、こんな感じ。

kintone.events.on('app.record.index.show', () => {
  const button = new Button({ text: 'データ一括登録', type: 'submit' })
  kintone.app.getHeaderMenuSpaceElement()?.appendChild(button)

  // ラッパー関数でDialogインスタンスを作成
  const confirmDialog = createDialog({
    text: 'データを一括登録します。実行してもよろしいですか？',
    cancelButton: true,
    onSubmit: async () => {
      // TODO: 何かしらの登録処理

      // コールバックを書いたときは自身を閉じるのも手動で行う
      confirmDialog.close()

      // 完了ダイアログを表示
      const successDialog = createDialog({ text: 'データ登録が完了しました。' })
      successDialog.open()
    },
  })

  button.addEventListener('click', async () => {
    // ダイアログを表示
    confirmDialog.open()
  })
})

改めて完成イメージ

大事なことなので2回貼りました

おわりに

kintoneではSweetAlertとかを使うのが定番でしたが、UI Componentを使うと「あたかもkintone標準ダイアログのような見た目」にできるので、ナチュラルさに拘りたい方は、積極的に導入していくと良いと思います！

できれば、UI Componentの標準機能でこれくらいを一発で出してもらえるとうれしいなぁ〜とは思ってます。サイボウズさん、今後に期待してます！！！