kintone｜日付フィールドの値をボタンで切り替える
プログラムを作るのが苦手なプログラマーが
mykintoneを便利に改善していく過程を投稿していきます。
日々のなんでもログをカウントするためのアプリをちまちまと作っています。
4月試運転してみて、色んな課題があったためそれらに対応していきます。
📝課題について
各種ログの実施日を管理するために「日付」フィールドを利用しています。
4月の試運転から、[レコードの再利用]を利用する回数が多いことが分かりました。
ぶっちゃけ分かっていたことですが、以前登録したログのレコードを使いまわす事が多かったです。その際にチョットめんどいなと感じたのが「日付」の切り替えです。
1クリックして指定日をカレンダーから選択すれば良いのですが、ログって結構な件数登録したりするので、この日付を操作するのが結構面倒でした。また[レコードの再利用]を利用して、ログを登録する場合って、「日付」フィールドの値を大体1～2日程度前後に動かすことが多かったです。
📝やりたいこと
「日付」フィールドの値を「日付」フィールドに設定されている日付をベースとして、前後に1日ずつ変更できるボタンを生成する。ついでに当日を設定するボタンを生成する。
以下の画像のような感じです。
まんまですが、
- 「1日前」を押下すると「日付」フィールドの日付を1日前に変更
- 「今日」を押下すると「日付」フィールドの日付を今日に変更
- 「1日後」を押下すると「日付」フィールドの日付を1日後に変更
📝利用したライブラリ
以下ライブラリの機能を利用しています。
📝ソースコード
ソースに記載の通りです。
新規作成時及びアクションボタンによるコピー作成時にボタンを生成したいので、app.record.create.showとapp.record.edit.show(モバイルでも必要な場合はmobile.app.record.create.showとmobile.app.record.edit.showも)トリガーとして登録します。kintone JavaScript API（イベント）一覧はこちら
(() => {
// ボタン名を配列で宣言
const BUTTON_LABEL_NAME = ["1日前","今日","1日後"];
kintone.events.on(
[
"app.record.edit.show",
"app.record.create.show"
], (event) => {
// 日付変更ボタンの生成
makeChangeDateButton();
return event;
});
/**
* 日付変更ボタンの生成
*/
const makeChangeDateButton = () => {
// 日付変更ボタンを追加する際に利用するスペースフィールドのID
const SPACE_FIELDS = "changeDateButton";
// 1日前|今日|1日後の3ボタンをループ処理で生成
BUTTON_LABEL_NAME.forEach((labelName) => {
// ボタン要素を生成
let button = document.createElement("button");
// ボタンの名前を設定
button.innerText = labelName;
// ボタンにクリック時のイベントを追加
button.addEventListener('click', () => {
// ボタン押下時に押下したボタン名を引数にして実行する関数を呼び出す
changeDate(labelName);
});
// スペースフィールドに生成したボタンを追加
kintone.app.record.getSpaceElement(SPACE_FIELDS).appendChild(button);
});
};
/**
* 日付変更ボタン押下時の処理
* @param changeType
*/
const changeDate = (changeType) => {
// 引数の値がstringではない場合は処理を終了
if(typeof changeType !== 'string'){
return;
}
// 引数の値が定数として宣言済みのボタン名以外の場合
if(!BUTTON_LABEL_NAME.some(value => value !== changeType)){
return;
}
// 表示しているkintoneの詳細画面の情報を取得
let record = kintone.app.record.get();
// 日付フィールドの値を取得
const NOW_DATE = record.record['日付'].value;
// 日付フィールドの値がundefined又は空値の場合は処理を終了
if (NOW_DATE === undefined){
return;
} else if(NOW_DATE === ''){
return;
}
// 変更後の日付を格納するための変数を用意
let changeDate = NOW_DATE;
// 引数(ボタン名に合わせて、押下時に変更する日付の値を変更)
switch (changeType){
case "1日前":
// 1日前を押下された場合は、設定日-1
changeDate = dayjs(NOW_DATE).add(-1,'days').format('YYYY-MM-DD');
break;
case "今日":
// 今日を押下された場合は、今日
changeDate = dayjs().format('YYYY-MM-DD');
break;
case "1日後":
// 1日後を押下された場合は、設定日+1
changeDate = dayjs(NOW_DATE).add(1,'days').format('YYYY-MM-DD');
break;
}
// 日付フィールドに変更後の日付を設定/上書き
record.record['日付'].value = changeDate;
// 変更した内容を保持するオブジェクトをkintoneに設定する。
kintone.app.record.set(record);
return;
};
})()
📝解説
発火イベント/登録画面(PC)及び編集画面(PC)
他の処理を盛り込む余裕を持たせたいので、日付変更のロジックはそっくり関数に処理をまとめて、発火イベントでは、関数を呼び出すだけとしています。関数で利用したいので、発火イベント外に定数としてボタン名を配列で宣言しておきます。
// ボタン名を配列で宣言
const BUTTON_LABEL_NAME = ["1日前","今日","1日後"];
kintone.events.on(
[
"app.record.edit.show",
"app.record.create.show"
], (event) => {
// 日付変更ボタンの生成
makeChangeDateButton();
return event;
});
makeChangeDateButton/日付変更ボタン作成
日付変更ボタンを格納するためのスペースフィールドは予め登録しておきます。
その後生成したボタンにクリックイベントを定義して、kintoneにボタンを読み込んでいます。
/**
* 日付変更ボタンの生成
*/
const makeChangeDateButton = () => {
// 日付変更ボタンを追加する際に利用するスペースフィールドのID
const SPACE_FIELDS = "changeDateButton";
// 1日前|今日|1日後の3ボタンをループ処理で生成
BUTTON_LABEL_NAME.forEach((labelName) => {
// ボタン要素を生成
let button = document.createElement("button");
// ボタンの名前を設定
button.innerText = labelName;
// ボタンにクリック時のイベントを追加
button.addEventListener('click', () => {
// ボタン押下時に押下したボタン名を引数にして実行する関数を呼び出す
changeDate(labelName);
});
// スペースフィールドに生成したボタンを追加
kintone.app.record.getSpaceElement(SPACE_FIELDS).appendChild(button);
});
};
changeDate/日付変更ボタン押下時の処理
引数が想定外の場合と「日付」フィールドの値が設定されていない場合は処理を実行しません。それ以外の場合は、dayjsライブラリを利用して、日付を前後及び当日に設定しています。
/**
* 日付変更ボタン押下時の処理
* @param changeType
*/
const changeDate = (changeType) => {
// 引数の値がstringではない場合は処理を終了
if(typeof changeType !== 'string'){
return;
}
// 引数の値が定数として宣言済みのボタン名以外の場合
if(!BUTTON_LABEL_NAME.some(value => value !== changeType)){
return;
}
// 表示しているkintoneの詳細画面の情報を取得
let record = kintone.app.record.get();
// 日付フィールドの値を取得
const NOW_DATE = record.record['日付'].value;
// 日付フィールドの値がundefined又は空値の場合は処理を終了
if (NOW_DATE === undefined){
return;
} else if(NOW_DATE === ''){
return;
}
// 変更後の日付を格納するための変数を用意
let changeDate = NOW_DATE;
// 引数(ボタン名に合わせて、押下時に変更する日付の値を変更)
switch (changeType){
case "1日前":
// 1日前を押下された場合は、設定日-1
changeDate = dayjs(NOW_DATE).add(-1,'days').format('YYYY-MM-DD');
break;
case "今日":
// 今日を押下された場合は、今日
changeDate = dayjs().format('YYYY-MM-DD');
break;
case "1日後":
// 1日後を押下された場合は、設定日+1
changeDate = dayjs(NOW_DATE).add(1,'days').format('YYYY-MM-DD');
break;
}
// 日付フィールドに変更後の日付を設定/上書き
record.record['日付'].value = changeDate;
// 変更した内容を保持するオブジェクトをkintoneに設定する。
kintone.app.record.set(record);
return;
};
})()
📝動作確認
スムーズに動きました！
📝最後に・・・
アドバイスは常時募集しております。お待ちしております
<(_ )><( )><( )><( )><( _)>
Discussion