カテゴリー内の他の記事

経過年数を表示する

Index

概要

こちらのサンプルは、レコードの詳細画面に勤続年数を表示するカスタマイズになります。
また、ボタンを押すことで、生年月日から年齢を計算してアラートに表示させることもできます。

カスタマイズの適用方法は、「適用手順」部分をご参照ください。

完成形

デモ環境

https://dev-demo.cybozu.com/k/62/

※デモ環境についての説明はこちら

事前準備

適用手順

JavaScriptファイルの追加

①まずは、カスタマイズに必要なライブラリを追加します。
アプリの設定画面から「JavaScript / CSSによるカスタマイズ」を開き、
「PC用のJavaScriptファイル」に、URL指定で次のライブラリを順番に指定します。

  • Moment.js
    https://js.cybozu.com/momentjs/2.13.0/moment-with-locales.min.js
  • jQuery
    https://js.cybozu.com/jquery/2.2.4/jquery.min.js

 ※ライブラリの詳細に関しては、Cybozu CDN をご参照ください。

②今回のカスタマイズの「サンプルプログラム」の追加も、この設定画面で行います。
指定したライブラリの下に、下記のように「サンプルプログラム」のファイルを追加します。

  • サンプルプログラム部分のコードをエディターにコピーして、
    ファイル名を「sample.js」 、文字コードを「UTF-8」、「BOMなし」で保存します。
    ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。

設定画面の完成イメージ

今回のカスタマイズについて、チュートリアル記事
はじめようJavaScript第15回 kintone JavaScriptカスタマイズのプログラム実例を学ぼう③(経過年数を表示する)
により詳しい解説がありますので、興味ある方は是非そちらもご覧ください。

サンプルプログラム

プログラム

ご注意事項
  • サンプルプログラムは、その動作を保証するものではありません
  • サンプルプログラムの技術的なサポート等は行っていません

  • エディターにサンプルプログラムをコピーし、ファイル名を”sample.js” 、文字コードを「UTF-8」にして保存します(ファイル名は任意)
  • 準備したアプリの設定画面で、保存したファイルを読み込みます
  • アプリの設定を完了し、レコード一覧を表示します

使用したAPI

  1. アプリの ID を取得する
  2. REST APIリクエストを送信する
  3. レコード詳細画面が表示された時のイベント
  4. イベントハンドラーを登録する
  5. フィールド要素を取得する

 

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

Avatar
kamewo

経過年数をレコード一覧画面にも表示させるにはどうすればよいでしょうか?

Avatar
kamewo

入社年月日が空白の場合は経過年数を表示させない場合は、どうすればよいでしょうか?

Avatar
にしかわ

経過年数をレコード一覧画面にも表示させるにはどうすればよいでしょうか?
DOM操作しかなさそうですね…

入社年月日が空白の場合は経過年数を表示させない場合は、どうすればよいでしょうか?
まず初めに、入社年月日のフィールドが空かどうかを判定させてその後、経過年数を表示させるかどうかを判定すれば可能かと思います。

Avatar
kamewo

にしかわ様
ご回答ありがとうございます。

一覧表示は下記参照して、解決できました!
http://www.messiahworks.com/archives/4554

空白の場合の処理は、下記参照して、解決できました。
https://cybozudev.zendesk.com/hc/ja/articles/201718170--%E5%B0%8F%E6%8A%80-undefined-%E3%81%A8-%E7%A9%BA%E6%96%87%E5%AD%97%E3%81%AE%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%81%AA-if-%E6%96%87%E5%88%A4%E5%AE%9A

Avatar
furuhashi

別アプリの関連レコードでもこの数値を表示させることはできるでしょうか?

Avatar
hsuzuki
初心者質問で申訳ありません。 サンプルプログラムを「JavaScript / CSSでカスタマイズ」から読み込んでみましたが、「フォーム編集」にはボタンが表示されません。 当然、アプリ上でレコード新規追加してもボタンは表示されません。 オブジェクトのフィールドコードは、JoiningDateとBirthDayになっているので関連付けは間違ってない気がするのですが。。。(サンプルアプリ:社員名簿そのまま) 上記設定以外になにか行わなければならない事があるのでしょうか? アクションの設定が必要とか? ヘルプのどこを参照すると理解できるようになるでしょうか? お手数お掛けして申し訳ありませんが、教えて下さい。 このスクリプトで勉強したいと思っています。
Avatar
cybozu Development team

furuhashi様、hsuzuki様

cybozu.com developer network運営事務局です。
返答が大変遅くなってなって申し訳ありません。。

