Action Registrar

Table of Contents

Overview
Registering Actions
Rendering Actions

Overview

The ActionRegistrar is a repository of the action components used to support actions within the metadata-driven components. Actions typically send requests to endpoints to perform some operation such as submitting a form or initiating an export. This document gives an overview of how it can be used to create actions within the admin application.

The registrar is used within various metadata-driven components to provide an extensible mechanism of adding custom action behaviors.

Registering Actions

An action component can be registered with the ActionRegistrar in order to support a new metadata-driven action, or override an existing one. Unlike named and common components like form fields and <Button>, actions are rendered directly by their parent component rather than through <ComponentRenderer>, and, therefore, are registered with reference to that parent. Actions also specify a placement such as PRIMARY (submit), SECONDARY (delete), GRID (add row), or ROW (edit row).

import { services } from '@broadleaf/admin-components';
const { ActionRegistrar } = services;
// specify the parent classifier and the parent component type, then the action, its placement and type
ActionRegistrar.registerActionComponent('View', 'ENTITY', {
  component: MyActionComponent,
  placement: 'PRIMARY',
  type: 'MY_ACTION'
});

Registering multiple actions for the same parent

import { services } from '@broadleaf/admin-components';
const { ActionRegistrar } = services;

ActionRegistrar.registerActionComponents('View', 'ENTITY', [
  {
    component: MyCreateAction,
    placement: 'PRIMARY',
    type: 'MY_CREATE_ACTION'
  },
  {
    component: MyDeleteAction,
    placement: 'SECONDARY',
    type: 'MY_DELETE_ACTION'
  }
]);

Rendering Actions

Action components may be retrieved for an entire view, or individually for a certain placement and type, for example:

Retrieve all actions for a parent

import { services } from '@broadleaf/admin-components';
const { ActionRegistrar } = services;
// get action information for a view
const actions = ActionRegistrar.getActionComponents('View', 'ENTITY');
// each entry includes the component, and the action placement/type
const { component, placement, type } = actions[0];
// filter by placement
const primaryActions = actions.filter(action => action.placement === 'PRIMARY');
const secondaryActions = actions.filter(action => action.placement === 'SECONDARY');

Retrieve a specific, single action for a parent

import { services } from '@broadleaf/admin-components';
const { ActionRegistrar } = services;
// get the action component directly
const createAction = ActionRegistrar.getActionComponent('View', 'ENTITY', 'PRIMARY', 'CREATE');