cybozu developer network

カテゴリー内の他の記事

経過年数を表示する

Index

概要

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

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

完成形

デモ環境

こちらのデモ環境から実際に動作を確認できます。
https://dev-demo.cybozu.com/k/62/

デモ環境の利用は、事前に cybozu developer network のメンバー登録が必要です。画面右上の「サインイン」ボタンよりご登録ください。
デモ環境アカウントとパスワードは、サインイン後にこちらのページでご確認ください。

事前準備

適用手順

JavaScriptファイルの追加

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

  • Luxon
    https://js.cybozu.com/luxon/2.3.0/luxon.min.js
  • jQuery
    https://js.cybozu.com/jquery/2.2.4/jquery.min.js

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

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

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

設定画面の完成イメージ

setting.png

サンプルプログラム

プログラム

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

  • エディターにサンプルプログラムをコピーし、ファイル名を”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 様

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

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

Avatar
YKBB

お世話になります。API初心者です。

こちらの記事を参考にまったく同じように社員名簿に経過年数を表示させたいと思っており、何度か試しましたが入社年数も年齢表示ボタンも表示がされません。

デモ環境を確認しに行ったところ、そちらも表示がなかったのですが、そもそもこの記事が古くて現環境に対応していないということはありますでしょうか?

自分の問題か分からなかったので質問させていただきました。

Avatar
cybozu Development team

YKBB様

お世話になっております。cybozu developer network 運営チームです。

JavaScript 内のフィールドコードの指定が一部間違っていたため修正しました。
申し訳ございません。

ご指摘いただきありがとうございました。
今後ともよろしくお願いいたします。

Avatar
YKBB

cybozu Development team 様

早速ご修正いただきありがとうございました!

無事に動きました!

今後ともよろしくお願いいたします。

Avatar
すずき

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

こちらの機能を「社員名簿」ではなく、人事労務パック内の「従業員名簿」に反映することは可能でしょうか。

 

Avatar
cybozu Development team

鈴木明日香 様

お世話になっております。cybozu developer network 運営チームです。

こちらのサンプルコードは、以下のサンプルコード内でフィールドコード名を定義しています。

15行目〜17行目

    const birthDayFieldCode = 'BirthDay'; //生年月日フィールドのフィールドコード
    const spaceFieldCode = 'BirthDay'; //年齢計算のボタンを配置するスペースフィールドのフィールドコード
    const joiningDayFieldCode = 'JoiningDate'; //入社日のフィールドコード

そのため、別のアプリにおいても、同様のフィールドコードのフィールドを追加または修正すればご利用可能です。

よろしくお願いいたします。

Avatar
すずき

cybozu Development team 様

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

お教え頂いたとおりに実施したところ、無事に機能いたしました。

ご対応頂きありがとうございます。

引続きよろしくお願いいたします。

 

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