オープンソースのローコード開発ツールのプリザンター(pleasanter)ブログ

オープンソースのローコード開発ツールのプリザンター(pleasanter)のブログとサービス情報サイトです

カテゴリ : お知らせプリザンターとは?使い方スクリプト・スタイル環境構築事例動画

一覧画面の日付に条件を設定して装飾をおこなうスクリプトを作ってみる

こんにちは。
リーデックス小川です。

 最近のマイブームは、近所の散歩です。いまの自宅に12年ぐらい住んでいますが、生まれは別のところだったため、近所でも結構知らない道や場所を発見することがあり、とても楽しいです。最近は、1時間だと足りなくなってきたので、徐々に増やしていっています。そろそろ、自転車の利用を検討するタイミングになってきたかもしれません。

 さて、今回は、一覧画面で日付に条件を設定し、条件を満たしていた時に装飾を行うスクリプトを作ってみましたので、記事にしてみたいと思います。

 

 

期限付きテーブルの完了と同じ設定を他の日付型にできないか?

さて、スクリプトを作ろうとしたきっかけですが、案件のご相談を頂いたお客様から、期限付きテーブルの「完了日」と同じように期限が来たら「○日超過」を表示するような日付項目を設定できないのか?と言われたことです。

現時点(2020/03/06現在)では実現されていないため、今のところはないです、とお答えしたのですが、せっかくなので似たようなプログラムをつくってみようかな?と思い、プログラミングすることにしました。

ただ、すいません、時間の都合上、今回公開しているスクリプトは未完成なため少し手を加える必要があります。詳細は後ほど。

 

プリザンターの独自関数

さて、一覧画面でテーブルの値を取得する場合、jQueryなどで取得するプログラムを各こともできるのですが、プリザンターには便利な独自関数があります。

$p.getGridColumnIndexという「一覧画面」にて、レコードの表示名のデータが何列目にあるか取得するメソッドがあります。詳細は、下記マニュアルをご覧ください。最近プリザンターのマニュアルが見やすくなったので、とても助かっています。

pleasanter.net

 

列の位置が変更されても、上記プログラムで自動的に列の場所が特定されるため、いちいちロジックを組みなおす必要がなくなります。結構便利です。

 

サンプルスクリプト

さて、それではサンプルスクリプトを見てみましょう。今回、下記のような仕様でプログラムを書いています。

  • 一覧画面に表示されている日付型の名前は「開始」
  • 表示されている日付は、「yyyy/mm/dd」から始まる形式
  • 今日の日付と比較し、同じであれば太字、超過していたら赤字で日付を装飾する。

$(function(){
    var start = $p.getGridColumnIndex("開始")+1;
    $('#Grid > tbody > tr > td:nth-child('+ start + ')').each(function() {

    var now = new Date(Date.now());
    var today = new Date(now.getFullYear(),now.getMonth(),now.getDate());

    var arr = $(this).text().substring( 0, 10 ).split('/');
    var target = new Date(arr[0], arr[1]-1, arr[2]);

    if (target > today){
        $(this).html('<span style="color:red">'+$(this).text()+'</span>');
    }else  if(now.getFullYear()+now.getMonth()+now.getDate()==target.getFullYear()+target.getMonth()+target.getDate()){
    $(this).html('<span style="font-weight:bold">'+$(this).text()+'</span>');
    }
});

※上記プログラムを任意のエディタにコピペして整形すると見やすくなると思います。

上記を管理画面のスクリプトに組みこんでいただければOKです。スクリプトへの組み込み方は、下記を参考にしていただければと思います。 

pleasanter.hatenablog.jp

 

一覧画面の表示は下記のようになります。開始の列をご覧ください。今日(2020/03/06)と比較して、同日であれば太字、過ぎていれば赤字になっていると思います。

f:id:h-ogawa-reedex-co-jp:20200306193243p:plain

これだとまだ不完全です

と、ここで時間切れとなってしまいました。このプログラムは、下記が実装されていません。

  • 「何日後」や「何日超過」が表示されない。
  • ページをスクロールした後、新たにページを読み込むと反映されない。
  • 時間表示に対応していない、など

マニュアル等を確認すれば実装できると思いますので、ぜひチャレンジください!

 

まとめ

 今回は、一覧画面の日付に条件を設定して装飾をおこなうスクリプトを作ってみました。ちょっと中途半端に終わってしまいましたが、本ブログを読んでいる方であれば続きは実装できるはず!ということにして、今回は締めさせていただきます(笑)。

それでは、今回はこの辺で。
最後までご覧いただき、ありがとうございました。