テーブル項目の非表示について

いつもお世話になっております。

前回投稿テーブル計算についての続きでまだ改造に当たってスムーズに進まなくて再度質問させていただきました。ぜひアドバイスいただければ幸いです。

やりたいこと:月が1月・2月の場合:時間外とされるのは勤務時間が8時間を超えた場合。それ以外の月は10時間を越えた場合にして、さらにユーザーにはテーブルに「時間外T」を非表示にし(上長には表示させたい)、「時間外」は求めたい。

以下のようなコードで一応動きはしてますが、テーブルの「時間外T」を非表示にできず、また「時間外」が計算式でSUM(時間外T)になっているので、これもどうすればいいかわからなくなっております。アドバイスお願い致します。

(function() {

“use strict”;
kintone.events.on([“app.record.create.show”, “app.record.index.edit.show”, “app.record.edit.show”, “app.record.create.change.Table”, “app.record.edit.change.Table”], function(event) {
event.record.会議合計.disabled = true;
event.record.研修合計.disabled = true;
event.record.質問対応合計.disabled = true;
event.record.時間外.disabled = true;
event.record.実務日数.disabled = true;
var table = event.record.Table.value;
table.forEach(function(row) {
row.value.勤務時間.disabled = true;
row.value.時間外T.disabled = true;
});
return event;
});
kintone.events.on([
“app.record.create.show”, “app.record.edit.show”, “app.record.create.change.Table”, “app.record.edit.change.Table”,
“app.record.create.submit”, “app.record.edit.submit”,
“app.record.create.change.日付”, “app.record.edit.change.日付”,
“app.record.create.change.区分”, “app.record.edit.change.区分”,
“app.record.create.change.開始”, “app.record.edit.change.開始”,
“app.record.create.change.終了”, “app.record.edit.change.終了”,
“app.record.create.change.休憩”, “app.record.edit.change.休憩”,
], function(event) {
var record = event.record;
var mwork = {‘会議合計’: moment.duration(0), ‘研修合計’: moment.duration(0), ‘質問対応合計’: moment.duration(0),‘時間外’: moment.duration(0) };
var dailyWHours = {};
var table = record.Table.value;
table.forEach(function(row, index) {
if (row.value.開始.value && row.value.終了.value && row.value.休憩.value) {
var whours = moment.duration(row.value.終了.value).subtract(moment.duration(row.value.開始.value)).subtract(Number(row.value.休憩.value), ‘hours’);

row.value.時間外T.value = 0;
if (whours.as(‘hours’) > 0) {
row.value.勤務時間.value = whours.as(‘hours’);

var dt1 = row.value.日付.value;
if (dt1) {
if (!dailyWHours.hasOwnProperty(dt1)) {
dailyWHours[dt1] = { whours: whours.as(‘hours’), index: index };
} else {
dailyWHours[dt1].whours += whours.as(‘hours’);
dailyWHours[dt1].index = index;
}
}
var kubun = row.value.区分.value + ‘合計’;
if (mwork.hasOwnProperty(kubun)) {
mwork[kubun] = mwork[kubun].add(whours);
}
} else {
row.value.終了.error = ‘開始 > 終了’;
}
} else {
row.value.勤務時間.value = ‘’;
}
});
Object.keys(mwork).forEach(function(key) {
record[key].value = mwork[key].as(‘hours’);
});
record[‘実務日数’].value = Object.keys(dailyWHours).length;
Object.keys(dailyWHours).forEach(function(dt) {
var dInfo = dailyWHours[dt];
var past = record.月.value;
if (past === ‘1月’ || past === ‘2月’) {
if (dInfo.whours > 8) {
table[dInfo.index].value.時間外T.value = dInfo.whours - 8;
} else {
table[dInfo.index].value.時間外T.value = 0;
}
}else{
if (dInfo.whours > 10) {
table[dInfo.index].value.時間外T.value = dInfo.whours - 10;
} else {
table[dInfo.index].value.時間外T.value = 0;
}
}
});
return event;
});

})();

岡戸さん

時間外手当は、通常であれば1日8時間を超えて労働した場合に支払われるものだと思います。

1年のうちに10ヶ月連続で10時間以上を時間外とするのは、別途「みなし労働時間」などがあるのでしょうね。

ただユーザー(勤務者)に、「時間外T」を非表示にしなければならない理由がわかりません。

