ボタンをクリックして任意のフィールドまでスクロールしたい

kintone 開発相談
1

スペースフィールドにボタンを設置して、

そのボタンをクリックすると任意の場所までスクロールできるようにしたいと考えています。

 

下記のコードで、スクロールできることは確認できましたが、これだと

・アプリの項目を修正するたびにJSの修正も必要になる。

・スクロールの位置（座標軸）がいくつになるのか、何度も試して取得しなければならない。

と言った問題があり、

スクロール先に任意のフィールドを指定するコードを知りたいと考えています。

 

IDが「scroll_button」というスペースフィールドにボタンを設置して、

フィールドコード「check_box」までスクロールしたいです。

(function(scroll_button) {
  "use strict";

    var events = ['app.record.detail.show',
                  'app.record.create.show',
                  'app.record.edit.show',];

    kintone.events.on(events, function(event) {

        var record = event.record;

        // 任意のスペースフィールドにボタンを設置
        var mySpaceFieldButton = document.createElement('button');
        mySpaceFieldButton.id = 'scroll';
      mySpaceFieldButton.innerText = 'チェックボックスに行く';

    // チェックボックスにスクロールする
      mySpaceFieldButton.onclick = function () {
           window.scrollTo({
            top: 500,
              behavior: 'smooth'
           });
        }
      kintone.app.record.getSpaceElement('scroll_button').appendChild(mySpaceFieldButton);
    });

})();

タブを設置して、グループフィールドを表示／非表示する方法もあるかと思いますが、

グループ化しづらいことも多く、ぜひスクロールのコードを覚えたいと考えています。

 

よろしくお願いいたします。

2

指定要素までスクロールするelement.scrollIntoViewというメソッドがあります。
kintone.app.record.getFieldElementでフィールド要素を取得して使用できます。
引数をtrueにすれば対象要素の上辺までスクロール、falseにすれば要素の下辺までスクロールします。

(function() {
  'use strict';

  let scrollTargetField = 'check_box' // スクロール対象にしたいフィールドのフィールドコード

  kintone.events.on([
    'app.record.detail.show', 'app.record.create.show', 'app.record.edit.show'
  ], (event) => {
    let button = document.createElement('button');

    button.id = 'scroll';
    button.innerText = 'チェックボックスに行く';
    button.onclick = () => {
      let fieldElement = kintone.app.record.getFieldElement(scrollTargetField);

      fieldElement.scrollIntoView(false);
    };

    kintone.app.record.getSpaceElement('scroll_button').appendChild(button);

    return event;
  });
})();
3

mls-hashimoto様

ご返信、ありがとうございます。

早速、実装してみたところ、詳細画面ではスクロールできましたが、

編集画面、追加画面では動かず。。。という状況になりました。

原因が何かお心当たりがあれば、お教えいただけないでしょうか？

4

sohkei さま

失礼いたしました。create.showとedit.showではgetFieldElementが使えないことを失念しておりました。
それぞれの画面で同じことをする場合、コンソールツール等からフィールドに振られている番号（Chromeであればチェックボックスのフィールドを右クリックして検証を選択すれば出て来るかと思います）を使用する必要があります。

document.getElementsByClassName('value-/*ここに取得した数字*/')[0].scrollIntoView(false);

 

5

mls-hashimoto様

ありがとうございます。無事にスクロールできるようになりました！

教えていただかなければ、

detail.show、create.show、edit.showで使えるコードが違うなんて、気づかないままでした。

とても助かりました。ありがとうございました。