LoginSignup
1
3

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-01-15

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

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

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

アプリ準備

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

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

image.png

追加画面&編集画面

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

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

112-1.gif

詳細画面

手入力のできない詳細画面では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」を保持しています。
image.png

一覧画面

詳細画面と似たような方法で、以下のように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;
});

113-1.gif

まとめ

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

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3