レコード一覧の画面表示時

app.record.index.show イベントは、アプリケーションのレコード一覧が表示されたタイミングで発火します。
このイベントを利用することで、一覧表示時に独自の UI 要素を追加したり、表示内容を動的に変更することが可能になります。

定義方法

• atPocket.event.on 関数を使用して、特定のイベントにハンドラーを登録します。
• レコード一覧の表示が完了したときに handler を実行します。

atPocket.events.on('app.record.index.show', handler)

関数パラメータ

パラメータ名	必須	型	説明文
type	必須	string | array	イベントの名前。 複数のイベントで同じ処理を行いたい場合は配列形式で指定します。
handler	必須	function	handler(event) => void イベントが発生したときに呼び出されるコールバック関数を指定します。 引数 event の内容は下記参照。

イベントオブジェクトのプロパティ

handlerの引数eventの内容

{
    "fields": [], // フィールド情報の配列
    "records": [], // レコードデータの配列
    "viewType": "string" // ビュータイプ
}

戻り値

なし

記述方法

atPocket.events.on('app.record.index.show', function(event) {
    // レコード一覧表示時に実行する処理を記述
});

サンプルコード

• 例: カスタムボタンを一覧画面の上部に追加する

atPocket.events.on('app.record.index.show', (event) => {
    // レコード一覧画面が表示されたときに実行する処理を記述します。
    console.log('レコード一覧画面が表示されました');

    // カスタムボタンの作成
    const customButton = document.createElement('button');
    customButton.innerText = 'カスタム操作';
    customButton.classList.add('custom_button');
    customButton.onclick = () => {
      alert('カスタムボタンがクリックされました');
    };

    // 表示領域(一覧上部)の要素を取得して、ボタンを追加
    const headerArea = atPocket.app.getTopSpaceElement();
    if (headerArea) {
      headerArea.appendChild(customButton);
    }
  });