レコード内のフィールドをスクロール固定する方法をご教授お願いします。 レコード表示をした際に 顧客の名前を入れた文字1行フィールドスクロールしても常に上に表示されるようにしたい。 例えばエクセルの画面固定のようにレコード内フィルドを行いたい。
以下で近いことが可能かと思います。途中まで通常通り表示されますが、スクロールした際に画面上部へ残るようになっています。グループ内にあるフィールドには適用できず、同じ行のフィールド全てが対象になっています。
4行目のstickyFieldにはコンソールツール等から確認できる、フィールドに割り振られている番号（Chromeであれば対象のフィールドを右クリックして検証を選択すれば「field-*****」と記載されています）を入力して下さい。
positionをstickyからfixedに変えればスクロール状態に関わらず常に固定させることができますが、スクロールの状態を監視して、という処理を追加する必要があるでしょう。topはお好みで調整して下さい。
(function() {
'use strict';
let stickyField = ''; //フィールドに割り振られている番号
kintone.events.on([
'app.record.detail.show', 'app.record.create.show', 'app.record.edit.show'
], (event) => {
let fieldElement = document.getElementsByClassName('field-' + stickyField)[0];
let parentRow = fieldElement.parentNode;
parentRow.style.position = 'sticky';
parentRow.style.top = '130px';
parentRow.style.zIndex = '10';
parentRow.style.backgroundColor = '#F5F5F5';
return event;
});
})();
@mls-hashimoto様
ありがとうございます！
業務が効率化され助かりました。
教え頂いたうえにさらにさらに質問申し訳ないのですが…
一文字フィールドの隣にスペースIDで設定した
ボタンがあるのですが…
ボタンも一緒上部に固定したいのですが、
お教え頂いたジャバスクリプトをspaceIDに書き換えても動きませんでした。
お教えいただけると幸いです。
よろしくおねがいします。
https://developer.cybozu.io/hc/ja/community/posts/6549327894169/comments/6628283873049
n さま
そのフィールドと同じ行にあるのであればフィールドと一緒に固定されるはず（フィールドまたはスペースの親要素である行にposition:relativeが適用されているのをstickyに変更しているため）ですが、スペースの場合はkintoneで用意されているgetSpaceElementが使えます。
その場合、parentNodeがもう一つ必要です。
(function() {
'use strict';
let stickySpace = ''; //スペースID
kintone.events.on([
'app.record.detail.show', 'app.record.create.show', 'app.record.edit.show'
], (event) => {
let spaceElement = kintone.app.record.getSpaceElement(stickySpace);
let parentRow = spaceElement.parentNode.parentNode;
parentRow.style.position = 'sticky';
parentRow.style.top = '130px';
parentRow.style.zIndex = '10';
parentRow.style.backgroundColor = '#F5F5F5';
return event;
});
})();
@mls-hashimoto様
ありがとうございます。
これがしたかったんです！
無事にフィールドもスペースボタンもスクロール時の固定ができました。
お教え頂きありがとうございました！
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。