kintone 詳細画面にjQuery UI のダイアログを表示するサンプル

kintoneの詳細画面にダイアログを表示するサンプルです。

サンプルアプリ画面

実装方法

1. 詳細画面にダイアログ表示用のボタンを設置（詳細画面のメニュー右の空白を利用）
2. ダイアログ画面のHTMLを準備（変数にダイアログ用のHTMLをセットする）
3. ダイアログ画面を表示する関数を作成（$( "ダイアログ用のHTML" ).dialog().dialog('open');）
4. ボタンクリックイベントに3.のダイアログ表示関数の実行を設定

動作説明

1. 文字列１行のフィールドを１つ設置したアプリを作成します。
2. フィールドコードは sline とします。
3. レコードを登録します。
4. 詳細画面に表示されたclickボタンを押下します。
5. ダイアログが表示されて、フィールドに入力された文字列が Hello,の後に繋げて表示されます。

注意

jQueryを使いますので、アプリの設定画面で読み込んでおいて下さい。

• https://js.cybozu.com/jquery/2.2.4/jquery.min.js
• https://js.cybozu.com/jqueryui/1.12.0/jquery-ui.min.js
• https://js.cybozu.com/jqueryui/1.12.1/themes/smoothness/jquery-ui.css
  また、今回のサンプルではUnderscore.jsも利用していますので、そちらも読み込みをお願いします。
• https://js.cybozu.com/underscore/1.9.0/underscore-min.js

ソースコード

jQuery.noConflict();
(function($) {
    "use strict";
    kintone.events.on("app.record.detail.show", function(e) {
        var elfield = kintone.app.record.getFieldElement('sline');
        var compiled = _.template('<div id="dialog" title="Hello"> Hello,<%= echo %></div>')({echo: $(elfield).text()});

        var elMyBt = _.template('<button id="myBt">click</button>');
        $(kintone.app.record.getHeaderMenuSpaceElement()).append(elMyBt);

        $('#myBt').on('click', function() {
            console.log("on click");
            viewDialog();
        });
        
        function viewDialog() {
            console.log("viewDialog");
            $(compiled).dialog({autoOpen: false, modal: true}).dialog('open');
        }
    });
})(jQuery);

参考文献

• jQuery UI Dialog https://jqueryui.com/dialog/