kintoneアプリでレコード一覧のメニューの右側の空白部分の要素にボタンを配置する – app.record.index.show

kintoneアプリでレコード一覧のメニューの右側の空白部分の要素にボタンを配置する – app.record.index.show

一覧画面の初期表示時のイベントで釦を設置してみます。app.record.index.showイベント時に表示を行います。

app.record.index.show

app.record.index.showイベントでkintone.app.getHeaderMenuSpaceElement()を使用してエレメント取得します。そのエレメントにボタンを配置します。

  • ページめくり
  • カラムでソート

この2つの操作をしたときにイベントが実行されるので、ボタンが増えていってしまいます。

その為、イベントハンドラの先頭で、document.getElemntById(id)で要素の存在チェックを行い、既にある場合はreturnします。

a.js

kintone.events.on('app.record.index.edit.show', (event) => {
   if (document.getElementById('button1') !== null) {
       return event;
    }
    const button1 = document.createElement('button')
    button1.id = 'button1'
    button1.innerText = 'クリアボタン'
    button1.onclick = ()=> {
        window.alert('押されました')
    },()=>{}
    kintone.app.getHeaderMenuSpaceElement().appendChild(button1)
    return event
})

a.jsファイルをkintoneアプリにアップロードします。歯車アイコンをクリックして「設定」タブを押します。

kintoneアプリで編集時にJSを実行する - app.record.index.edit.change.

「JavaScript / CSSでカスタマイズ」をクリックします。アップロードしたら左上の「保存」をクリックします。

kintoneアプリで編集時にJSを実行する - app.record.index.edit.change.

右上に出てくる「アプリを更新」をクリックしてアプリに反映されます。

kintoneアプリで編集時にJSを実行する - app.record.index.edit.change.

実行

レコード一覧表示時にボタンを表示し、クリックすると、alert()が実行されます。

kintoneアプリでレコード一覧のメニューの右側の空白部分の要素にボタンを配置する – app.record.index.show

レコード一覧のメニューの右側の空白部分の要素を取得する

Security check

コメント

タイトルとURLをコピーしました