kintoneの新規・編集レコード画面のフィールドをカスタマイズする裏技
チュンこんにちは！ 私の名前はチュンです。
株式会社メディアフュージョンでkintone関連製品の開発を担当しているベトナム出身のエンジニアです。
kintoneに興味のある方、kintoneを使っている方に私の蓄積した経験を共有したいと思います。
kintoneのアプリのユーザインターフェース（UI）をカスタマイズする際、レコードの詳細画面、新規作成・編集画面、および印刷画面でフィールドの色を変更したり、ツールチップを追加したりしたい場合がああります。これを実現するためには、まずフィールドのHTML要素を取得し、パラメータを変更して、UIを変更することができます。
レコードの詳細画面や印刷画面では、「kintone.app.record.getFieldElement()」を使用することで、フィールドのHTML要素を簡単に取得できます。
ところが、新規作成または編集画面では、kintoneではフィールドのHTML要素を取得する方法を提供されていません。
これらのの画面で「kintone.app.record.getFieldElement()」を使用すると、結果はnullになってしまいます。
では、新規作成・編集画面のフィールドをカスタマイズしたい場合、どのようにすれば良いのでしょうか？
この記事では、「kintone.app.record.getFieldElement()」と同様にフィールドのHTML要素を取得し、新規作成画面や編集画面でも使用できる方法（裏技）を解説します。
準備アプリ
「kintoneアプリストア」にあるサンプルアプリ「顧客リスト」を使用します。
アプリのダウンロードURL: https://your-domain.cybozu.com/k/market。
your-domainの部分には、あなたのkintoneドメインを置き換えてください。
実装のアイデア
新規作成・編集画面のフィールドに対応するHTML要素を確認したところ、これらの要素には常に「value-{ID}」形式のクラスが含まれていることが分かりました。
さらに、このクラスは、レコード詳細画面で 「kintone.app.record.getFieldElement()」を使用して取得できるHTML要素のクラスと一致しています。
このことから、もしかすると各フィールドコードには固有のIDが割り当てられているのではないか？
と思ったのです。フィールドコードのIDを決定するためのソースコードが存在するのではないか？
そこで、kintoneの「Source」タブにあるリソースファイルを調査し、フィールドコードのIDを含むソースコードを発見しました。
cybozu.data.page['FORM_DATA'] のデータには不要な情報が含まれているため、フィールドコードと対応するIDを抽出するための簡単なコードを書きました。
let FORM_DATA = cybozu.data.page['FORM_DATA'];
let ELEMENT_FIELD_ID = {};
let fieldList = FORM_DATA.schema.table.fieldList;
for (let fieldId of Object.keys(fieldList)) {
ELEMENT_FIELD_ID[fieldList[fieldId].var] = fieldId;
}
結果として、変数 ELEMENT_FIELD_ID はフィールドコードとIDのマッピングとなりました。
最後に、フィールドのHTML要素を取得するのは簡単で、わずか1行のコードで済みます。
document.querySelector(`.value-${ELEMENT_FIELD_ID[fieldcode]}`)
例えば、「会社名」フィールドのHTML要素を取得する場合:
document.querySelector(`.value-${ELEMENT_FIELD_ID["会社名"]}`)
本記事を読んでいただきありがとうございます。
次の記事では、長文レコードの詳細画面を、複数のタブに分割し、視覚的に整理する方法を解説します。
参照
