項目が大量にあるため、入力するときに目次をクリックしたら目的の場所までジャンプするような仕組みが欲しいと言われています。
何かいい方法は無いでしょうか。
(全部で500項目ほど。今は20項目くらいずつグループにして数グループ毎に見出しをつけて何とかしています)
tipsを見ながらレコード詳細画面のメニュー右側にドロップダウンリストとボタンをつけて見ましたが、目的の場所までジャンプさせる方法がわかりません。(あるいは目的のブロック以外を非表示にするのもありです)
右か左にナビゲーションメニューが固定表示というのを実現できると一番良いのですが。
Sakuraiさん
ラジカルブリッジの斎藤です。
500項目とは凄いですね!
自前で用意した目次のクリックで目的の場所までジャンプ、あるいは他の項目を非表示というのは、禁じ手のJavaScriptカスタマイズ(kintoneのDOMを解析して直接DOM操作してしまうカスタマイズ)を行えばできるかもしれませんが、将来的に動かなくなる可能性があるので、あまりオススメできません。
尚、2014/7/13のアップデートで、
・レコード追加画面(PCのみ)
・レコード編集画面(PCのみ)
・レコード詳細画面(PCのみ)
において、指定したフィールドの表示/非表示を切り替える機能というものが追加されます。
https://cybozudev.zendesk.com/hc/ja/articles/202374250
画面表示時イベントや保存実行前イベントなど、kintone標準のイベント発生時にしか使えないものだと思いますが、例えば目次用のkintone標準のドロップダウンを用意しておいて、目次が切り替わったら(=ドロップダウンのフィールド値変更時イベントが発生したら)その選択内容に合わせて目的外の項目を非表示にする、というようなことができるかもしれません。
斉藤さん、回答ありがとうございます。
やっぱり直接項目をいじるのはできないんですね。
kintone.app.getFieldElementsでスタイル変更まではできたんですが。
2014/7/13のアップデート情報ありがとうございます。
新機能試してみたいと思います。
kintone標準コントロールに「グループ」がありますが、
これにはIDをふったり、開く/閉じるをJavaScriptで切り替えたりできないんですね。
これができればそこそこいけるのですが。
質問したSakuraiです。解決策がようやくできました。
setFieldShownでの表示/非表示も技術的にはあっさり可能でしたし、
今回のバージョンアップでグループのエレメントが取得できるようになったので、頑張ればなんとかできそうでしたが。
もっとシンプルに、ブラウザの文字列検索コマンド(Ctrl+F)で目的の場所まで自動スクロールできるので、それを実装してみました。
今のところうまく動いています。
何かこうしたほうが良いという点があればご指導いただけるとありがたいです。
(function () {
“use strict”;
//イベント
var events = ['app.record.detail.show',
'app.record.create.show',
'app.record.edit.show']
//目次
var bookmarks = ['カテゴリ1',
'カテゴリ2',
'カテゴリ3']
kintone.events.on(events, function (event) {
//目次を選択するドロップダウンリストを作成
var select = document.createElement("select");
select.id='bookmark_selecter';
for ( var i=0; i<bookmarks.length; i++ ) {
var option = document.createElement("option");
option.value=bookmarks[i];
option.innerHTML = bookmarks[i];
select.appendChild(option);
}
//メニューの右隣に追加
kintone.app.record.getHeaderMenuSpaceElement().appendChild(select);
//ジャンプボタン
var button = document.createElement('button');
button.id = 'bookmark_jump_button';
button.innerHTML = 'ジャンプ';
button.onclick = function () {
window.find(select.value);
}
//メニューの右隣に追加
kintone.app.record.getHeaderMenuSpaceElement().appendChild(button);
});
})();
補足です。
window.findだとフォワード検索のみで、後ろへ戻れませんでした。
第3引数をtrueにしてバックワード検索も追加しました。
window.find(select.value); //次を検索
window.find(select.value, false, true); //前を検索
ラジカルブリッジ斎藤です。
window.findを使うとはなかなか新鮮ですね!
ひとまず解決策が見つかったようでなによりです。
経過報告2です。
詳細画面では問題なく動くのですが、編集画面で検索をかけると
なぜか詳細画面に戻ってしまうという問題が発生していました。
散々ハマりましたが、ボタンのonClickをコンボボックスのonChangeに変えることで解決しました。
それからIEではwindow.findが効かないので
document.body.createTextRangeでfindTextしてselectする
というやり方で実現しました。