メインコンテンツまでスキップ

レコード詳細画面表示時

app.record.detail.show イベントは、アプリケーションのレコード詳細画面が表示されたタイミングで発火します。
このイベントを利用することで、詳細画面に独自の UI 要素を追加したり、レコードの詳細情報に基づいたカスタム処理を実行することが可能です。

定義​

  • レコードの詳細画面が完全に描画された後に発火します。
  • レコード詳細画面の表示が完了したときに handler を実行します。
atPocket.events.on('app.record.detail.show', handler)

関数パラメータ​

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

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

handlerの引数eventの内容
{
    "appId": "integer", // アプリID
    "recordId": "integer", // レコードID
    "fields": [], // フィールド情報の配列
    "record": [], // レコードデータの配列
}

戻り値​

なし

記述方法​

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

サンプルコード​

  • テキストフィールドに入力したMarkdown記法の内容を変換して表示します。
  • 以下のサンプルではmarkedjs を使用しています。同梱するか、CDNから読み込むように設定してください。
atPocket.events.on('app.record.detail.show', (event) => {
    // レコード詳細画面が表示されたときに実行する処理を記述します。
    console.log('レコード詳細画面が表示されました');

    const record = event.record;

    // フィールドの表示領域を取得
    const element = atPocket.app.record.getFieldElement('field-1');

    // marked.jsでマークダウン形式の内容を変換し、表示領域にセット
    element.innerHTML = marked.parse(record['field-1'].value.text);
});