いつもお世話になっております。
カスタマイズビューに挑戦したのですが、nullを非表示にする方法がわからず行き詰まっています。
外出状況等をホワイトボードに記入する代わりで、在席状況を確認するためのアプリです。
現在のコードは下記の通りです。
関係ないところもあると思いますが、一応すべて貼り付けました。
HTML
<table id="table">
<thead>
<tr>
<th>レコード番号</th>
<th>氏名</th>
<th>行先等</th>
<th>外出時刻</th>
<th>帰所予定時刻</th>
<th>車両</th>
</tr>
</thead>
<tbody id="t_body">
</tbody>
</table>
CSS
@charset "UTF-8";
table{
width: 100%;
border-collapse: collapse;
border-spacing: 0;
table-layout:fixed;
}
table th,table td{
padding: 10px 0;
text-align: center;
border-bottom: 1px solid gray;
}
table tr:nth-child(odd){
background-color: #eee
}
th{
background-color:white !important;
}
Javascript1(ダイアログから登録するものなので、ここは関係ないと思います。)
jQuery.noConflict();
(function($) {
"use strict";
kintone.events.on("app.record.index.show", function(event){
if (document.getElementById('my_index_butto') !== null) {
return;
}
async function GetName(name){
var body = {
"app" : 18,
"query" : 'name like "' + name + '"',
"fields" : ['name'],
"totalCount" :true
}
const res = await kintone.api('/k/v1/records','GET',body);
var re_name = res.records[0].name.value;
//console.log(re_company);
return re_name;
};
var myIndexButton = document.createElement('button');
myIndexButton.id = 'my_index_butto';
myIndexButton.innerText = '簡易登録';
myIndexButton.setAttribute('class','kintoneplugin-button-normal');
var myHeaderSpace = kintone.app.getHeaderMenuSpaceElement();
myHeaderSpace.appendChild(myIndexButton);
var title;
var createDialogContent = function(){
var dialog =
$('<dialog id="dialog">'+
'<div>'+
'<label class = "label">登録内容</label><br>'+
'<div class="kintoneplugin-select-outer">'+
'<div class="kintoneplugin-select">'+
'<select id ="status">'+
'<option value = "1">外出する</option>'+
'<option value = "2">在宅勤務</option>'+
'<option value = "3">休み</option>'+
'</select>'+
'</div>'+
'</div>'+
'</div>'+
'<input class="kintoneplugin-input-text" id="name" type="text" size="10" placeholder="氏名検索"></input>'+
'<input class="kintoneplugin-input-text" id="full_name" type="text" size="30" placeholder="氏名"></input><br>'+
'<label class = "label">外出時刻 </label>'+
'<label class = "label"> 帰所予定時刻</label><br>'+
'<input type = "time" name ="time" step="900" min="08:00" max="19:00" id = "out_time"></input>'+
'<input type = "time" name ="time" step="900" min="08:00" max="19:00"id = "comeback_time"></input><br>'+
'<div id = "text">'+
'<input class="kintoneplugin-input-text" id="destination" type="text" size="40" placeholder="行先等"></input><br>'+
'</div>'+
'<label class = "label">使用車両</label><br>'+
'<div class="kintoneplugin-select-outer">'+
'<div class="kintoneplugin-select">'+
'<select id ="drop_car">'+
'<option value = "ー">-</option>'+
'<option value = "ステラ">ステラ</option>'+
'<option value = "ミライース5752">ミライース5752</option>'+
'<option value = "ミライース">ミライース</option>'+
'<option value = "グレイス">グレイス</option>'+
'<option value = "ノート">ノート</option>'+
'</select><br>'+
'</div>'+
'</div>'+
'<div>'+
'<button id = "post" class="kintoneplugin-button-normal">登録する</button>'+
'<button id = "cancel" class="kintoneplugin-button-normal">キャンセル</button>'+
'</div>'+
'</dialog>');
$(myHeaderSpace).append(dialog);
};
createDialogContent();
$("#dialog").hide();
myIndexButton.onclick = function() {
$("#dialog").show();
var now = moment().format('hh:mm');
$("#out_time").val(now);
$("#status").blur(function(){
var t_status = $("#status").val();
switch(t_status){
case '2' :
title = moment().add('days',1).format('MM/DD') + " 在宅勤務";
$("#destination").val(title);
break;
case '3' :
title = moment().add('days',1).format('MM/DD') + " 休み";
$("#destination").val(title);
break;
}
});
$("#name").blur(async()=>{
var name = $('#name').val();
var full_name = await GetName(name);
$("#full_name").val(full_name);
});
}
$("#cancel").on("click", function(){
$("#dialog").hide();
});
$("#post").on("click",function() {
if($("#status").val() =='1'){
title = $('#destination').val();
}
var drop_car = $('#drop_car').val();
var out_time = $('#out_time').val();
var comeback_time = $('#comeback_time').val();
var name = $("#name").val();
var status = $("#status").val();
var full_name = $("#full_name").val();
var body;
switch(status){
case '1': body = {
"app":320,
"record": {
"外出時刻": {
"value":out_time
},
"帰所予定時刻":{
"value":comeback_time
},
"氏名":{
"value":full_name
},
"行先等":{
"value":title
},
"車両":{
"value":drop_car
},
"status":{
"value":'外出中'
}
}
};
break;
case '2' : body = {
"app":320,
"record": {
"氏名":{
"value":full_name
},
"行先等":{
"value":title
},
"車両":{
"value":drop_car
},
"status":{
"value":'在宅勤務'
}
}
};
break;
case '3' : body = {
"app":320,
"record": {
"氏名":{
"value":full_name
},
"行先等":{
"value":title
},
"車両":{
"value":drop_car
},
"status":{
"value":'休み'
}
}
};
break;
}
kintone.api(kintone.api.url('/k/v1/record', true), 'POST', body, function(resp) {
console.log(resp);
location.reload(true);
}, function(error) {
console.log(error);
});
});
});
})(jQuery);
Javascript2
(function() {
'use strict';
kintone.events.on('app.record.index.show',async(event)=> {
if(event.viewId !== 5737617){
return;
}
var re_no,re_name,re_de,re_time,re_retime,re_car;
var body = {
"app":320,
"query" : 'status not in ("在席")',
"fields" : ['氏名','行先等','外出時刻','帰所予定時刻','車両','レコード番号'],
"totalCount":true
}
const resp = await kintone.api('/k/v1/records','GET',body);
if(resp.totalCount == '0'){
$("#t_body").html("全員在席中");
$("#t_body").css('font-size','30px');
}
for(var i = 0 ; i < resp.totalCount ; i++){
re_no = resp.records[i].レコード番号.value;
re_name = resp.records[i].氏名.value;
re_de = resp.records[i].行先等.value;
re_time = resp.records[i].外出時刻.value;
re_retime = resp.records[i].帰所予定時刻.value;
re_car = resp.records[i].車両.value;
var html = '<tr><td class="kintoneplugin-table-td-operation"><button class="kintoneplugin-button-normal remove c_button">'+re_no+'</button></td>'+
'<td class="c_name">'+re_name+'</td>'+
'<td class="c_destination">'+re_de+'</td>'+
'<td class="c_out_time">'+re_time+'</td>'+
'<td class ="c_comeback_time">'+re_retime+'</td>'+
'<td class="c_car">'+re_car+'</td></tr>';
$('#t_body').append(html);
}
//帰所登録
$(".c_button").on("click",function(){
var id = $(this).text();
console.log(id);
var g_body = {
"app":320,
"id":id
};
kintone.api(kintone.api.url('/k/v1/record', true), 'GET', g_body, function(g_res) {
var p_body = {
"app":320,
"id":id,
"record":{
"status":{
"value":'在席'
},
"帰所時刻":{
"value":moment().format("HH:MM")
}
}
};
kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', p_body, function(p_res) {
console.log(p_res);
});
location.reload();
});
});
});
})();
動き自体はいい感じなのですが、[null]が見えなくなって欲しいなぁという希望があります。
ご教示いただければ幸いです。
よろしくお願いいたします。