【kintone】テーブル内のフィールドにボタンを設置

ボタンはスペース要素へ追加することを公式は推奨しているが
スペースを置けないテーブルにはDOM操作で追加するしかない。

ただし、ボタンだけで一列使っても構わないのであれば
チェックボックスをボタン代わりにする方法が参考になる。

---

DOM操作でテーブルにボタンを追加する例。

テーブル内の日付フィールドにボタンを置く。
ボタンを押すと今日の日付が入る。

(() => {
  kintone.events.on([
    'app.record.edit.show',
    'app.record.create.show',
    'app.record.edit.change.テーブル',
    'app.record.create.change.テーブル'
  ], (event) => {

    // 全てのテーブルのフィールド名を取得
    const tableWrappers = document.querySelectorAll(".subtable-row-label-text-gaia");
    let targetTableWrapper = null;
    
    // フィールド名が「テーブル」のテーブルを検索
    tableWrappers.forEach(wrapper => {
      if (wrapper.textContent === "テーブル") {
        targetTableWrapper = wrapper;
      }
    });

    // フィールド名が「テーブル」のテーブルが無い場合は処理中止
    if (!targetTableWrapper) return event;

    // テーブル内でフィールド名が「日付」のフィールドを検索
    const subtableRow = targetTableWrapper.closest('.subtable-row-gaia');
    const tableEl = subtableRow?.querySelector('.subtable-gaia');
    if (!tableEl) return event;
    
    const headers = tableEl.querySelectorAll('.subtable-label-inner-gaia');
    let dateColumnIndex = -1;
    headers.forEach((header, index) => {
      if (header.textContent === "日付") {
        dateColumnIndex = index;
      }
    });

    // テーブル内にフィールド名が「日付」のフィールドが無い場合は処理中止
    if (dateColumnIndex === -1) return event;

    // テーブルの全ての行（tr要素）を取得
    const rows = tableEl.querySelectorAll("tbody tr");
    if (!rows.length) return event;

    // 各行の日付列にボタンを追加
    rows.forEach((row) => {
      // 行の全てのセル（td要素）を取得
      const cells = row.querySelectorAll('td');
      if (cells.length <= dateColumnIndex) return;
      
      // 日付フィールドがあるセルを特定
      const targetCell = cells[dateColumnIndex];
      // そのセル内のコントロール要素を取得
      const targetField = targetCell.querySelector('.control-date-field-gaia');
      
      // ボタン増殖バグの防止
      if (targetField && !targetField.querySelector('.button')) {
        // 日付入力欄を含むコンテナを取得
        const inputContainer = targetField.querySelector('.input-date-cybozu');
        if (inputContainer) {
          // ボタンを作成
          const button = document.createElement("button");
          button.innerText = "本日";
          button.className = "button";
          button.type = "button";
          
          // ボタンのスタイルを設定
          Object.assign(button.style, {
            marginLeft: "5px",    // 日付入力欄との間隔
            padding: "2px 8px",   // ボタン内の余白
            fontSize: "12px",     // フォントサイズ
            whiteSpace: "nowrap"  // テキストの折り返しを禁止
          });

          // ボタンクリック時の処理
          button.onclick = () => {
            // 行追加および行削除による行番号の変化に対応
            const currentSubtableRow = targetTableWrapper.closest('.subtable-row-gaia');
            const currentTableEl = currentSubtableRow?.querySelector('.subtable-gaia');
            if (!currentTableEl) return;

            const currentRows = currentTableEl.querySelectorAll("tbody tr");
            let currentRowIndex = -1;
            
            currentRows.forEach((currentRow, index) => {
              if (currentRow === row) {
                currentRowIndex = index;
              }
            });

            if (currentRowIndex === -1) return;
            
            // クリックされたボタンがある行の日付フィールドに今日の日付を設定
            const today = new Date().toISOString().slice(0, 10);
            const currentRecord = kintone.app.record.get();
            const targetRow = currentRecord.record.テーブル.value[currentRowIndex];
            
            if (targetRow?.value?.日付) {
              targetRow.value.日付.value = today;
              kintone.app.record.set(currentRecord);
            }
          };

          // 日付入力欄を含むコンテナをflexレイアウトにすることでボタンを横並びに配置
          inputContainer.style.display = "flex";
          // コンテナ子要素の縦軸配置を中央揃えにする
          inputContainer.style.alignItems = "center";
          // ボタンをコンテナに追加
          inputContainer.appendChild(button);
        }
      }
    });

    return event;
  });
})();