kintoneは、業務に合わせてアプリのカスタマイズができる非常に柔軟なプラットフォームです。今回は、特定のフィールドの値が変更されると、別のフィールドのラベル（表示名）が動的に変わる仕組みを作成する方法を紹介します。
このコードを使うと、特定の文字列フィールド（文字列__1行_）の値に応じて、同じフィールドのラベルを変更することができます。たとえば、フィールドに「実行」という文字列が入力された場合、ラベルを「実行」に変更し、それ以外の場合は「例」に変更することができます。
コードの説明
以下に、コード全体を順を追って説明します。
(function () {
kintone.events.on(
[ 'app.record.edit.change.文字列__1行_', 'app.record.create.change.文字列__1行_'],
function (event) {
var conditionfield = event.record.文字列__1行_.value;
var setfield = "文字列__1行_";
var fields = Object.values(cybozu.data.page.FORM_DATA.schema.table.fieldList);
var fieldId = fields.find(_ => _.var == setfield).id;
var fieldName = document.querySelector(`.label-${fieldId} span`);
if(conditionfield == "実行"){
fieldName.innerText = "実行";
} else {
fieldName.innerText = "例";
}
return event;
}
);
})();1. kintoneイベントの設定
kintone.events.on(
[ 'app.record.edit.change.文字列__1行_', 'app.record.create.change.文字列__1行_'],
function (event) {
...
}
);ここでは、kintone.events.onを使用して、特定のイベントをリッスンしています。対象となるイベントは以下の2つです。
app.record.edit.change.文字列__1行_: レコードの編集画面で「文字列__1行_」フィールドの値が変更された時。app.record.create.change.文字列__1行_: レコードの作成画面で「文字列__1行_」フィールドの値が変更された時。
これらのイベントが発生したときに、指定された関数が実行されます。
2. 条件に応じてフィールドのラベルを変更
var conditionfield = event.record.文字列__1行_.value;まず、event.record.文字列__1行_.valueで、変更された「文字列__1行_」フィールドの値を取得します。この値に基づいて、ラベルを動的に変更します。
3. フォームのフィールドIDを取得
var setfield = "文字列__1行_";
var fields = Object.values(cybozu.data.page.FORM_DATA.schema.table.fieldList);
var fieldId = fields.find(_ => _.var == setfield).id;次に、kintoneのフォーム設定からフィールドIDを取得します。cybozu.data.page.FORM_DATA.schema.table.fieldListを使用して、フォーム内のすべてのフィールドの情報を取得し、findメソッドで目的のフィールド（この場合は「文字列__1行_」）のIDを検索しています。
4. ラベルのテキストを変更
var fieldName = document.querySelector(`.label-${fieldId} span`);
if(conditionfield == "実行"){
fieldName.innerText = "実行";
} else {
fieldName.innerText = "例";
}次に、fieldIdを使用してHTML内のラベル要素を取得します。document.querySelectorで該当するラベルのspanタグを選択し、innerTextを使ってそのラベルのテキストを変更しています。
- 「文字列__1行_」のフィールドの値が「実行」の場合、ラベルを「生年月日」に変更。
- それ以外の場合は、ラベルを「例」に変更。
このコードを活用するシチュエーション
このコードは、ユーザーがフォームに入力する内容に基づいて、表示されるラベルを動的に変更するケースに役立ちます。たとえば、以下のようなシナリオで活用できます。
- あるフィールドの値に基づいて、入力ガイドや説明文をユーザーに見せる場合。
まとめ
今回紹介したコードを使うと、kintoneのフィールドラベルを簡単に動的に変更できるようになります。これにより、ユーザーがどのようなデータを入力しているかに応じて、インターフェースを柔軟にカスタマイズすることができ、使い勝手を向上させることができます。
動的なラベル変更だけでなく、他のUI要素の変更にも応用が効くため、kintoneのカスタマイズにおける幅広いシナリオで活用できます。