kintone-config-helper

連結已複製

本頁面使用機器翻譯而成。
機器翻譯免責聲明

什麼是kintone-config-helper？

連結已複製

kintone-config-helper是一個庫，可以方便地從Kintone應用中檢索字段資訊和布局資訊。
使用kintone-config-helper，只需一個步驟即可檢索到與指定欄位類型匹配的欄位資訊和布局資訊。

例如，假設您希望在kintone外掛程式的設置中顯示日期類型字段的清單。

為此，您需要使用獲取欄位 API 來獲取欄位清單，並將其篩選為欄位類型為 Date 類型的欄位。
如果還需要布局資訊，則需要運行 API 來獲取表單的佈局。

GitHub

連結已複製

https://github.com/kintone-labs/config-helper/

授權

連結已複製

麻省理工學院許可證

公文

連結已複製

https://github.com/kintone-labs/config-helper/blob/master/README.md

Quickstart

連結已複製

步驟1：創建kintone應用

連結已複製

添加3個日期欄位，創建kintone應用。
將字段名稱分別更改為"日期 1"、"日期 2"和"日期 3"。

步驟2：創建外掛程式範本

連結已複製

請參閱 create-plugin 文章，為外掛程式創建範本。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


create-kintone-plugin config_helper_sample_project

kintoneプラグインのプロジェクトを作成するために、いくつかの質問に答えてください :)
では、はじめましょう！

? プラグインの英語名を入力してください [1-64文字] config_helper_sample
? プラグインの説明を入力してください [1-200文字] config_helper_sample
? 日本語をサポートしますか？ Yes
? プラグインの日本語名を入力してください [1-64文字] (省略可)
? プラグインの日本語の説明を入力してください [1-200文字] (省略可)
? 中国語をサポートしますか？ No
? プラグインの英語のWebサイトURLを入力してください (省略可)
? プラグインの日本語のWebサイトURLを入力してください (省略可)
? モバイルページをサポートしますか？ No
? @kintone/plugin-uploaderを使いますか？ No

步驟3：在設置介面修改自定義檔

連結已複製

在外掛程式設置介面中，重寫外掛程式設置介面的HTML和JavaScript檔，使用kintone-config-helper。

src/js/config.js 具有以下內容：

 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
31
32
33
34
35
36
37
38
39
40
41
42


(async (PLUGIN_ID) => {
  'use strict';
  const buildDropDownForDate = async () => {
    const dropdown = document.createElement('select');
    dropdown.id = 'message';
    // 使用kintone-config-helper獲取日期類型字段
    const dateFields = await KintoneConfigHelper.getFields('DATE');
    dateFields.forEach((dataField) => {
      const option = document.createElement('option');
      option.value = dataField.code;
      option.textContent = dataField.label;
      dropdown.appendChild(option);
    });
    return dropdown;
  };
  try {
    const form = document.getElementById('js-submit-setting');
    const cancelButton = document.getElementById('js-cancel-button');
    const fields = document.getElementById('js-select-fields');
    // 創建下拉欄位
    const dropdown = await buildDropDownForDate();
    fields.appendChild(dropdown);
    const config = kintone.plugin.app.getConfig(PLUGIN_ID);
    if (config.message) {
      dropdown.value = config.message;
    }
    form.addEventListener('submit', (e) => {
      e.preventDefault();
      kintone.plugin.app.setConfig({message: dropdown.value}, () => {
        window.alert(
          '保存了外掛程式設置。 請更新應用程式。'
        );
        window.location.href = `/k/admin/app/${kintone.app.getId()}/plugin/`;
      });
    });
    cancelButton.addEventListener('click', () => {
      window.location.href = `/k/admin/app/${kintone.app.getId()}/plugin/`;
    });
  } catch (err) {
    window.alert(err);
  }
})(kintone.$PLUGIN_ID);

src/html/config.html 具有以下內容：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


<section class="settings">
  <h2 class="settings-heading">kintone-config-helper sample</h2>
  <p class="kintoneplugin-desc">kintone-config-helper是一個庫，可以方便地檢索Kintone應用的欄位資訊和布局資訊。 </p>
  <form id="js-submit-setting">
    <div class="kintoneplugin-row">
      <label for="fields" class="kintoneplugin-title" style="display: 塊; ">日期字段</label>
      <div class="kintoneplugin-select-outer">
        <div id="js-select-fields" class="kintoneplugin-select"></div>
      </div>
    </div>
    <div class="kintoneplugin-row">
      <button type="button" id="js-cancel-button" class="kintoneplugin-button-dialog-cancel">cancel </button>
      <button class="kintoneplugin-button-dialog-ok">保存</button>
    </div>
  </form>
</section>

步驟4:kintone-config-helper.js 下載和部署

連結已複製

從 GitHub 下載 kintone-config-helper.js 。
kintone-config-helper.js 將下載的放在 src 的 js 目錄下。

1
2
3
4
5
6
7
8
9


config_helper_sample_project
  ├── 省略
  └── src
      ├── 省略
      ├── js
      │   ├── config.js
      │   ├── desktop.js
      │   └── kintone-config-helper.js
      └── manifest.json

步驟5：修改清單檔

連結已複製

kintone-config-helper.js 設定外掛程式以載入。
在上面manifest.json的 config.js 屬性中，js/config.js js/kintone-config-helper.js 添加 .

1
2
3
4
5
6


  "config": {
    "html": "html/config.html",
    "js": [
      "js/kintone-config-helper.js",
      "js/config.js"
    ]

步驟6：外掛程式打包

連結已複製

請參閱 plugin-packer 文章來打包外掛程式。

1
2


cd config_helper_sample_project
kintone-plugin-packer src

步驟7：應用外掛程式

連結已複製

將外掛程式檔添加到kintone中，並將外掛程式應用到已創建的應用中。
有關說明，請參閱以下頁面。

步驟8：動作確認

連結已複製

在應用程式設置中，打開添加的外掛程式的設置螢幕。
確保下拉功能表顯示「日期 1」、"日期 2"和"日期 3"。

本文介紹的示例代碼已經過@kintone/create-plugin v8.0.0和kintone2024年1月版本的測試。

SDK & Tools