Edited at

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

More than 1 year has passed since last update.

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


サンプルアプリ画面

スクリーンショット 2018-05-13 8.59.54.png


実装方法


  1. 詳細画面にダイアログ表示用のボタンを設置(詳細画面のメニュー右の空白を利用)

  2. ダイアログ画面のHTMLを準備(変数にダイアログ用のHTMLをセットする)

  3. ダイアログ画面を表示する関数を作成($( "ダイアログ用のHTML" ).dialog().dialog('open');)

  4. ボタンクリックイベントに3.のダイアログ表示関数の実行を設定


動作説明


  1. 文字列1行のフィールドを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);


参考文献