kintoneちょいカスタマイズ：一覧画面に日付入力欄を表示し、日付で絞り込んだ一覧を表示する

はじめに

今回は、kintoneアプリで、日付型のフィールドを、一覧画面上に配置した日付入力欄から指定し、絞り込みを行った一覧画面を表示する、というちょっとしたJavaScriptカスタマイズ、「ちょいカスタマイズ」していきます。

カレンダー形式の一覧画面で、「対応日時」を赤枠で指定した日付を指定して、「検索」をクリックします。

絞り込んだ一覧を表示する、という遷移となります。

標準機能での日付絞り込み

一覧画面のロートマーク（「絞り込む」）をクリックします。

「絞り込む」画面の、「条件」の「すべてのレコード」の隣にある▽をクリックして、ドロップダウンメニューを表示します。メニューより、「対応日時」を選択します。

次に、絞り込みを行いたい日を、カレンダーより選択し、「適用」をクリックします。

指定した日付で絞り込まれた一覧が表示されます。

標準機能での問題

絞り込み一覧画面を表示するまでに、画面をいくつか遷移させないと、目的の画面に到達することができません。そのため、すぐに表示できず、めんどくさい、と感じてしまいます。

使用するアプリ

「kintoneアプリストア」画面より、おすすめのアプリとして表示されている「営業支援パック」に含まれる「活動履歴（営業支援パック）」を使用します。

アプリの準備方法は、下記の記事の「アプリの準備」をご参照ください。

事前準備

下記、2画面のviewIdをメモしておきます。

• 日付入力欄を配置する一覧画面（今回はカレンダー形式の一覧画面）

• 絞り込んだ結果を表示する一覧画面

viewIdは、一覧画面のURLより、「?view=xxxxxx」のxxxxxxの番号になります。
例）https://[ドメイン名].cybozu.com/k/[アプリID]/?view=xxxxxx

実装

全体の処理は、下記です。

jQuery.noConflict();
(function ($) {
  'use strict';
  
  const CALENDER_VIEW_ID = xxxxxxx;
  const LIST_VIEW_ID = yyyyyyy;
  
  const FIELD_CODE = '対応日時';
  
  // 日付型を文字列型に変換
  function getStringFromDate(d) {
     const yearStr = d.getFullYear();
     const monthStr = d.getMonth() + 1;
     const dayStr = d.getDate();
     
     let formatStr = 'YYYY-MM-DD';
     formatStr = formatStr.replace(/YYYY/g, yearStr);
     formatStr = formatStr.replace(/MM/g, String(monthStr).padStart(2,'0'));
     formatStr = formatStr.replace(/DD/g, String(dayStr).padStart(2,'0'));
     
     return formatStr;
  };
  

  kintone.events.on("app.record.index.show", function (event) {
    console.log(event.viewId);
    if (event.viewId !== CALENDER_VIEW_ID) return event;

    //カレンダー入力
    const today = new Date('2018/07/01');
    const todayStr = getStringFromDate(today);
    let calender = $("<input>");
    calender.attr({ type: 'date', id: 'start', value: todayStr, min: '2018-01-01', max: '2030-12-31' });

    // クエリ文字列生成    
    const createQueryString = (str) => {
      if (!str) return;
      if (str === "") {
        return "";
      } else {
        return '&query='+ FIELD_CODE +' = "' + str + '"';
      }
    };
    
    // 対応日時検索
    const searchForwordingDay = () => {
      const viewpath = '?view=' + LIST_VIEW_ID;
      const query = createQueryString(calender.val());
      document.location = location.origin + location.pathname + viewpath + encodeURI(query);
    }
  
    // 検索ボタン選択時の処理
    const searchButton = $("<input>");
    searchButton.attr({ type: 'submit', value: '対応日時検索' });
    searchButton.click(function () {
      searchForwordingDay();
    });


    //重複を避けるため要素をあらかじめクリアしておく
    let node_space = kintone.app.getHeaderMenuSpaceElement();
    for (let i = node_space.childNodes.length - 1; i >= 0; i--) {
      node_space.removeChild(node_space.childNodes[i]);
    }

    let label = $('<label>');
    label.append('検索');
    label.append(calender);
    label.append(searchButton);
    $(kintone.app.getHeaderMenuSpaceElement()).append(label);
    return event;
  });
})(jQuery);