>別アプリの関連レコードでもこの数値を表示させることはできるでしょうか?
アプリに値を保存する必要があります。
カスタマイズされているこのアプリに値を保存する場合、 kintone.api() ( https://cybozudev.zendesk.com/hc/ja/articles/202166310 ) を使用し、レコード更新のREST API ( https://cybozudev.zendesk.com/hc/ja/articles/201941784 ) で特定のフィールドの値を更新できます。
別アプリでの関連レコードでこの値を参照してください。

>「フォーム編集」にはボタンが表示されません。
アプリの「フォームの編集」ではJavaScriptのカスタマイズは動かない仕様となっています。
こちらのカスタマイズは「レコード表示イベント」を使用しているため、レコードの詳細画面でしかボタンは表示されません。
新規追加後の詳細画面でボタンが表示されていない場合、コードの記載(コピー)ミスがあったかもしれません。
その場合、一端ブラウザの開発者ツールを開き、「コンソール」タブにメッセージが表示されているか確認と共有をお願いできますでしょうか。

>アプリ上でレコード新規追加してもボタンは表示されません
上記で記載した理由により、レコード追加画面でもボタンは表示されません。レコード詳細画面だけになります。

Avatar
hiyoko

経過年数の計算の際に、下記の通り日付も考慮した年数を算出するにはどうしたら良いでしょうか。

例)本日「2016年5月18日」に、入社日が「2015年5月20日」の社員の勤続年数は「0年11ヶ月」と計算される。

このサンプルプログラムですと、上記の例の場合に「1年0ヶ月」と計算されてしまうようです。

Avatar
cybozu Development team

hiyokoさん
調査とプログラム改変で返答が遅くなりました。

JavaScript標準の日付計算は、スマートでなく複雑なプログラムになってしまいましたので、Cybozu CDN のMoment.jsを利用しました。
このプログラムを使って次の日付を指定してみたところ、「0年11ヶ月」になりました。

例)本日「2016年8月17日」に、入社日が「2015年8月20日」の社員の勤続年数は「0年11ヶ月」と計算される。
そのほか、こちらも試してみました。

  • 本日「2016年8月17日」に、入社日が「2015年8月17日」の社員の勤続年数は「1年0ヶ月」と計算される。
  • 本日「2016年8月17日」に、入社日が「2015年7月20日」の社員の勤続年数は「1年0ヶ月」と計算される。
  • 本日「2016年8月17日」に、入社日が「2015年8月18日」の社員の勤続年数は「0年11ヶ月」と計算される。
Avatar
玲香

お世話になっております。

このサンプルでやっていることを自社用にカスタマイズしたいですが、初心者のため、どんな風にすればよろしいか全然わからなくて、投稿させていただきました。

①年齢計算⇒ボタンを押すと年齢を表示してます。

⇒⇒⇒これをフォームに『年齢』フィールドを追加して、ここに年齢が入るようにしたい。

②経過年数⇒入社年月日の下に表示してます。

⇒⇒⇒これもフォームに『勤続』フィールドを追加して、ここに勤続年月が入るようにしたい。

この2点への変更はやっぱり本サンプルをとても大幅に変更することになるのでしょうか?

まったくの初心者なので、ご迷惑をおかけしますが、なにかアドバイスいただければ幸いです。よろしくお願い致します。

以下のコースの解釈もしていただくととてもありがたいです。

if (emJoiningDate) {

var valJoiningDate = getYearMonth(record['JoiningDate']['value']);

var emLabel = $("<label>");
var emDiv = $("<span>");

$(emJoiningDate).append($(emDiv));
$(emJoiningDate).css({
"width": (parseInt($(emJoiningDate).innerWidth(), 10) + 50) + 'px'
});

$(emDiv).append($(emLabel));
$(emLabel).html('<br>');
$(emLabel).append(valJoiningDate);


$(emDiv).css({
"color": 'blue'
});
}

 

ぜひ、ご指導のほど、よろしくお願い致します。

玲香により編集されました
Avatar
sunshine

cybozu Development team 様

私の環境でも加齢計算ボタンが表示されません。

入社経過月数は表示されます。

2016年03月30日 10:27のコメントで

>新規追加後の詳細画面でボタンが表示されていない場合、コードの記載(コピー)ミスがあったかもしれません。
>その場合、一端ブラウザの開発者ツールを開き、「コンソール」タブにメッセージが表示されているか確認と共有をお願いできますでしょうか。

とありましたので、コンソールを調べたのですが、特にメッセージも表示されていません。

 

ブラウザはChrome ver.78.0.3904.70です。

ご教授のほどよろしくお願いいたします。

Avatar
cybozu Development team

sunshine 様

年齢計算のボタンは、「BirthDay」という要素IDのスペースフィールド配置場所に表示されます。

フォームの設定画面を開き、

  • 生年月日フィールドと入社年月日フィールドの間にスペースフィールドが存在するか
  • スペースフィールドの要素IDが「BirthDay」となっているか

をご確認ください。

※アプリストアから追加した「社員名簿」アプリには、こちらのスペースフィールドが用意されています。

 

上記に該当しないようでしたら、ブラウザ開発者ツールを使って実行中プログラムにブレークポイントを設定する等、デバッグをお試しください。

動かない?そんな時はデバッグをしてみよう!入門編
https://developer.cybozu.io/hc/ja/articles/207613916

 

デバッグのご不明点につきましては、コミュニティをご活用いただけますと幸いです。

どうぞよろしくお願いいたします。

Avatar
sunshine

cybozu Development team 様

ご教授ありがとうございます。

無事に表示させることができました。

サインインしてコメントを残してください。