kintoneのフィールドIDとは？

kintoneではフィールドの判別に「フィールドコード」「フィールド名」を使いますが、
もう一つ、内部パラメータとして「フィールドID(仮称)」を持っています。

普段表には現れませんが、デバッグコンソールでHTMLを見ると、
こんな風にclass名の一部に使われたりしています。

<div class="control-gaia control-decimal-field-gaia field-5525625" >
<div class="control-label-gaia label-5525625" >
<div class="control-value-gaia value-5525625" >

公開されているJavaScript APIではないので、今後のkintoneバージョンアップで動かなくなる可能性はありますが、現状確認できている挙動としては

フィールドコード：フィールドID = 1:1
フィールドコードを変えてもフィールドIDは変わらない
フィールドIDは自動採番で変更不可能

って感じ。

そして、レコード編集画面でフィールドのDOMを取得するときなんかは、
JavaScript APIではうまく取れないので
このフィールドIDをうまく使ってやると、より高度なhackができるわけです！
（繰り返しますが、非公式カスタマイズなので、動かなくなるリスクを踏まえて自己責任で！）

window.cybozuオブジェクト

実は、window.kintoneとは別にwindow.cybozuというグローバルオブジェクトがあり、
こうしてやると超便利なfieldListオブジェクトが取れることを、同僚の @t2kojima が発見してくれました！

普通のフィールド

cybozu.data.page.FORM_DATA.schema.table.fieldList

サブテーブル

cybozu.data.page.FORM_DATA.schema.subTable

サブテーブル内のフィールド

cybozu.data.page.FORM_DATA.schema.subTable[サブテーブルのフィールドID].fieldList

fieldListオブジェクトのkeyとvalue.idが、どちらもフィールドID。
valueの中にはフィールドコードやらフィールド名やら、
他にもデフォルト値、単位、必須制約などなど宝の山が入っております！

fieldListを使った例

基本

Object.values()で配列にしておくと、その後扱いやすいです。

普通のフィールドだけの場合

シンプルにこれでOK

const fields = Object.values(cybozu.data.page.FORM_DATA.schema.table.fieldList)

サブテーブルを含む場合

ちょっと複雑になるのですが、基本はこの3パターンになると思います。あとは用途によって使い分けてください。

テーブル本体をすべて抽出（テーブル内フィールドは無視）

const fields = Object.values(cybozu.data.page.FORM_DATA.schema.subTable)

テーブル内フィールドだけを、全テーブル横断して抽出

const subTables = Object.values(cybozu.data.page.FORM_DATA.schema.subTable)
const fields = subTables.flatMap(t => Object.values(t.fieldList))

普通のフィールド・テーブル本体・テーブル内フィールドの3種を同列に抽出

const mainFields = Object.values(cybozu.data.page.FORM_DATA.schema.table.fieldList)
const subTables = Object.values(cybozu.data.page.FORM_DATA.schema.subTable)
const subFields = subTables.flatMap(t => Object.values(t.fieldList))
const fields = [...mainFields, ...subTables, ...subFields]

応用

以下、↑のいずれかの方法でfields配列が作られている前提で進めます。

フィールドコードからフィールドIDを調べる

fields.find(_ => _.var === '支払サイト').id
// "5525625"

フィールド名からフィールドIDを調べる

fields.find(_ => _.label === 'レコード番号').id
// "5525614"

フィールドコードをキーにフィールド情報を引くオブジェクトを作る

const fieldMap = fields.reduce((map, field) => ({ ...map, [field.var]: field }), {})
fieldMap.支払サイト.id
// "5525625"
fieldMap.支払サイト.properties.unit
// "日後"

DOM操作でフィールドに任意の値を設定する

const fieldId = fieldMap.支払サイト.id
$input = document.querySelector(`.value-${fieldId} input`)
$input.value = 30

類似オブジェクト

SCHEMA_DATAという似たようなオブジェクトがあって、似たように使えるんですが、こっちはルックアップ・関連レコードフィールドの詳細まで入っています。

cybozu.data.page.SCHEMA_DATA.table.fieldList

終わりに

しつこいですが、あくまで自己責任で使ってくださいね！(笑)
よく忘れるので、自分用メモも兼ねて書きましたー。

ではまた！

kintoneの内部パラメータ「フィールドID」を使いこなす