Skip to main content

BulkAction

BulkAction​

@vendure/admin-uibulk-action-types.ts
v1.8.0

Configures a bulk action which can be performed on all selected items in a list view.

For a full example, see the registerBulkAction docs.

Signature
interface BulkAction<ItemType = any, ComponentType = any> {
    location: BulkActionLocationId;
    label: string;
    getTranslationVars?: (
        context: BulkActionFunctionContext<ItemType, ComponentType>,
    ) => Record<string, string | number> | Promise<Record<string, string | number>>;
    icon?: string;
    iconClass?: string;
    onClick: (context: BulkActionClickContext<ItemType, ComponentType>) => void;
    isVisible?: (context: BulkActionFunctionContext<ItemType, ComponentType>) => boolean | Promise<boolean>;
    requiresPermission?: string | ((userPermissions: string[]) => boolean);
}

location​

property
BulkActionLocationId

label​

property
string

getTranslationVars​

property
( context: BulkActionFunctionContext<ItemType, ComponentType>, ) => Record<string, string | number> | Promise<Record<string, string | number>>

An optional function that should resolve to a map of translation variables which can be used when translating the label string.

icon​

property
string

A valid Clarity Icons icon shape, e.g. "cog", "user", "info-standard".

iconClass​

property
string

A class to be added to the icon element. Examples:

  • is-success
  • is-danger
  • is-warning
  • is-info
  • is-highlight

onClick​

property
(context: BulkActionClickContext<ItemType, ComponentType>) => void

Defines the logic that executes when the bulk action button is clicked.

isVisible​

property
(context: BulkActionFunctionContext<ItemType, ComponentType>) => boolean | Promise<boolean>

A function that determines whether this bulk action item should be displayed in the menu. If not defined, the item will always be displayed.

This function will be invoked each time the selection is changed, so try to avoid expensive code running here.

Example

import { registerBulkAction, DataService } from '@vendure/admin-ui/core';

registerBulkAction({
  location: 'product-list',
  label: 'Assign to channel',
  // Only display this action if there are multiple channels
  isVisible: ({ injector }) => injector.get(DataService).client
    .userStatus()
    .mapSingle(({ userStatus }) => 1 < userStatus.channels.length)
    .toPromise(),
  // ...
});

requiresPermission​

property
string | ((userPermissions: string[]) => boolean)

Control the display of this item based on the user permissions.

Example

registerBulkAction({
  // Can be specified as a simple string
  requiresPermission: Permission.UpdateProduct,

  // Or as a function that returns a boolean if permissions are satisfied
  requiresPermission: userPermissions =>
    userPermissions.includes(Permission.UpdateCatalog) ||
    userPermissions.includes(Permission.UpdateProduct),
  // ...
})

BulkActionLocationId​

@vendure/admin-uibulk-action-types.ts
v1.8.0

A valid location of a list view that supports the bulk actions API.

Signature
type BulkActionLocationId = | 'product-list'
    | 'facet-list'
    | 'collection-list'
    | 'customer-list'
    | 'customer-group-list'
    | 'customer-group-members-list'
    | 'customer-group-members-picker-list'
    | 'promotion-list'
    | 'seller-list'
    | 'channel-list'
    | 'administrator-list'
    | 'role-list'
    | 'shipping-method-list'
    | 'stock-location-list'
    | 'payment-method-list'
    | 'tax-category-list'
    | 'tax-rate-list'
    | 'zone-list'
    | 'zone-members-list'
    | string

BulkActionFunctionContext​

@vendure/admin-uibulk-action-types.ts
v1.8.0

This is the argument which gets passed to the getTranslationVars and isVisible functions of the BulkAction definition.

Signature
interface BulkActionFunctionContext<ItemType, ComponentType> {
    selection: ItemType[];
    hostComponent: ComponentType;
    injector: Injector;
    route: ActivatedRoute;
}

selection​

property
ItemType[]

An array of the selected items from the list.

hostComponent​

property
ComponentType

The component instance that is hosting the list view. For instance, ProductListComponent. This can be used to call methods on the instance, e.g. calling hostComponent.refresh() to force a list refresh after deleting the selected items.

injector​

property
Injector

The Angular Injector which can be used to get service instances which might be needed in the click handler.

route​

property
ActivatedRoute

BulkActionClickContext​

@vendure/admin-uibulk-action-types.ts
v1.8.0

This is the argument which gets passed to the onClick function of a BulkAction.

Signature
interface BulkActionClickContext<ItemType, ComponentType> extends BulkActionFunctionContext<ItemType, ComponentType> {
    clearSelection: () => void;
    event: MouseEvent;
}

clearSelection​

property
() => void

Clears the selection in the active list view.

event​

property
MouseEvent

The click event itself.