カテゴリー内の他の記事

経過年数を表示する

フォローする

Index

概要

アプリのレコード表示時に、勤続年数を表示します。 また、ボタンを押すと年齢を表示します。

完成形

事前準備

サンプルプログラム

プログラム

ご注意事項
  • サンプルプログラムは、その動作を保証するものではありません
  • サンプルプログラムの技術的なサポート等は行っていません
  • エディターにサンプルプログラムをコピーし、ファイル名を”sample.js” 、文字コードを「UTF-8」にして保存します(ファイル名は任意)
  • 準備したアプリの設定画面で、保存したファイルを読み込みます
  • アプリの設定を完了し、レコード一覧を表示します

設定例

使用したライブラリ

Cybozu CDNより以下のライブラリを使用

  • 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

使用したAPI

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

デモ環境

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

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

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

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

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'
});
}

 

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

玲香により編集されました
ログインしてコメントを残してください。
Powered by Zendesk