建立對話框

目錄

建立對話框

建立對話框。 對話框中顯示的內容可自訂。

建立對話框的API僅適用於電腦版畫面。 行動裝置畫面請使用 建立底部彈出頁 API。

此API是非同步API。
如果要同步處理,請參閱以下頁面。

函式

電腦版
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 函式 關閉對話框的函式
沒有引數和傳回值。

可使用的畫面

電腦版

可使用的畫面同整體自訂的套用畫面。
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 dialog = await kintone.createDialog({
  title: '傳送意見回饋',
  body: wrapper,
  okButtonText: '傳送',
  showCancelButton: true,
  cancelButtonText: '取消',
  showCloseButton: true,
  beforeClose: (action) => {
    if (action === 'OK') {
      const feedback = input.value.trim();
      console.log('傳送的意見回饋:', feedback);
      // 傳送處理
    }
  },
});

// 顯示對話框
await dialog.show();

注意事項

引數config.body中指定的Element物件將作為對話框的內文中的元素使用。
請依需要進行資料清理(sanitize)處理。