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

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

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

実行

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

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

レコード一覧のクエリ文字列を取得する

レコード一覧のクエリ文字列を取得します。

cybozu.dev

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES20xx),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^