Tips

一覧に設定した絞り込み条件を使ったカスタマイズビューの作成

目次

はじめに

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

kintoneのビュー機能では、絞り込み条件や並び順を指定して、一致するレコードのみを一覧表示できます。
これらの条件は、JavaScript APIのkintone.app.getQuery()で取得可能です。
今回は、このAPIを使ってオリジナルのカスタマイズビューを作成する方法を解説します。

動作イメージ

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

今回は、信号機アプリを使います。
信号機アプリにカスタマイズビューを使うことでオリジナルの一覧画面を作成します。

デモ環境

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

デモ環境で実際に動作を確認できます。
信号機アプリ (External link)

ログイン情報は以下のページで確認してください。
cybozu developer network デモ環境

カスタマイズを適用するアプリ

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

信号機アプリ

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

次のような信号機アプリを用意します。

フィールド名 フィールドタイプ フィールドコード 備考
信号機 ラジオボタン signal 項目と順番
  • 赤
  • 黄
  • 青
並び:横
初期値:赤
作成日時 作成日時 create_datetime

カスタマイズビューの設定

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

それでは、信号機アプリのカスタマイズビューを作成していきましょう。
一覧の設定方法については、kintoneユーザーヘルプにも詳しく記載されています。
設定方法がわからない場合は、以下のページを確認してください。

一覧の作成画面を表示して、以下のとおり設定してください。

caution
警告

カスタマイズ形式の一覧を作成、または編集するにはkintoneシステム管理権限が必要です。

  • 一覧名
    一覧表示を切り替えるドロップダウンに使用される名前です。 任意の名前を設定してかまいませんが、管理しやすい名前をつけると便利です。

  • レコード一覧の表示形式
    カスタマイズを選択してください。

  • 一覧ID
    kintoneによって自動的に割り振られる数値で、作成のたびに異なるIDが付与されます。
    このIDは後で使用するため、図の赤で囲った部分に表示されている値を確認し、忘れないようにメモしておいてください。

  • HTML
    ここに入力した値（HTMLコード）が一覧画面のデータ表示部分に置き換わります。
    以下に記述した内容については、のちほど詳しく解説します。

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

    <div id="customized-view">
  <table border="1">
    <thead>
      <tr>
        <th>レコード番号</th>
        <th>信号機</th>
        <th>作成日時</th>
      </tr>
    </thead>
    <tbody id="table-body">
    </tbody>
  </table>
</div>

  • 絞り込み条件
    以下のように設定してください。

    • 条件：レコード番号 >=（以上） 1
    • ソート：レコード番号 降順

ここまで入力が完了したら、設定を保存して完了してください。

保存後、一覧画面を表示し、先ほど設定した名前を選択すると、作成したカスタマイズビューが表示されます。
現在は、図のように列のタイトルのみが表示されます。これからデータ部分の表示を作成していきましょう。

実装する処理を整理

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

今回カスタマイズする内容と、実装する処理の流れを以下にまとめます。

カスタマイズする内容

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

作成したカスタマイズビューにデータの表示を実装します。

実装する処理

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

カスタマイズビューにデータを表示する手順は以下のとおりです。

  1. 複数のレコードを取得するAPIを使用して、カスタマイズビューの絞り込み条件を満たしたレコードを取得します。
  2. 取得したレコードをカスタマイズビュー内に表示します。

サンプルコード

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

viewSignal.js

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

event.viewIdの値は先ほどメモした一覧IDの値を入れてください。

 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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

/*
 * Conditional Customize View sample
 * Copyright (c) 2024 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */

(() => {
  'use strict';

  kintone.events.on('app.record.index.show', async (event) => {
    if (event.viewId !== 2129) return;

    // レコードをカスタマイズビューに表示
    const displayCustomizedView = (records) => {
      const viewElement = document.getElementById('customized-view');
      const tableBody = document.getElementById('my-tbody');
      tableBody.innerHTML = '';

      if (records.length === 0) {
        viewElement.innerText = '表示するレコードがありません';
        return;
      }

      const basePath = `/k/${kintone.app.getId()}/show#record=`;

      records.forEach(record => {
        const row = tableBody.insertRow();

        // レコード番号
        const recordLinkCell = row.insertCell();
        const recordLink = document.createElement('a');
        recordLink.href = `${basePath}${record.$id.value}`;
        recordLink.innerText = record.$id.value;
        recordLinkCell.appendChild(recordLink);

        // 信号機
        const signalCell = row.insertCell();
        signalCell.innerText = record.signal.value;

        // 作成日時
        const createdAtCell = row.insertCell();
        const createdAt = new Date(record.作成日時.value);
        createdAtCell.innerText = createdAt.toLocaleString();
      });
    };

    // リクエストパラメータ
    const requestParam = {
      app: kintone.app.getId(),
      query: kintone.app.getQuery()
    };

    try {
      const resp = await kintone.api(kintone.api.url('/k/v1/records.json', true), 'GET', requestParam);
      displayCustomizedView(resp.records);
    } catch (error) {
      console.error('レコードの取得に失敗しました:', error);
    }
  });
})();

サンプルコードの解説

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

カスタマイズビューの絞り込み条件でレコードを取得する

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

複数のレコードを取得するREST APIを使用して、ビューに表示するデータを取得します。
このAPIではクエリを使用することで、必要なデータを検索したり並び替えたりできます。

表示中のビューの絞り込み条件は、JavaScript APIのkintone.app.getQuery()を使用すると、クエリ文字列で取得できます。