いろいろ長時間労働が問題になっている状況ですので、ユーザーも「時間外T」を把握できる仕組みの方が、よろしいのではないでしょうか?

それでも、「時間外T」を非表示する必要があるのであれば、下記の応用で出来ると思います。

印刷画面でテーブルの一部を非表示にできますか?

CSS で詳細画面・編集画面の「時間外T」を指定のクラスで非表示にする指定を行い、

追加・編集・詳細画面表示イベントで非表示にしたい条件(上長以外)の場合に、DOMに非表示にするクラスを追加。

rex0220様

いつも大変お世話になっております。

アドバイスいただき、誠にありがとうございます。おっしゃるとおり時間外Tは表示にしたほうがよろしいと思います。「みなし労働時間」が入っておりまして、ちょっとややこしい状態です。

ただ、できれば最初のごろは非表示にしたいという要望がありましたので、投稿させて頂きました。

印刷画面をメイクアップを再生してつつ、印刷画面でテーブルの一部を非表示にできますか? を応用して試してみたのですが、.xxx-printを含め、

.xxx-print .subtable-gaia.show-subtable-gaia th:nth-child(2),
.xxx-print .subtable-gaia.show-subtable-gaia td:nth-child(2) {
display: none;
}

をどう応用するのかすらわからなくて、躓いております。

また、これは印刷画面になるようですが、ユーザーの登録画面でも「時間外T」の非表示は可能という認識で大丈夫でしょうか?

いつもお世話ばっかりなっておりますが、どうぞご指導のほどどうぞよろしくお願い致します。

クラス名は、なんでもいいのですがわかりやすいように xxx-show にします。

追加・編集・詳細画面で共通のサブテーブルを示すクラス subtable-gaia を指定します。

.xxx-show .subtable-gaia th:nth-child(2),
.xxx-show .subtable-gaia td:nth-child(2) {
display: none;
}

非表示にするイベント処理を指定して、クラスを追加します。

あとは、非表示にする条件を指定してください。

短期間でユーザーが少なければ、リテラルでユーザ判定してもいいかもしれません。

kintone では、組織上の上長の定義が無いので表示するグループを作って判断するか、役職で判断するかなどいろいろ検討してみてください。

 

(function() {
"use strict";
kintone.events.on(["app.record.create.show","app.record.edit.show","app.record.detail.show","app.record.print.show"], function(event) {
document.getElementById('record-gaia').classList.add('xxx-show');
return event;
});
})();

 

 

rex0220 様

いつも大変お世話になっております。

基本知識もかなりうすいため、先に印刷画面をメイクアップで「 備考 」を非表示にすることにチャレンジしたいですが、

これさえもできなくて・・・どこか参考になるものあれば教えていただけますでしょうか?大変恐縮でございますが、どうぞよろしくお願い致します。

JavaScript と CSS をごちゃ混ぜにしています。

CSS は、カスケーディングスタイルシートの略で表示する書式や色などを指定できます。

詳細は 「CSS 入門」で検索してみてください。

kintone の場合、「アプリの設定 > JavaScript / CSSでカスタマイズ」で、JavaScript と CSS でアップロードする場所が異なります。

あと、クラス名は何でもいいといいましたが日本語はやめましょう。

 

JavaScript: sample1.js

(function() {
"use strict";
kintone.events.on(["app.record.create.show","app.record.edit.show","app.record.detail.show","app.record.print.show"], function(event) {
document.getElementById('record-gaia').classList.add('xxx-show');
return event;
});
})();

 

下記ファイル名で CSS を作成してアップロードしてみてください。

CSS: sample1.css

.xxx-show .subtable-gaia th:nth-child(5),
.xxx-show .subtable-gaia td:nth-child(5) {
display: none;
}

rex0220 様

いつも大変お世話になっております。

Cssまだ使ったことがなかったので、恥ずかしいですが、大変勉強になりました。

ちょっと試しにやってみます。何度も何度も本当にありがとうございました。

岡戸様

モバイル版、サブテーブル内の項目非表示は、
以下のような「CSS」ファイルを作成し、行うことができます。

項目の名前は、Chromeのデベロッパーツールで、添付画像のように確認しました。


◆参照画面

.gaia-mobile-v2-app-record-showviewpanel .control-gaia.field-5523528 {
display: none;
}

◆編集画面

.gaia-mobile-v2-app-record-editviewpanel .control-gaia.field-5523528 {
display: none;
}