一覧画面や詳細画面の表示のカスタマイズについて

kintone カスタマイズ
1

「請求月」という名前のフィールドを”日付”の形式で指定しました。

一覧や詳細画面で確認するときに YYYY/MM の形式で表示させる事は可能でしょうか？ Moment.js を適用しております。

以下のようなスクリプトを作成しましたが、エラーとなります。

 

(function () {
“use strict”;
// ロケールを初期化
moment.locale(‘ja’);

kintone.events.on([‘app.record.index.show’, ‘app.record.detail.show’], function(e) {
// レコード一覧画面表示イベント

var elBillMth = kintone.app.getFieldElements(‘billingMonth’); //請求月
for (var i = 0; i < elBillMth.length; i++) {
elBillMth[i].innerText = moment().format(‘YYYY[/]MM’);
elBillMth[i].style.verticalAlign = ‘middle’;
}
});

 

 

 

・一覧画面では、すべて一番初めに登録したレコードの値

「2018/4」と表示されます。 既にこのレコードは削除したのですが、

「2018/04」のままです。

 

・詳細画面では、「YYYY/MM」の形式で参照もできず、

通常の 「YYYY-MM-DD」の形式で、javascript の内容が有効かされておりません。

 

Chromeのデバックコンソールは以下となっております。

 

show.js:1046 Uncaught TypeError: Cannot read property ‘length’ of null
at YYYYMM.js:10
at show.js:238
at Array.forEach (<anonymous>)
at w (show.js:990)
at Iv (show.js:238)
at Jv (show.js:238)
at cia (show.js:877)
at h4.update (show.js:2035)
at W5 (show.js:915)
at X5 (show.js:915)

 

 

YYYYMM.js の10行目は

      for (var i = 0; i < elBillMth.length; i++) {

です。

 

以上、ご教授願います。

 

 

 

2

Sophia様

お世話になっております。 cstapの江田と申します。

「moment()」を引数なしで実行した場合は、現在時刻が取得されるのでそのような挙動になるのかと思います。 また、詳細画面では「kintone.app.record.getFieldElement()」を用いる必要があります。

以下のようなコードで実装できるかと思います。

kintone.events.on(['app.record.index.show'],function(e){varelBillMth=kintone.app.getFieldElements('billingMonth');for(vari=0;i\<elBillMth.length;i++){vardate=moment(elBillMth[i].innerText,'YYYY-MM-DD');if(!date.isValid())continue;elBillMth[i].innerText=date.format('YYYY[/]MM');elBillMth[i].style.verticalAlign='middle';}});kintone.events.on(['app.record.detail.show'],function(e){varelBillMth=kintone.app.record.getFieldElement('billingMonth');vardate=moment(elBillMth.innerText,'YYYY-MM-DD');if(!date.isValid())return;elBillMth.innerText=date.format('YYYY[/]MM');elBillMth.style.verticalAlign='middle';});
3

江田様

 

アドバイスありがとうございます。

ご教授いただきましたスクリプトでやりたかった事が実健できました。

 

なぜ、 app.record.index.show (Index画面）の場合は、 kintone.app.getFieldElements  で

app.record.detail.show (detail画面) の場合は kintone.app.record.getFieldElemant  なのか

学習できる資料があればアドバイスいただけますと幸いです。

 

また、そもそも billingMonth のフィールドの入力をYYYY-MM のようにDDを入力せずに

実現する方法はございますでしょうか？

重ねての質問となりますが、よろしくお願いいたします。

4

Sophia様

お世話になっております。
返信遅くなりました。

kintoneのAPIはこちらのまとめが見やすいと思います。
https://developer.cybozu.io/hc/ja/articles/202738940

「年月型のフィールド」はないので「文字列(1行)フィールド」を利用するのが良いと思います。
バリデーションや入力補助をJavaScirptで実装して、ユーザビリティを上げることもできます。
バリデーションの例を下に書いておきます。

kintone.events.on(['app.record.create.submit', 'app.record.edit.submit'], function(event){
if(!event.record.テキスト.value.match(/^\d+-(0[1-9]|1[0-2])$/)) event.record.テキスト.error = 'フォーマットが正しくありません。';
return event;
});
5

江田様

 

アドバイスありがとうございます。

 

上記内容を参考にさせていただき、実現することができました。

ご丁寧にありがとうございました。