CATEGORIES:KINTONE
Kintone一覧画面に検索窓を追加する-その2

Kintoneの一覧画面に2つのフィールドに対し、入力欄1つを作成し対象レコードを抽出する。ビル情報として名称や住所などのレコードが管理されているアプリから条件にあったレコードを抽出する。

検索窓が一つで、リセットボタンも追加する。

<前提条件>
・検索窓は「ビル名」用「ビルコード」用共用で1つ設置
・リセットボタンを押すと下に一覧にリセットする
・KIntone制約で「ビル名」は1文字では検索出来ない(最低でも2文字以上)
・英数字検索が単語単位(cyで、cybozeがヒットしない!)


// 検索対象のフィールドコード(Kintoneのフィールド名と一致させる)
const FIELD_CODE1 = "ビル名"; // 部分一致検索をするフィールド
const FIELD_CODE2 = "ビルコード"; // 完全一致検索をするフィールド

// 検索窓のデザイン設定
const SEARCH_INPUT_WIDTH = "300px"; // 検索窓の幅を指定(必要に応じて変更可能)

// 検索欄のラベル表示(Kintoneヘッダー部分に表示される)
const FIELD_CODE_NAME = "ビル名またはビルコード"; 

(function () {
  "use strict";

  // 一覧画面が表示された時に実行(Kintoneのイベントをトリガー)
  kintone.events.on("app.record.index.show", function (event) {
    const result = {};

    // URLのクエリパラメータを取得(検索キーワードを復元するため)
    const urlParams = new URLSearchParams(window.location.search);
    const query = urlParams.get("query");

    if (query) {
      // クエリから検索ワードを抽出(例: `?query=(ビル名 like "キーワード")` )
      const match = query.match(/like\s*"([^"]+)"/);
      if (match) {
        result.searchKeyword = decodeURIComponent(match[1].trim());
      }
    }

    // 検索入力フィールドの作成
    const searchInput = document.createElement("input");
    searchInput.value = result.searchKeyword || ""; // 過去の検索ワードをセット(なければ空)
    searchInput.placeholder = "ビル名またはビルコードで検索"; // 入力欄のプレースホルダー
    searchInput.style.width = SEARCH_INPUT_WIDTH; // 検索窓の幅を設定

    // 「Enter」キーで検索を実行できるようにする
    searchInput.addEventListener("keypress", function (e) {
      if (e.key === "Enter") {
        keyword_search();
      }
    });

    // 検索ボタンの作成
    const searchButton = document.createElement("button");
    searchButton.textContent = "search"; // ボタンの表示名
    searchButton.addEventListener("click", keyword_search); // クリック時に検索実行

    // リセットボタンの作成
    const resetButton = document.createElement("button");
    resetButton.textContent = "reset"; // ボタンの表示名
    resetButton.addEventListener("click", function () {
      location.href = location.origin + location.pathname; // 検索クエリを削除し、一覧をリロード
    });

    // 検索実行関数(検索ボタンまたはEnterキー押下で実行)
    function keyword_search() {
      const keyword = searchInput.value.trim(); // 入力された検索ワードを取得
      let str_query = "";

      if (keyword) {
        // 「ビル名」または「ビルコード」に一致するレコードを検索
        str_query = `?query=(${FIELD_CODE1} like "${keyword}") or (${FIELD_CODE2} like "${keyword}")`;
      }

      location.href = location.origin + location.pathname + str_query; // 検索結果のページへ遷移
    }

    // 検索フォームを Kintone のヘッダーエリアに追加
    const headerSpace = kintone.app.getHeaderMenuSpaceElement();
    headerSpace.innerHTML = ""; // 既存の要素をクリア(重複防止)

    // 検索バーのラベルと要素を組み立てる
    const label = document.createElement("label");
    label.appendChild(document.createTextNode(FIELD_CODE_NAME + " ")); // ラベルテキスト
    label.appendChild(searchInput); // 検索入力欄
    label.appendChild(document.createTextNode(" ")); // スペース調整
    label.appendChild(searchButton); // 検索ボタン
    label.appendChild(document.createTextNode(" ")); // スペース調整
    label.appendChild(resetButton); // リセットボタン

    // Kintoneのヘッダー部分に検索フォームを追加
    headerSpace.appendChild(label);

    return event;
  });
})();

NOTICES

  • 記事内容は実装させたものがほとんどですが自己責任で参考にしてください。

TO HEADER