順番に処理の内容を説明します。

①jQueryの定義

jQuery.noConflict();
(function ($) {
  'use strict';
   :
})(jQuery);

DOMの操作を行うため、jQueryを使用します。下記の記事を参考に、先頭から2行目と、最終行を書き換えています。

https://developer.cybozu.io/hc/ja/articles/204695384-%E7%AC%AC12%E5%9B%9E-jQuery%E3%82%92%E5%88%A9%E7%94%A8%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86

②kintoneのイベント処理

レコード一覧画面の表示後イベント時に処理を実施するようにします。

現在表示中のviewIdを判定し、日付入力欄を配置する一覧画面のviewIdの場合のみ処理するようにします。

  kintone.events.on("app.record.index.show", function (event) {
    console.log(event.viewId);
    if (event.viewId !== CALENDER_VIEW_ID) return event;

https://developer.cybozu.io/hc/ja/articles/201941964-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E4%B8%80%E8%A6%A7%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88#step1

③日付入力欄を配置

日付選択の入力欄に、下記の属性を設定します。

• value : 日付の入力欄の既定値として、最初に表示する日付

• min：入力欄で指定できる最小の日付

• max：入力欄で指定できる最大の日付

いずれも、日付は、「YYYY-MM-DD」 形式で指定します。

const today = new Date('2018/07/01');
const todayStr = getStringFromDate(today);
let calender = $("<input>");
calender.attr({ type: 'date', id: 'start', value: todayStr, min: '2018-01-01', max: '2030-12-31' });

なお、input type="date”の詳細は、下記をご参照ください。

- HTML: HyperText Markup Language | MDN

次に、日付選択の入力欄と、検索ボタンを配置します。

    let label = $('<label>');
    label.append('検索');
    label.append(calender);
    label.append(searchButton);
    $(kintone.app.getHeaderMenuSpaceElement()).append(label);

④クエリ文字列の作成

日付選択の入力欄に入力された日付で、「対応日時」フィールドで絞り込んだ一覧を表示するために、クエリ文字列を作成します。

    // クエリ文字列生成    
    const createQueryString = (str) => {
      if (!str) return;
      if (str === "") {
        return "";
      } else {
        return '&query='+ FIELD_CODE +' = "' + str + '"';
      }
    };

クエリの指定方法については、下記記事をご参照ください。

https://developer.cybozu.io/hc/ja/articles/202388664

④対応日時フィールドで絞り込んだ一覧画面表示関数

日付選択の入力欄に入力された日付で、「対応日時」フィールドで絞り込んだ一覧を表示する関数の処理です。

    // 対応日時検索
		const searchForwordingDay = () => {
      const viewpath = '?view=' + LIST_VIEW_ID;
      const query = createQueryString(calender.val());
      document.location = location.origin + location.pathname + viewpath + encodeURI(query);
    }

JavaScript/CSSでカスタマイズ画面での設定

実装したコードをアップしていきます。

「設定」→「カスタマイズ／サービス連携」→「JavaScript/CSSでカスタマイズ」をクリックします。

「JavaScript/CSSでカスタマイズ」画面より、実装したソースを「アップロードして追加」します。

次に、jQueryを使用するため、Cybozu CDNを利用します。

「URL指定で追加」をクリックし、URLを指定、「保存」をクリックします。

設定する詳細URLは、下記「jQuery」の章にてご確認ください。

https://developer.cybozu.io/hc/ja/articles/202960194

ソースコードの呼び出し順を変更するため、上記で追加したjQueryのURLは先頭行に移動しておきます。
「保存」をクリックし、運用環境へ反映させて終了です。

まとめ

今回は、kintoneアプリで、日付型のフィールドを、一覧画面上に配置した日付入力欄から指定し、絞り込みを行った一覧画面を表示するという、JavaScriptカスタマイズについてお伝えしました。

今回参考にさせていただいたサイトは下記です。 大変参考になりました。ありがとうございました！

kintoneアプリ一覧画面で絞り込み検索がやりにくいので簡単な検索窓を付けるサンプル(随時コーディング) - Qiita