kintone API

ボトムシートを作成する

目次

ボトムシートを作成する

モバイル版の画面でボトムシートを作成します。 ボトムシート内に表示する内容は独自のカスタマイズが可能です。

PC版のダイアログを作成するAPIのモバイル版に相当するAPIです。 PC画面で独自にカスタマイズしたダイアログを表示する場合は ダイアログを作成する APIを使用してください。

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

関数

モバイル

kintone.mobile.createBottomSheet(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:表示しない
省略した場合は表示されません。
config.beforeClose 関数 省略可 OKボタン/キャンセルボタン/閉じるボタンのいずれかの操作でボトムシートを閉じる前に実行される関数
関数の引数にはユーザーが選択した操作が渡されます。
  • OK:OKボタンをクリック
  • CANCEL:キャンセルボタンをクリック
  • CLOSE:閉じるボタンをクリック
関数の戻り値としてfalse、またはPromiseの解決後にfalseになる値を返した場合はボトムシートを閉じません。

戻り値

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

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

利用できる画面

モバイル

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

サンプルコード

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
const wrapper = document.createElement('div');

const description = document.createElement('p');
description.textContent = 'ご意見・ご要望を入力してください。';

const input = document.createElement('input');
input.type = 'text';
input.style.width = '99%';

wrapper.append(description, input);

// フィードバック送信用ボトムシート
const bottomSheet = await kintone.mobile.createBottomSheet({
  title: 'フィードバック送信',
  body: wrapper,
  okButtonText: '送信',
  showCancelButton: true,
  cancelButtonText: 'キャンセル',
  showCloseButton: true,
  beforeClose: (action) => {
    if (action === 'OK') {
      const feedback = input.value.trim();
      console.log('送信するフィードバック:', feedback);
      // 送信処理
    }
  },
});

// ボトムシートを表示する
await bottomSheet.show();
表示されるUIのイメージ

ポータル画面で実行した場合の表示例です。
今後製品のアップデートにより変更される場合があります。

注意事項

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