概要
こちらのサンプルは、レコードの詳細画面に勤続年数を表示するカスタマイズになります。
また、ボタンを押すことで、生年月日から年齢を計算してアラートに表示させることもできます。
カスタマイズの適用方法は、「適用手順」部分をご参照ください。
完成形
デモ環境
こちらのデモ環境から実際に動作を確認できます。
https://dev-demo.cybozu.com/k/62/
デモ環境の利用は、事前に cybozu developer network のメンバー登録が必要です。画面右上の「サインイン」ボタンよりご登録ください。
デモ環境アカウントとパスワードは、サインイン後にこちらのページでご確認ください。
デモ環境アカウントとパスワードは、サインイン後にこちらのページでご確認ください。
事前準備
- kintone アプリ（kintone アプリストア にある「社員名簿」を使います）
- エディター
※エディターの準備についてはこちらご参照ください。
適用手順
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」にしてください。
設定画面の完成イメージ
サンプルプログラム
プログラム
ご注意事項
- サンプルプログラムは、その動作を保証するものではありません
- サンプルプログラムの技術的なサポート等は行っていません
- エディターにサンプルプログラムをコピーし、ファイル名を”sample.js” 、文字コードを「UTF-8」にして保存します（ファイル名は任意）
- 準備したアプリの設定画面で、保存したファイルを読み込みます
- アプリの設定を完了し、レコード一覧を表示します
使用したAPI
経過年数をレコード一覧画面にも表示させるにはどうすればよいでしょうか？
入社年月日が空白の場合は経過年数を表示させない場合は、どうすればよいでしょうか？
にしかわ様
ご回答ありがとうございます。
一覧表示は下記参照して、解決できました！
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
別アプリの関連レコードでもこの数値を表示させることはできるでしょうか？
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のカスタマイズは動かない仕様となっています。
こちらのカスタマイズは「レコード表示イベント」を使用しているため、レコードの詳細画面でしかボタンは表示されません。
新規追加後の詳細画面でボタンが表示されていない場合、コードの記載(コピー)ミスがあったかもしれません。
その場合、一端ブラウザの開発者ツールを開き、「コンソール」タブにメッセージが表示されているか確認と共有をお願いできますでしょうか。
＞アプリ上でレコード新規追加してもボタンは表示されません
上記で記載した理由により、レコード追加画面でもボタンは表示されません。レコード詳細画面だけになります。
経過年数の計算の際に、下記の通り日付も考慮した年数を算出するにはどうしたら良いでしょうか。
例）本日「2016年5月18日」に、入社日が「2015年5月20日」の社員の勤続年数は「0年11ヶ月」と計算される。
このサンプルプログラムですと、上記の例の場合に「1年0ヶ月」と計算されてしまうようです。
hiyokoさん
調査とプログラム改変で返答が遅くなりました。
JavaScript標準の日付計算は、スマートでなく複雑なプログラムになってしまいましたので、Cybozu CDN のMoment.jsを利用しました。
このプログラムを使って次の日付を指定してみたところ、「0年11ヶ月」になりました。
例）本日「2016年8月17日」に、入社日が「2015年8月20日」の社員の勤続年数は「0年11ヶ月」と計算される。
そのほか、こちらも試してみました。
お世話になっております。
このサンプルでやっていることを自社用にカスタマイズしたいですが、初心者のため、どんな風にすればよろしいか全然わからなくて、投稿させていただきました。
①年齢計算⇒ボタンを押すと年齢を表示してます。
⇒⇒⇒これをフォームに『年齢』フィールドを追加して、ここに年齢が入るようにしたい。
②経過年数⇒入社年月日の下に表示してます。
⇒⇒⇒これもフォームに『勤続』フィールドを追加して、ここに勤続年月が入るようにしたい。
この２点への変更はやっぱり本サンプルをとても大幅に変更することになるのでしょうか？
まったくの初心者なので、ご迷惑をおかけしますが、なにかアドバイスいただければ幸いです。よろしくお願い致します。
以下のコースの解釈もしていただくととてもありがたいです。
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'
});
}
ぜひ、ご指導のほど、よろしくお願い致します。
cybozu Development team 様
私の環境でも加齢計算ボタンが表示されません。
入社経過月数は表示されます。
2016年03月30日 10:27のコメントで
>新規追加後の詳細画面でボタンが表示されていない場合、コードの記載(コピー)ミスがあったかもしれません。
>その場合、一端ブラウザの開発者ツールを開き、「コンソール」タブにメッセージが表示されているか確認と共有をお願いできますでしょうか。
とありましたので、コンソールを調べたのですが、特にメッセージも表示されていません。
ブラウザはChrome ver.78.0.3904.70です。
ご教授のほどよろしくお願いいたします。
sunshine 様
年齢計算のボタンは、「BirthDay」という要素IDのスペースフィールド配置場所に表示されます。
フォームの設定画面を開き、
をご確認ください。
※アプリストアから追加した「社員名簿」アプリには、こちらのスペースフィールドが用意されています。
上記に該当しないようでしたら、ブラウザ開発者ツールを使って実行中プログラムにブレークポイントを設定する等、デバッグをお試しください。
動かない？そんな時はデバッグをしてみよう！入門編
https://developer.cybozu.io/hc/ja/articles/207613916
デバッグのご不明点につきましては、コミュニティをご活用いただけますと幸いです。
どうぞよろしくお願いいたします。
cybozu Development team 様
ご教授ありがとうございます。
無事に表示させることができました。
お世話になります。API初心者です。
こちらの記事を参考にまったく同じように社員名簿に経過年数を表示させたいと思っており、何度か試しましたが入社年数も年齢表示ボタンも表示がされません。
デモ環境を確認しに行ったところ、そちらも表示がなかったのですが、そもそもこの記事が古くて現環境に対応していないということはありますでしょうか？
自分の問題か分からなかったので質問させていただきました。
YKBB様
お世話になっております。cybozu developer network 運営チームです。
JavaScript 内のフィールドコードの指定が一部間違っていたため修正しました。
申し訳ございません。
ご指摘いただきありがとうございました。
今後ともよろしくお願いいたします。
cybozu Development team 様
早速ご修正いただきありがとうございました！
無事に動きました！
今後ともよろしくお願いいたします。
お世話になっております。
こちらの機能を「社員名簿」ではなく、人事労務パック内の「従業員名簿」に反映することは可能でしょうか。
鈴木明日香 様
お世話になっております。cybozu developer network 運営チームです。
こちらのサンプルコードは、以下のサンプルコード内でフィールドコード名を定義しています。
15行目〜17行目
const birthDayFieldCode = 'BirthDay'; //生年月日フィールドのフィールドコード
const spaceFieldCode = 'BirthDay'; //年齢計算のボタンを配置するスペースフィールドのフィールドコード
const joiningDayFieldCode = 'JoiningDate'; //入社日のフィールドコード
そのため、別のアプリにおいても、同様のフィールドコードのフィールドを追加または修正すればご利用可能です。
よろしくお願いいたします。
cybozu Development team 様
お世話になっております。
お教え頂いたとおりに実施したところ、無事に機能いたしました。
ご対応頂きありがとうございます。
引続きよろしくお願いいたします。