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

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アプリにアップロードします。歯車アイコンをクリックして「設定」タブを押します。