一覧画面にアクションを追加する

エントリー一覧・モジュール一覧に、独自のボタン・一括操作・メニュー項目を追加します。

対応バージョン: Ver. 3.2.38 以降

行にボタンを追加する

各行の操作ボタンを追加します。次の例は、公開中のエントリーの行に「ID をコピー」ボタンを追加します。

ACMS.adminReady(() => {
  ACMS.plugins.register('acme-entry-copy-id', {
    setup(ctx) {
      ctx.dataview.registerAction('entry', 'acme-entry-copy-id/copy', {
        id: 'acme-entry-copy-id/copy',
        label: 'ID をコピー',
        condition: (entry) => entry.status === 'open',
        onAction: async (entry) => {
          await navigator.clipboard.writeText(String(entry.id));
        },
      });
    },
  });
});

第1引数は対象の一覧です。エントリー一覧は 'entry'、モジュール一覧は 'module' を指定します。

行のデータは、エントリー一覧ではエントリーの情報（id / title / status / blog.id / category.id など）、モジュール一覧ではモジュールの情報（id / identifier / name / status など）です。

リンクとして表示する

onAction の代わりに getHref を指定すると、ボタンではなくリンクとして描画されます。

ACMS.adminReady(() => {
  ACMS.plugins.register('acme-entry-open-page', {
    setup(ctx) {
      ctx.dataview.registerAction('entry', 'acme-entry-open-page/open', {
        id: 'acme-entry-open-page/open',
        label: '公開ページを開く',
        getHref: (entry) => ACMS.Library.acmsLink({ bid: entry.blog.id, eid: entry.id }),
      });
    },
  });
});

一括操作を追加する

複数選択したあとに実行する操作です。一括操作は、選択したあとに操作を選び、フォームの送信ボタンを押して実行する形です。送信ボタンは renderForm で自分で用意します。 renderForm を省略すると、操作を選んでも実行するボタンが表示されません。

ACMS.adminReady(() => {
  const { createElement } = ACMS.Library.React;

  ACMS.plugins.register('acme-entry-bulk', {
    setup(ctx) {
      ctx.dataview.registerBulkAction('entry', 'acme-entry-bulk/list-ids', {
        id: 'acme-entry-bulk/list-ids',
        label: '選択したエントリーの ID を表示',
        renderForm: () =>
          createElement(
            'button',
            { type: 'submit', className: 'acms-admin-btn-admin acms-admin-btn-admin-primary' },
            '実行'
          ),
        onAction: async (formData, entries) => {
          await ACMS.Library.dialog.alert(entries.map((entry) => entry.id).join(', '));
        },
      });
    },
  });
});

onAction には、フォームの内容（FormData）と、選択された行の配列が渡されます。renderForm で入力欄を返せば、その値も FormData に入ります。condition(選択された行の配列) で、操作を選択肢に出すかどうかを切り替えることもできます。

メニュー項目を追加する

一覧上部のメニューに項目を追加します。

ACMS.adminReady(() => {
  ACMS.plugins.register('acme-entry-menu', {
    setup(ctx) {
      ctx.dataview.registerMenu('entry', 'acme-entry-menu/count', {
        id: 'acme-entry-menu/count',
        label: '表示件数を確認',
        onAction: async (entries) => {
          await ACMS.Library.dialog.alert(`${entries.length} 件のエントリーを表示しています`);
        },
      });
    },
  });
});

onAction には、一覧に表示されている行の配列が渡されます。

カラムの型を追加する

一覧に表示するカラムの、セルの見た目を追加します。ここで登録した型は、カスタムカラムを追加するときの型の選択肢に label の名前で加わります。

ACMS.adminReady(() => {
  const { createElement } = ACMS.Library.React;

  ACMS.plugins.register('acme-entry-column', {
    setup(ctx) {
      ctx.dataview.registerColumnType('acme-entry-column/badge', {
        label: 'バッジ',
        getValue: (info) =>
          createElement('span', { className: 'acms-admin-label acms-admin-label-info' }, String(info.getValue() ?? '')),
      });
    },
  });
});

標準のカラム型と同じ名前で登録すると、標準の定義が上書きされ、その型を使うすべての一覧に影響します。 独自の名前を付けてください。

カラムの並び替えや削除は、この API では行えません。従来の getColumns を使ってください。

一括操作の前に処理を挟みたい場合

「公開状態を一括変更する前に確認したい」といった割り込みは、レジストリではなくイベントを使います。

ACMS.adminReady(() => {
  ACMS.plugins.register('acme-entry-confirm', {
    setup(ctx) {
      ctx.events.on('entry.bulk-status.before', async (payload, gate) => {
        const ok = await ACMS.Library.dialog.confirm('選択したエントリーの公開状態を変更します。よろしいですか？');
        if (!ok) {
          gate.cancel(); // 呼ぶと一括変更を中止する
        }
      });
    },
  });
});

一覧画面で使えるイベントは イベント一覧 の「エントリー」「モジュール」を参照してください。

名前の付け方

同じ名前で2回登録するとエラーになります。 プラグイン名/機能名 の形にしておくと衝突しません。'entry' と 'module' は別扱いなので、同じ名前を両方に登録できます。

このページの例を1つのファイルにまとめて試すときは、プラグイン名（ACMS.plugins.register() の第1引数）が重複しないようにしてください。

関連ページ

• 機能の登録（レジストリ）
• イベント一覧

変更履歴