bulk-action.md 7.9 KB
title: "BulkAction" weight: 10 date: 2023-06-13T12:31:12.809Z showtoc: true
generated: true
BulkAction
# BulkAction
{{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/providers/bulk-action-registry/bulk-action-types.ts" sourceLine="99" packageName="@vendure/admin-ui" since="1.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
```TypeScript
interface BulkAction {
location: BulkActionLocationId;
label: string;
getTranslationVars?: (
context: BulkActionFunctionContext,
) => Record | Promise>;
icon?: string;
iconClass?: string;
onClick: (context: BulkActionClickContext) => void;
isVisible?: (context: BulkActionFunctionContext) => boolean | Promise;
requiresPermission?: string | ((userPermissions: string[]) => boolean);
}
```
## Members
### location
{{< member-info kind="property" type="BulkActionLocationId" >}}
{{< member-description >}}{{< /member-description >}}
### label
{{< member-info kind="property" type="string" >}}
{{< member-description >}}{{< /member-description >}}
### getTranslationVars
{{< member-info kind="property" type="(
context: BulkActionFunctionContext<ItemType, ComponentType>,
) => Record<string, string | number> | Promise<Record<string, string | number>>" >}}
{{< member-description >}}An optional function that should resolve to a map of translation variables which can be
used when translating the `label` string.{{< /member-description >}}
### icon
{{< member-info kind="property" type="string" >}}
{{< member-description >}}A valid [Clarity Icons](https://core.clarity.design/foundation/icons/shapes/) icon shape, e.g.
"cog", "user", "info-standard".{{< /member-description >}}
### iconClass
{{< member-info kind="property" type="string" >}}
{{< member-description >}}A class to be added to the icon element. Examples:
- is-success
- is-danger
- is-warning
- is-info
- is-highlight{{< /member-description >}}
### onClick
{{< member-info kind="property" type="(context: BulkActionClickContext<ItemType, ComponentType>) => void" >}}
{{< member-description >}}Defines the logic that executes when the bulk action button is clicked.{{< /member-description >}}
### isVisible
{{< member-info kind="property" type="(context: BulkActionFunctionContext<ItemType, ComponentType>) => boolean | Promise<boolean>" >}}
{{< member-description >}}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*
```TypeScript
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(),
// ...
});
```{{< /member-description >}}
### requiresPermission
{{< member-info kind="property" type="string | ((userPermissions: string[]) => boolean)" >}}
{{< member-description >}}Control the display of this item based on the user permissions.
*Example*
```TypeScript
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),
// ...
})
```{{< /member-description >}}
# BulkActionLocationId
{{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/providers/bulk-action-registry/bulk-action-types.ts" sourceLine="12" packageName="@vendure/admin-ui" since="1.8.0">}}
A valid location of a list view that supports the bulk actions API.
## Signature
```TypeScript
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
{{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/providers/bulk-action-registry/bulk-action-types.ts" sourceLine="43" packageName="@vendure/admin-ui" since="1.8.0">}}
This is the argument which gets passed to the `getTranslationVars` and `isVisible` functions
of the BulkAction definition.
## Signature
```TypeScript
interface BulkActionFunctionContext {
selection: ItemType[];
hostComponent: ComponentType;
injector: Injector;
route: ActivatedRoute;
}
```
## Members
### selection
{{< member-info kind="property" type="ItemType[]" >}}
{{< member-description >}}An array of the selected items from the list.{{< /member-description >}}
### hostComponent
{{< member-info kind="property" type="ComponentType" >}}
{{< member-description >}}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.{{< /member-description >}}
### injector
{{< member-info kind="property" type="Injector" >}}
{{< member-description >}}The Angular [Injector](https://angular.io/api/core/Injector) which can be used
to get service instances which might be needed in the click handler.{{< /member-description >}}
### route
{{< member-info kind="property" type="ActivatedRoute" >}}
{{< member-description >}}{{< /member-description >}}
# BulkActionClickContext
{{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/providers/bulk-action-registry/bulk-action-types.ts" sourceLine="74" packageName="@vendure/admin-ui" since="1.8.0">}}
This is the argument which gets passed to the `onClick` function of a BulkAction.
## Signature
```TypeScript
interface BulkActionClickContext extends BulkActionFunctionContext {
clearSelection: () => void;
event: MouseEvent;
}
```
## Extends
* BulkActionFunctionContext<ItemType, ComponentType>
## Members
### clearSelection
{{< member-info kind="property" type="() => void" >}}
{{< member-description >}}Clears the selection in the active list view.{{< /member-description >}}
### event
{{< member-info kind="property" type="MouseEvent" >}}
{{< member-description >}}The click event itself.{{< /member-description >}}