見出し画像

Kintoneアプリにボタン操作で現在日時を記録したい

Kintoneのカスタマイズ要望のお話です。
よくある相談事に「アプリの日時フィールドに現在日時を自動セットするボタンを追加したい」という要望があります。
【結論】
Kintoneの標準機能では実現できません。
Kintoneの標準機能には、Excelで使える「Today関数」や「Now関数」が実装されて無いからです(2023/09/09 現在)
しかし、Javascriptによるカスタマイズ機能で「実現可能」です。

現在日時の登録ボタン

Javascriptカスタマイズのソースコード例を以下に示します。
前提条件として、以下の準備が必要です。

Kintoneアプリのフォーム日時フィールドの「フィールドコード」設定
Kintoneアプリのフォームにボタンを配置するスペースと要素ID設定

アプリの設定方法

(1)現在日時ボタン設置のJavascriptコード

以下のコードをコピーして文字コード「UTF-8」で保存します。
※2023年10月31日 変数宣言にVarを使わない形式にコードを修正。

/* kintoneアプリにボタン操作で現在日時を記録したい
 * Sample Program
 * Distributor: https://note.com/appgroup
 * Copyright (c) 2023 Application Utilization Study Group
 * Licensed under the MIT License
 ------------------------------------------------------------*/
(function() {
    'use strict';

    // 初期設定 フィールドコードとボタンのスペースIDの設定
    const my_field_code = 'Now_datetime';
    const my_space_ID = 'button_space'; 

    // 新規登録と編集画面でイベント発火
    const events = [
        'app.record.create.show',
        'app.record.edit.show'
    ];

    kintone.events.on(events, function(event) {
        const record = event.record;

        // ボタンの作成
        const startButton = document.createElement('button');
        startButton.innerText = '打刻ボタン';
        startButton.onclick = function() {
            const currentDatetime = new Date().toISOString();
            record[my_field_code].value = currentDatetime;
            kintone.app.record.set(event);
        };

        // ボタンをフォームに追加
        kintone.app.record.getSpaceElement(my_space_ID).appendChild(startButton);

        return event;
    });
})();

(2)アプリのフォーム設定

上記のJavascriptコードの利用で、現在日時を打刻するボタンをフォーム上に設置できます。
カスタマイズするアプリのフィールドの設定内容を、上記Javascriptコードの初期設定と合わせて下さい。
const my_field_code = 'Now_datetime'; //現在日時のフィールドコード
const my_space_ID = 'button_space'; // ボタン設置スペースの要素ID

日時フィールドの設定
スペースの要素IDの設定

(3)カスタマイズの適用

アプリの設定>設定>JavaScript / CSSでカスタマイズ画面で、手順(1)で準備したjaascriptコードをアップロードして追加して「保存」します。
最後に「アプリの更新」を実行します。

JavaScript / CSSでカスタマイズ画面

現在日時ボタンのアプリテンプレート(有料)

どうしても自力でカスタマイズするのが難しい方のために、「開始時間」と「終了時間」の2つのボタンで現在日時をセットするアプリのテンプレート(有料版)を作成しました。
必要最小限の部品(フィールド)だけを配置しているアプリテンプレートですので、好きなフィールドを追加すれば、日報アプリ等の作成に利用できると思います。

デモ画面

現在日時ボタン2つのデモ画面

上記アプリのテンプレートのダウンロードと設定方法については、以下の有料記事に記載しています。
本アプリテンプレートは、note有料記事の購読料金だけでご利用いただけますが、以下の注意事項にご留意ください。

【ご注意事項と免責事項】

  • 本アプリテンプレートは、Javascriptでカスタマイズされていますので、利用するには「kintoneスタンダードコース」の契約とkintoneシステム管理者権限が必要です。

  • 本アプリテンプレートは、PCデスクトップ版とモバイル版の両方で動作確認済です。

  • 本アプリテンプレートは1つのドメインでのみご利用ください。

  • 本アプリテンプレート購入後のサポートは行っていませんので、予めご承知おき下さい。

  • 本アプリテンプレートの導入で生じたいかなる損害にも、当方は一切の責任を負いません。自己責任でご利用ください。

ここから先は

3,776字 / 4画像 / 1ファイル

¥ 3,000

よろしければサポートお願いします! いただいたサポートは、note記事制作の活動費に使わせていただきます!