Mobile timecard customization
概要
出勤と退勤の時間を記録するモバイル版タイムカードの作り方を kintone UI Component の MobileButton コンポーネント と MobileNotification コンポーネントを使って説明します。
完成イメージ
以下が、画面の完成イメー ジです。
JavaScript/CSS カスタマイズ
kintone UI Component の UMD ファイルをアプリに読み込んだ上で、以下のような実装をした JavaScript ファイルをアップロードします。
ファイルのアップロード方法などは、Quick Start をご覧ください。
出勤(Punch-in)と退勤(Punch-out)のボタンを表示
出勤と退勤のボタンを表示するために、MobileButton コンポーネントを使います。
kintone.events.on('mobile.app.record.index.show', (event) => {
// Prevent button duplication bug
if (document.getElementById('kuc_punch_in_button') || document.getElementById('kuc_punch_out_button')) {
return event;
}
const app = kintone.mobile.app.getId();
// Display MobileButtons
const header = kintone.mobile.app.getHeaderSpaceElement();
const punchInButton = new Kuc.MobileButton({
text: 'Punch-in',
type: 'submit',
id: 'kuc_punch_in_button'
});
const punchOutButton = new Kuc.MobileButton({
text: 'Punch-out',
type: 'normal',
id: 'kuc_punch_out_button'
});
header.appendChild(punchInButton);
header.appendChild(punchOutButton);
CSS を使ったボタンの間隔の調整
MobileButton コンポーネントの id
プロパティに値を付与して、CSS でボタンの間隔を調整します。
@charset "UTF-8";
#kuc_punch_in_button {
margin: 5px 5px 5px 5px;
}
#kuc_punch_out_button {
margin: 5px 0px 5px 0px;
}