ここでkintone.app.getQuery()の実際の出力結果を確認してみましょう。

  1. 作成したカスタマイズビューを表示した状態で、ブラウザーの開発者ツールを開きます。
  2. コンソールにkintone.app.getQuery()と入力し、結果を確認します。

レコード番号 >= "1" order by レコード番号 descと表示されました。
これは、レコード番号が1以上のものを抽出して降順で並び替えていることを意味します。
冒頭で設定したカスタマイズビューの設定画面は以下のとおりでした。

設定画面の絞り込み条件と一致しており、kintone.app.getQuery()で一覧の絞り込み条件を正しく取得できていることが確認できます。
クエリの読み方については、以下の記事を参考にするとよいでしょう。

よろしければ、クエリに対する理解を深めるため、さまざまな検索条件を試して、検索条件とクエリ文字列の関係を確認してみてください。

では、このクエリ文字列を使って実際にレコードを取得してみます。
複数のレコードを取得するために、REST APIのパラメーターとしてアプリIDとクエリ文字列を指定します。

50
51
52
53

const requestParam = {
  app: kintone.app.getId(),
  query: kintone.app.getQuery()
};

REST APIの実行は非同期で行います。
async/awaitを使用すると、非同期処理をあたかも同期処理のように扱うことができます。
詳しくは、以下の記事を参考にしてください。

REST APIの実行結果（レスポンス）はresp変数に格納します。

  • resp.recordsと指定することで、レスポンスの中にあるレコードの情報を取得できます。
  • displayCustomizedView()関数にresp.recordsを渡し、表示する処理はその関数内で行います。

ここまでのプログラムは以下のとおりになります。

12
13
14
15
16
17
18

// リクエストパラメータ
kintone.events.on('app.record.index.show', async (event) => {
  if (event.viewId !== 2129) return;

  // レコードをカスタマイズビューに表示
  const displayCustomizedView = (records) => {
    // ここにレコード取得後の処理を記入する

47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

  };

  // リクエストパラメータ
  const requestParam = {
    app: kintone.app.getId(),
    query: kintone.app.getQuery()
  };

  try {
    const resp = await kintone.api(kintone.api.url('/k/v1/records.json', true), 'GET', requestParam);
    displayCustomizedView(resp.records);
  } catch (error) {
    console.error('レコードの取得に失敗しました:', error);
  }
});

取得したレコードをカスタマイズビューに表示する

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

では、displayCustomizedView()関数の中にレコードを表示する処理を書いていきます。
表示する内容は、一覧を作成するときに指定したHTMLと合わせます。以下がそのHTMLの内容です。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

  <div id="customized-view">
    <table border="1">
      <thead>
        <tr>
          <th>レコード番号</th>
          <th>信号機</th>
          <th>作成日時</th>
        </tr>
      </thead>
      <tbody id="table-body">
      </tbody>
    </table>
  </div>
レコードが存在しない場合

レコードが未登録の場合は、「表示するレコードがありません」と表示します。
records.lengthを使用することで、取得したレコードの件数を確認できます。
この値が0の場合、「表示するレコードがありません」と表示し、処理を終了します。

15
16
17
18
19
20
21
22
23
24

// レコードをカスタマイズビューに表示
const displayCustomizedView = (records) => {
  const viewElement = document.getElementById('customized-view');
  const tableBody = document.getElementById('table-body');
  tableBody.innerHTML = '';

  if (records.length === 0) {
    viewElement.innerText = '表示するレコードがありません';
    return;
  }
レコードの表示方法

では、レコードの一覧表示部分を作成していきます。
一覧表示の各列は、HTMLでレコード番号 信号機 作成日付と指定しているので、この順番で進めます。

レコード番号の部分はリンク形式にし、番号をクリックするとそのレコードを表示するようにします。 kintoneでレコードを参照する際のURLは以下のようになります。

1

https://(ドメイン名)/k/(アプリid)/show#record=(レコード番号)

このため、レコード番号以外の部分を変数に格納し、使い回しができるようにしましょう。
今回は、basePathという変数に格納します。

1

const basePath = `/k/${kintone.app.getId()}/show#record=`;

次に、recordsをforEach関数を使ってレコードごとのデータを取得し、項目に対応する値を適用していきます。
レコード番号はリンク形式で表示するため、aタグを使用します。

26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

const basePath = `/k/${kintone.app.getId()}/show#record=`;

records.forEach(record => {
  const row = tableBody.insertRow();
  // レコード番号
  const recordLinkCell = row.insertCell();
  const recordLink = document.createElement('a');
  recordLink.href = `${basePath}${record.$id.value}`;
  recordLink.innerText = record.$id.value;
  recordLinkCell.appendChild(recordLink);

  // 信号機
  const signalCell = row.insertCell();
  signalCell.innerText = record.signal.value;

  // 作成日時
  const createdAtCell = row.insertCell();
  const createdAt = new Date(record.作成日時.value);
  createdAtCell.innerText = createdAt.toLocaleString();
});

動作確認

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

では、作成したカスタマイズビューを表示してみましょう。

カスタマイズが反映され、レコードの一覧が表示されました。
リンクになっているレコード番号の部分もクリックしてみましょう。

レコードの詳細画面が表示されました。
これで、今回のカスタマイズが正しく機能していることを確認できました。

おわりに

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

今回は、kintone.app.getQuery()を使ってカスタマイズビューを作成する方法を紹介しました。

このサンプルでは、一度に最大100件のレコードしか表示できません。
100件を超えるレコードを表示する場合は、以下の記事を参考にして実装してみてください。

information

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