建立底部表單

目錄

建立底部表單

在行動版畫面中建立底部表單。 底部表單內顯示的內容可以自訂。

此API等同於PC版的建立對話方塊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 物件會直接嵌入為底部表單本文的元素。
請視需要進行消毒(sanitize)處理。