kintoneに小さな機能を追加するJavaScriptカスタマイズ

query_tinker.js

/* このJavaScriptコードは、kintoneの一覧画面のヘッダースペースにテキストフィールドと送信ボタンを追加します。
テキストフィールドの初期値は、ページURLのGETパラメータ「q」から取得した値に設定されています。
ユーザーがこのフィールドに値を入力し、「送信」ボタンをクリックすると、
その入力値が新しいGETパラメータ「q」としてURLにセットされ、ページがリロードされます。

テキストフィールドの幅はヘッダースペースの60%に設定されており、視覚的にバランスが取れていて使いやすいデザインになっています。
このカスタマイズにより、ユーザーは簡単に特定の情報をURLに組み込むことができ、ページをリロードすることで
その情報に基づいたビューの更新や処理を実行できます。
*/
(function() {
    "use strict";

    kintone.events.on('app.record.index.show', function(event) {
        var headerSpace = kintone.app.getHeaderSpaceElement();

        // URLからGETパラメータを取得
        var urlParams = new URLSearchParams(window.location.search);
        var qParam = urlParams.get('q') || '';

        // テキストフィールドの作成と初期値、スタイルの設定
        var inputField = document.createElement('input');
        inputField.type = 'text';
        inputField.value = decodeURIComponent(qParam); // GETパラメータの値をデコードしてセット
        inputField.style.width = '60%'; // 幅を60%に設定
        inputField.style.marginRight = '10px';

        // ボタンの作成
        var submitButton = document.createElement('button');
        submitButton.innerText = '送信';
        submitButton.onclick = function() {
            // 入力された値をURLのGETパラメータとしてセット
            var inputValue = encodeURIComponent(inputField.value);
            var newUrl = window.location.origin + window.location.pathname + '?q=' + inputValue;
            window.location.href = newUrl; // ページをリロード
        };

        // ヘッダーにフィールドとボタンを追加
        headerSpace.appendChild(inputField);
        headerSpace.appendChild(submitButton);
    });
})();