kintoneにおけるテーブル操作の基本（行の更新）

固定リンクがコピーされました

更新日：2024年09月20日

はじめに

固定リンクがコピーされました

本記事では、サンプルアプリをもとに、テーブルの行の更新について解説します。
テーブルの構造と行の追加方法や削除方法については、次の記事を参照してください。

サンプルアプリ：テーブル操作

固定リンクがコピーされました

デモ環境

固定リンクがコピーされました

デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/313/
ログイン情報は cybozu developer networkデモ環境で確認してください。

このアプリの仕様については kintoneにおけるテーブル操作の基本（テーブルの構造・行の追加） | デモ環境で解説しています。

行を更新するサンプルコード

固定リンクがコピーされました

本記事ではデモアプリのサンプルコードから、テーブルの行を更新するサンプルコードを抜き出して紹介します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44


/*
 * テーブル操作（行更新）のサンプルコード
 * Copyright (c) 2024 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */
(() => {
  'use strict';
  kintone.events.on(['app.record.create.show', 'app.record.edit.show'], (e) => {

    // 更新ボタンを設置
    const updateSpace = kintone.app.record.getSpaceElement('updateSpace');
    const updateButton = document.createElement('button');
    updateButton.innerHTML = '更新';
    updateButton.onclick = updateRow;
    updateSpace.appendChild(updateButton);

    return e;
  });

  // 行更新関数
  const updateRow = () => {
    const record = kintone.app.record.get().record;
    const updateText = record.更新_テキスト.value;
    const updateCheckBox = record.更新_チェックボックス.value;
    const targetRowNo = record.更新_行番号.value;
    record.テーブル.value.forEach((row) => {
      if (row.value.行番号.value === targetRowNo) {
        row.value.テキスト.value = updateText;
        row.value.チェックボックス.value = updateCheckBox;
      }
    });
    resetRowNo(record);
    kintone.app.record.set({record: record});
  };

  // 行番号更新関数
  const resetRowNo = (record) => {
    record.テーブル.value.forEach((row, i) => {
      row.value.行番号.value = i + 1;
    });
  };
})();

JavaScriptカスタマイズ全体の構成

固定リンクがコピーされました

このJavaScriptカスタマイズは、「テーブルの行更新」部分と「スペースフィールドにボタンを設置する」部分に分かれます。
今回は「テーブルの行更新」について解説しますので、「スペースフィールドにボタンを設置する」方法は次の記事を参考にしてください。

レコード詳細画面にボタンを配置してみよう

テーブルの行を更新する処理

22
23
24
25
26
27
28
29
30
31
32
33
34
35
36


  // 行更新関数
  const updateRow = () => {
    const record = kintone.app.record.get().record;
    const updateText = record.更新_テキスト.value;
    const updateCheckBox = record.更新_チェックボックス.value;
    const targetRowNo = record.更新_行番号.value;
    record.テーブル.value.forEach((row) => {
      if (row.value.行番号.value === targetRowNo) {
        row.value.テキスト.value = updateText;
        row.value.チェックボックス.value = updateCheckBox;
      }
    });
    resetRowNo(record);
    kintone.app.record.set({record: record});
  };

テーブルの行番号を更新する処理

38
39
40
41
42
43


  // 行番号更新関数
  const resetRowNo = (record) => {
    record.テーブル.value.forEach((row, i) => {
      row.value.行番号.value = i + 1;
    });
  };

以下に、それぞれの部分ごとに解説をします。

行更新処理

固定リンクがコピーされました

行を更新する場合は、大まかに分けて「更新したい行を探す」「行の値を書き換える」の2つの処理が必要です。
「更新したい行を探す」方法はいくつかありますが、今回はループして該当の行の場合は書き換えるという処理にしています。

record取得と追加する行にセットするための値を代入する

24
25
26
27


    const record = kintone.app.record.get().record;
    const updateText = record.更新_テキスト.value;
    const updateCheckBox = record.更新_チェックボックス.value;
    const targetRowNo = record.更新_行番号.value;

`forEach()`を使ってループし、「更新_行番号」と同じ行を更新する

28
29
30
31
32
33


    record.テーブル.value.forEach((row) => {
      if (row.value.行番号.value === targetRowNo) {
        row.value.テキスト.value = updateText;
        row.value.チェックボックス.value = updateCheckBox;
      }
    });

ここまでの変更内容をrecordに反映させる

35

    kintone.app.record.set({record: record});

行番号リセット処理

固定リンクがコピーされました

今回のサンプルアプリでは追加/更新/削除どの関数を使っても毎回最後に行番号をリセットしています。
行番号リセット処理を参考にしてください。

このTipsは、2024年9月版kintoneで動作を確認しています。

kintone API

テーブル