kintone-config-helper
kintone-config-helper とは
kintone-config-helper は、kintone アプリのフィールド情報やレイアウト情報をカンタンに取得できるライブラリです。
kintone-config-helper を使うと、指定したフィールドタイプに一致するフィールド情報やレイアウト情報を、1 回で取得できます。
たとえば、kintone プラグインの設定画面で、設定項目に日付型のフィールドの一覧を表示するとします。
表示するためには、
フィールドを取得する API を使って、フィールドの一覧を取得し、フィールドタイプが日付型のフィールドに絞り込む必要があります。
またレイアウト情報も同時に必要な場合には、
フォームのレイアウトを取得する API も実行する必要があります。
GitHub
https://github.com/kintone-labs/config-helper/
ライセンス
ドキュメント
https://github.com/kintone-labs/config-helper/blob/master/README.md
Quickstart
Step1:kintoneアプリの作成
日付フィールドを 3 つ追加し、kintone アプリを作成します。
フィールド名は、それぞれ「日付 1」「日付 2」「日付 3」に変更してください。
Step2:プラグインのひな型の作成
create-plugin の記事を参考に、プラグインのひな型を作成します。
|
|
Step3:設定画面のカスタマイズファイルの修正
プラグインの設定画面で、kintone-config-helper を使うように、プラグイン設定画面用の HTML と JavaScript ファイルを書き換えます。
-
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 サンプル</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
を、「src」内の「js」ディレクトリーの下に配置します。
|
|
Step5:マニフェストファイルの修正
プラグインで kintone-config-helper.js
を読み込むように設定します。
manifest.json の config.js プロパティで、js/config.js
の上に、js/kintone-config-helper.js
を追加します。
|
|
Step6:プラグインのパッケージング
plugin-packer の記事を参考に、プラグインをパッケージングします。
|
|
Step7:プラグインの適用
プラグインファイルを kintone へ追加し、作成したアプリにプラグインを適用します。
手順は、次のページを参照してください。
Step8:動作確認
-
アプリの設定で、追加したプラグインの設定画面を開きます。
-
プルダウンメニューに「日付 1」「日付 2」「日付 3」と表示されていることを確認します。
この記事で紹介しているサンプルコードは、2022 年 5 月版 kintone で動作を確認しています。