SE(しがないエンジニア)のブログ

IT技術ネタ(クラウド・セキュリティ周り)が中心です!他雑記(お馬さん 他いろいろ)もあり。

Pleasanter で「編集モード」から一括更新を自動で行う方法(空更新)

システムの前提(週報→勤怠管理)

自社では以前 Excel にて週報システムなるものが存在していました。Windows PC に SONYFelica リーダをつけて csv 出力をしそれを Excel のアドオンで取り込むというもの。今回、Pleasanter にリプレイスするにあたり、Felica カードはそのままに Pittouch というリーダを利用しました。こんな感じのやつです。
PitTouch Pro2 勤怠パッケージ | SST 株式会社スマート・ソリューション・テクノロジー
これでスキャンするとある Linux サーバの php を実行(Pittouch PHP API)し更にそこから Pleasanter の PHP API を利用して運用している勤怠管理のサイトに書き込むというものです。作りとしては良くある「1回目のスキャンは出勤」「2回目のスキャンは退勤」「3回目以降は出退勤済なのでエラー」といった感じです。勿論、勤怠管理のサイトはゴリゴリと JavaScriptjQuery を利用しております。

お困りごと と その対応

サイトにアクセスした際にデータ更新のオーバーヘッドがあるサイトに関しては基本利用するユーザのボタン押下をトリガーにデータを更新させるのが(個人的に)Pleasanter の作法なのかな?と思っております。そうなると、一覧画面上で JavaScript で計算し表示されたデータは見た目上は(サイトの)データベースのフィールドに格納されていると思いきや入っておらず差異があったりします。自社の場合は「更新」ボタンを押下させる為に「一覧モード」から「編集モード」に一度遷移して「更新」を押下する必要がありました。これは非常に面倒!というわけで改造しました。笑(いや、ワンクリックの差なんですけどね。。)

☆「データ最新化」ボタンを作成する

var regbtnhtml = '<button id="datarenewal" class="button button-icon validate ui-button ui-corner-all ui-widget applied" type="button" accesskey="s" data-icon="ui-icon-arrowreturn-1-n" data-action="print" data-method="post"><span class="ui-button-icon ui-icon ui-icon-arrowreturn-1-n"></span><span class="ui-button-icon-space"> </span>データ最新化</button>';
$('#MainCommands').append(regbtnhtml);

☆ボタンを押下した際の挙動を作る
自社の場合は社員マスターサイトの各社員レコードに「データ最新化」列を設け、その値を見て判断するようにしています。基本は「0」にしておいてボタン押下時に「1」に切り替えます。更新時には通常で利用する API Update で問題ありません。そして、ボタンの処理最下部には下記を忘れずに。これが無いと「編集モード」に遷移できません。

$('button[data-action="Index"]').click();

☆「$p.events.after_set_Index」を利用し「データ最新化」に対する対応を入れる
通常の「編集モード」押下と判断するため、2点目の処理の対応を入れております。「1」が立っている時のみ「更新」ボタンを自動的に押下するようにします。ただし、最終的には「一覧モード」に戻るので「0」へ戻すのは忘れないようにしましょう。コメント行で表すと下記のような感じです。

$p.events.after_set_Index = function () {
    // 変数用意

    // get -> 1 なら update 0 ならスルー
    // API 処理

    // データ最新化する
    if(updateFlag === 1) {
        $('button[data-action="UpdateByGrid"]').click();
    }
}

しかし!これでは上手く行かず・・・・0件更新で「一覧モード」に戻ってしまいます。悩んだ末、Update click() 直前に下記の Delay を入れることで正常に更新できるようになりました。下記の場合は1秒の遅延になります。

setTimeout(function(){
    $('button[data-action="UpdateByGrid"]').click();
},1000);

今回は一例ですが、その他のボタンを画面下部に作成する時も同様の手順で対応できると思います。