ActionBarDropdownMenuItem

A dropdown menu item in the ActionBar area at the top of one of the list or detail views.

interface ActionBarDropdownMenuItem {
    id: string;
    label: string;
    locationId: ActionBarLocationId;
    hasDivider?: boolean;
    buttonState?: (context: ActionBarContext) => Observable<ActionBarButtonState | undefined>;
    onClick?: (event: MouseEvent, context: ActionBarContext) => void;
    routerLink?: RouterLinkDefinition;
    icon?: string;
    requiresPermission?: string | string[];
}

id

<MemberInfo kind="property" type={string} />

A unique identifier for the item.

label

<MemberInfo kind="property" type={string} />

The label to display for the item. This can also be a translation token, e.g. invoice-plugin.print-invoice.

locationId

<MemberInfo kind="property" type={<a href='/reference/admin-ui-api/action-bar/action-bar-location-id#actionbarlocationid'>ActionBarLocationId</a>} />

The location in the UI where this menu item should be displayed.

hasDivider

<MemberInfo kind="property" type={boolean} />

Whether to render a divider above this item.

buttonState

<MemberInfo kind="property" type={(context: <a href='/reference/admin-ui-api/action-bar/action-bar-context#actionbarcontext'>ActionBarContext</a>) => Observable<ActionBarButtonState | undefined>} />

A function which returns an observable of the button state, allowing you to dynamically enable/disable or show/hide the button.

onClick

<MemberInfo kind="property" type={(event: MouseEvent, context: <a href='/reference/admin-ui-api/action-bar/action-bar-context#actionbarcontext'>ActionBarContext</a>) => void} />

routerLink

<MemberInfo kind="property" type={<a href='/reference/admin-ui-api/action-bar/router-link-definition#routerlinkdefinition'>RouterLinkDefinition</a>} />

icon

<MemberInfo kind="property" type={string} />

An optional icon to display with the item. The icon should be a valid shape name from the Clarity Icons set.

requiresPermission

<MemberInfo kind="property" type={string | string[]} />

Control the display of this item based on the user permissions. Note: if you attempt to pass a PermissionDefinition object, you will get a compilation error. Instead, pass the plain string version. For example, if the permission is defined as:

export const MyPermission = new PermissionDefinition('ProductReview');

then the generated permission strings will be:

• CreateProductReview
• ReadProductReview
• UpdateProductReview
• DeleteProductReview