皆さまお世話になります。高橋と申します。
タイトルの件、ご相談させてください。
フォームに多数のグループフィールドを配置してまして、レコード詳細画面において一度に全てのグループフィールドを開く、閉じると言ったアクションができればと思ってます。
JAVAのコーディングレベルは初心者であまり知識はないのですが、こちらのサイトの
“第3回-レコード詳細にもボタンを設置しよう”
を参考に、メニュー右側の空白に"Open","Close"ボタンを配置するまでは動作するようにはなったのですが、肝心のグループフィールドの開け閉めをどのようにコーディングしたらよいのかわかりません。
グループフィールドを開く、閉じることについて、具体的なコーディングの仕方をご教示いただけますでしょうか。
ちなみに、
“グループフィールドの表示状態について”
についても参照させていただいております。
どうぞ、よろしくお願いいたします。
Hirofumi Takahashiさん
cstapの落合です。
DOM操作になるのであまりよろしくないですが、jQueryを読み込んだ上で、第3回 レコード詳細にもボタンを設置しよう！「ボタンの設置(1)」のwindow.alertを以下のコードに変更してみてください。
$('.control-group-gaia>span.group-label-gaia').click();
jQueryは、Cybozu CDNを参考に、アプリの設定>JavaScript / CSSでカスタマイズ から設定してください。
以上、参考になりますでしょうか？
落合様、早速のご回答ありがとうございます。
大変申し訳ないのですが、私は初心者過ぎて"DOM"、"jQuery"が理解できておらず、もう少々砕いてご説明いただくことは可能でしょうか。
お手数おかけして申し訳ありませんが、よろしくお願いいたします。
Hirofumi Takahashiさん
初心者とのことなので、完成形をお見せしたほうが参考になるかと思ったので、JavaScriptだけで実現する方法で解説したいと思います。
前の回答で「jQueryは、Cybozu CDNを参考に、アプリの設定>JavaScript / CSSでカスタマイズ から設定してください。」
と言ったのですが、JavaScriptだけでもjQueryの読み込みが可能です。
以下のJavaScriptを使う場合は、jQueryを設定する必要はありません。
(function () {
"use strict";
// Cybozu CDNからjQueryを読み込む
document.write('<script src="//js.cybozu.com/jquery/1.11.2/jquery.min.js"></script>');
// レコード詳細の表示イベント
kintone.events.on('app.record.detail.show', function (event) {
// メニュ右側の空白部分にボタンを設置
var myIndexButton = document.createElement('button');
myIndexButton.id = 'my_index_button';
myIndexButton.innerHTML = 'グループトグル';
myIndexButton.onclick = function () {
// グループの開閉状態の変更
$('.control-group-gaia>span.group-label-gaia').click();
}
kintone.app.record.getHeaderMenuSpaceElement().appendChild(myIndexButton);
});
})();
はじめよう kintone JavaScript APIを読んでいただいているようなので、そこで説明していない部分だけ解説します。
document.write('<script src="//js.cybozu.com/jquery/1.11.2/jquery.min.js"></script>');
このソースコードは、Cybozu CDNからjQueryを読み込んでいるソースコードになります。アプリの設定>JavaScript / CSSでカスタマイズ から設定している場合は、必要ありません。
$('.control-group-gaia>span.group-label-gaia').click();
このソースコードは、jQueryのセレクタを使い、"control-group-gaia"クラスが指定されている要素の直下で"group-label-gaia"クラスが指定されているspanタグの要素の一覧を取得し、取得した要素それぞれをクリックさせています。
以上、参考になりますでしょうか？
落合 様
ご丁寧な解説とコーディング例をご教示いただき、誠にありがとうございました。
おかげさまで、ボタンによる全てのグループフィールドの開け閉めを実現することができました。
DOMは"Document Object Model"の略ですね。なんとなくではありますが理解することができました。
jQueryについてはまだまだ曖昧ではありますので、今後調べて知識を高められればと思っております。
誠に恐縮ですが、追加で質問させていただけますでしょうか。
・今回"Click"を教えていただきましたが、“開ける”、"閉める"をそれぞれ意識的に行うことはできますでしょうか。
・今回は全てのグループフィールドへの操作を教えていただきましたが、ある特定のグループフィールドに対してのみ行いたい場合はどのようにすればよろしいでしょうか。
恐れ入りますが、なにとぞよろしくお願いいたします。
Hirofumi Takahashiさん
今回"Click"を教えていただきましたが、“開ける”、"閉める"をそれぞれ意識的に行うことはできますでしょうか。
この場合は、clickで行うよりkintoneのクラスを利用するほうが楽です。
(function () {
"use strict";
// Cybozu CDNからjQueryを読み込む
document.write('<script src="//js.cybozu.com/jquery/1.11.2/jquery.min.js"></script>');
kintone.events.on('app.record.detail.show', function (event) {
// メニュ右側の空白部分にボタンを設置
var groupOpenButton = document.createElement('button');
groupOpenButton.id = 'group_open_button';
groupOpenButton.innerHTML = 'グループを開く';
groupOpenButton.onclick = function () {
// グループを開く
var $groups = $('.control-group-gaia')
if ($groups.hasClass('control-group-gaia-collapsed')) {
$groups.removeClass('control-group-gaia-collapsed');
}
if (!$groups.hasClass('control-group-gaia-expanded')) {
$groups.addClass('control-group-gaia-expanded');
}
}
kintone.app.record.getHeaderMenuSpaceElement().appendChild(groupOpenButton);
var groupCloseButton = document.createElement('button');
groupCloseButton.id = 'group_close_button';
groupCloseButton.innerHTML = 'グループを閉じる';
groupCloseButton.onclick = function () {
// グループを閉じる
var $groups = $('.control-group-gaia')
if ($groups.hasClass('control-group-gaia-expanded')) {
$groups.removeClass('control-group-gaia-expanded');
}
if (!$groups.hasClass('control-group-gaia-collapsed')) {
$groups.addClass('control-group-gaia-collapsed');
}
}
kintone.app.record.getHeaderMenuSpaceElement().appendChild(groupCloseButton);
});
})();
前回と違う点は、ボタンのonclickイベントでの処理内容です。
グループを開くボタンだと
var $groups = $('.control-group-gaia')
if ($groups.hasClass('control-group-gaia-collapsed')) {
$groups.removeClass('control-group-gaia-collapsed');
}
if (!$groups.hasClass('control-group-gaia-expanded')) {
$groups.addClass('control-group-gaia-expanded');
}
グループの中で、control-group-gaia-collapsedクラスが指定されている場合は削除し、
control-group-gaia-expandedクラスが指定されていない場合は、追加するという処理になります。
グループを閉じる場合は反対です。
今回は全てのグループフィールドへの操作を教えていただきましたが、ある特定のグループフィールドに対してのみ行いたい場合はどのようにすればよろしいでしょうか。
この場合は、前回のボタンのonclickイベントのセレクタに、指定したいグループの一意なクラス"field-…"(…は数値)を追加することで実現できます。
$('.control-group-gaia>span.group-label-gaia').click();
↓
$('.control-group-gaia.field-5096299>span.group-label-gaia').click();
こんな感じです。
“field-…”(…は数値)を調べるには、以下の手順を試してください。
以上、参考になりますでしょうか？
落合 様
ご丁寧にご解説いただいたにも関わらずごあいさつが遅くなり申し訳ありません。
追加の質問について、ご親切にご解説いただきありがとうございました。
ご教示いただいた情報を基に仕様を検討し、グループフィールドが40近くある
画面構成のため、ボタンによる一括の開け閉めではなく、単純にグループ内の
ある項目にデータがあれば開く（click）ように設計を行い、動作するように
なりました。本当にありがとうございました。
大変恐縮ですが、最後にもうひとつご教示いただきたいことがございます。
レコード詳細照会画面で印刷ボタンをクリックすると印刷用のタグが新規で
開きますが、このイベントが発生した際にも同様にグループの開け閉めを
行いたいと思っております。この点についてご教示いただけますと幸いです。
どうぞ、よろしくお願いいたします。
高橋
高橋さん
少し調べてみましたが、印刷ページは現在のグループ開閉状態にかかわらず閉じた状態で表示されるようです。
印刷ページではアプリに登録したJavaScriptを動作させることはできません。
しかし、kintoneシステム管理で登録した全体適応のJavaScriptであれば動作するようです。
印刷ページはドキュメントにもない仕様に関わる部分が多いため、JavaScriptはあまりオススメしません。
どうしても必要な場合は、kintoneシステム管理で全体適応のJavaScriptを登録してください。
方法としては、location.pathnameが"/k/アプリID/print?record="の文字列を含む場合、グループの開閉制御を行うといった処理で対応できるかと思います。
ボタンを置く場合は無理やりprint-header-gaiaクラスの指定されているdivの中などに設置するしかなさそうです。
以上、参考になりますでしょうか？
落合 様
印刷ページの件、お調べいただきありがとうございます。
私の現在の技術レベルでは難しそうであることと、アプリのリリース期限も迫っていることもあり、印刷ページは別の機会に挑戦させていただこうと思います。
毎回ご丁寧にご解説いただきありがとうございました。
大変助かりました。
引き続き、またなにかありましたらよろしくお願いいたします。
高橋