kintone-config-helper

連結已複製

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

關於kintone-config-helper

連結已複製

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

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

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

GitHub

連結已複製

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

授權

連結已複製

MIT 授權

文件

連結已複製

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

Quickstart

連結已複製

STEP1：創建kintone應用

連結已複製

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

STEP2：創建外掛程式範本

連結已複製

請參閱create-plugin文章，為外掛程式創建範本。
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

STEP3：在設置介面修改自定義檔

連結已複製

在外掛程式設置介面中，重寫外掛程式設置介面的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: block;">日期欄位</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">取消</button>
      <button class="kintoneplugin-button-dialog-ok">儲存</button>
    </div>
  </form>
</section>

STEP4：下載kintone-config-helper.js和部署

連結已複製

從 GitHub 下載 kintone-config-helper.js。
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

STEP5：修改清單檔

連結已複製

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"
    ],

STEP6：外掛程式打包

連結已複製

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

1
2


cd config_helper_sample_project
kintone-plugin-packer src

STEP7：應用外掛程式

連結已複製

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

STEP8：動作確認

連結已複製

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

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

SDK & Tools