【kintone】表示上の値を変える方法

6253 ワード
kintone kintone テキストリンク

こんにちは！
kintoneの画面には

  • レコード一覧画面
  • レコード詳細画面
  • レコード追加画面
  • レコード編集画面

色々とありますが、それぞれ、開いた時に値を変えるという方法を紹介したいと思います。
レコードの値ではなくて、あくまでも表示上、見た目の値の変更です。

アプリ準備

とりあえずフィールドを1つだけ作っておきましょう

フィールド種類：文字列(1行)
フィールドコード：A

追加画面＆編集画面

「追加画面」と「編集画面」はevent.record.フィールドコード.valueの値を変更することにより、画面を開いたときの値を変更できます。

kintone.events.on(["app.record.create.show", "app.record.edit.show"], (event) => {
  event.record.A.value = "開いた時に変更";
  return event;
});

詳細画面

手入力のできない詳細画面ではDOM操作が必要です。
参考：フィールド要素を取得する

kintone.events.on("app.record.detail.show", (event) => {
    const field_A = kintone.app.record.getFieldElement("A"); //←フィールドAの要素を取得
    field_A.innerText = "開いた時に変更"; //←innerText（見た目の値）を変更
    console.log("フィールドAの値は", event.record.A.value); //←実際にレコードに保存されている値
    return event;
  });

↓見た目上は「開いた時に変更」ですが、レコードはもとの値「d」を保持しています。

一覧画面

詳細画面と似たような方法で、以下のようにDOM操作で見た目だけ変更できます。

見た目だけの変更なので、編集ボタンを押すとレコードで保持している、元の値に戻ってしまいます＾＾；
良いやり方があったら教えて下さい👀🙏

kintone.events.on("app.record.index.show", (event) => {
  const field_A = kintone.app.getFieldElements("A");//フィールドAの要素たちを取得
  field_A.forEach((r) => {
    r.firstChild.firstChild.innerText = "開いた時に変更"; //全フィールド変更してるけどここはお好みで
  });
  return event;
});

まとめ

レコードに保存するではなく、例えばある日付からの経過日数などを表示したい時などに重宝するのではないでしょうか👀！？