ActionBarContext - Vendure

Providers & data available to the onClick & buttonState functions of an ActionBarItem, ActionBarDropdownMenuItem or NavMenuItem.

interface ActionBarContext {
    route: ActivatedRoute;
    injector: Injector;
    dataService: DataService;
    notificationService: NotificationService;
    entity$: Observable<Record<string, any> | undefined>;
}

route

The router's ActivatedRoute object for the current route. This object contains information about the route, its parameters, and additional data associated with the route.

injector

<MemberInfo kind="property" type={<a href='/reference/typescript-api/common/injector#injector'>Injector</a>} />

The Angular Injector which can be used to get instances of services and other providers available in the application.

dataService

<MemberInfo kind="property" type={<a href='/reference/admin-ui-api/services/data-service#dataservice'>DataService</a>} />

The DataService, which provides methods for querying the server-side data.

notificationService

<MemberInfo kind="property" type={<a href='/reference/admin-ui-api/services/notification-service#notificationservice'>NotificationService</a>} />

The NotificationService, which provides methods for displaying notifications to the user.

entity$

<MemberInfo kind="property" type={Observable<Record<string, any> | undefined>} since="2.2.0" />

An observable of the current entity in a detail view. In a list view the observable will not emit any values.

Example

addActionBarDropdownMenuItem({
    id: 'print-invoice',
    locationId: 'order-detail',
    label: 'Print Invoice',
    icon: 'printer',
    buttonState: context => {
        return context.entity$.pipe( // [!code highlight]
            map((order) => { // [!code highlight]
                return order?.state === 'PaymentSettled' // [!code highlight]
                    ? { disabled: false, visible: true } // [!code highlight]
                    : { disabled: true, visible: true }; // [!code highlight]
            }), // [!code highlight]
        ); // [!code highlight]
    },
    requiresPermission: ['UpdateOrder'],
}),

</div>