kintone の詳細画面開いたときに、フィールドの値を変えたい

今回は、kintone カスタマイズの初心者がやりがちな（気がする）「そのコード間違っtone」を供養したいと思います。

🤔詳細画面開いたときに、フィールドの値を変えたい

🤔「編集画面じゃなくって、詳細画面でフィールドの値を変えたいのに、変わりません！
どこを変えたらいいですか！？
書いたコードはコレです。」

  // レコード詳細画面表示後
  kintone.events.on(
    ["app.record.detail.show"],
    (event) => {
      const record = event.record;
      console.log("変更前", record.会社名.value);

      record.会社名.value = "テスト";
      console.log("変更後", record.会社名.value);

      return event;
    }
  );

🙄「あ～～。これは・・・。コレじゃあ変わらないですね👀」

🤔「でも、コンソールで確認すると、record.会社名.valueの値は変わってるんですよ👀」

↓コンソールで確認すると内部的には「テスト」に変わっているけど

↓詳細画面の会社名は変わらない。

詳細画面では、event.record 変更しても表示に反映されないよ！

event.record.フィールドコード.value = "何らかの値";
return event; 

で、素直に値が変わってくれるのは、
「レコード追加画面の表示後イベント」と「レコード編集画面の表示後イベント」と「レコード一覧画面のインライン編集フィールド値変更時イベント」です。

では、「詳細画面」ではどうすればいいのか👀

💡見た目だけ変更すればいい場合

フィールドの値としては上書き保存しなくてよくて、詳細画面を開いたときに見た目だけ変わってくれたらいいよ！
という場合は下記のようにDOM操作して変更すると良いと思います。

kintone.app.record.getFieldElement("会社名").textContent= "テスト";

💡フィールドの値ごと更新したい場合

詳細画面を開いたときに最新の値に更新したい！
という場合は下記のように kintone REST API を使って更新する必要があります。

でも「詳細画面を開くたびに更新」というのはつまり、「詳細画面を開かないと一生更新されないまま」ということなので、更新タイミングについてはちゃんと考えないといけません。

また、最新だったらリロードしないのような動きにする場合、「最新とは？」の定義を決めていないと永遠に（API回数が枯渇するまで）リロードし続けるようなアプリになってしまうでしょう。

// レコード詳細画面、
kintone.events.on(["app.record.detail.show"], (event) => {
  const record = event.record;

  // 値が最新だったら更新しない（ここは工夫してね）
  if (record.会社名.value === "テスト") {
    return event;
  }

  // レコード更新のパラメータ設定
  const body = {
    app: kintone.app.getId(),
    id: kintone.app.record.getId(),
    record: {
      会社名: {
        value: "テスト",
      },
    },
  };

  // フィールドの値を更新する
  return kintone.api(
    kintone.api.url("/k/v1/record.json", true), "PUT", body, (resp) => {
      // 更新できたらリロード
      location.reload();
    }
  );
});

まとめ

詳細画面では、event.record 変更しても表示に反映されないよ！ というのはkintoneカスタマイズ初心者の方がハマりがちなところだと思います。
表示だけ変えたい場合、レコード自体更新したい場合で処理の仕方も違うのでどのタイミングで更新するのかなどよく考えてカスタマイズしてみてくださいね👀✨