はじめに
弊社では、業務改善の一環として kintone を活用することがよくあります。
kintone はノーコードでさまざまなカスタマイズができる点が魅力ですが、要件によってはコードを書いてカスタマイズする必要がある場面も少なくありません。
今回は、簡単な実装として、kintone アプリでクエリパラメータを使用してフィールドの値を更新する方法を紹介します。
想定されるケース
例えば、他の業務アプリから kintone に連携し、ユーザーに入力を促すようなケースを考えます。
この際、連携元のアプリ側で初期値が決まっている場合、クエリパラメータを利用して kintone の入力フィールドに値をセットできると便利です。
実装
実装に入る前に、kintone の API の基本を理解しておく必要がありますが、本記事では詳細な解説は割愛します。
詳しくは以下の公式ドキュメントをご参照ください。
コード
const events = ["app.record.create.show", "app.record.edit.show"];
kintone.events.on(events, async (event) => {
const record = event.record;
const urlParams = new URLSearchParams(window.location.search);
const fruits = urlParams.get("fruits");
if (fruits) {
record.fruits.value = fruits;
record.fruits.disabled = true;
}
});
コードの解説
1. イベントの設定
const events = ["app.record.create.show", "app.record.edit.show"];
kintone.events.on(events, async (event) => {
// 処理内容
});
今回は、新規レコード作成時（app.record.create.show）や編集時（app.record.edit.show）に動作させたいので、このように設定しています。
必要に応じて kintone の API ドキュメントを参考にしながら、適宜イベントを変更してください。
2. クエリパラメータの取得とフィールド更新
const record = event.record;
const urlParams = new URLSearchParams(window.location.search);
const fruits = urlParams.get("fruits");
if (fruits) {
record.fruits.value = fruits;
record.fruits.disabled = true;
}
ここでは、URLSearchParams を使用してクエリパラメータを取得しています。
詳細は以下の公式ドキュメントを参照してください。
このコードでは、クエリパラメータの fruits に値が含まれていれば、その値を kintone の fruits フィールドに設定し、さらに編集できないように disabled を true にしています。
例えば、以下の URL にアクセスすると、fruits フィールドに "apple" という値が自動入力されます。
https://sample.cyboze.com/k/{app_id}/edit?fruits=apple
おわりに
このように、クエリパラメータを活用することで、他システムと連携する際にkintoneの入力をスムーズにすることができます。
Discussion