RequisitionListHeader Container

Displays header information for a requisition list including name, description, and action buttons.

Version: 1.1.0

Configuration

The RequisitionListHeader container provides the following configuration options:

Parameter	Type	Req?	Description
requisitionList	RequisitionList	Yes	Provides the requisition list data object containing name, description, and metadata. Required to display the list information in the header. Contains all list details needed for rendering the header section.
routeRequisitionListGrid	function	No	Generates the URL for navigating back to the requisition list grid view. Returns a URL string or performs navigation. Use to implement breadcrumb navigation, back buttons, or integrate with your application’s routing system.
onUpdate	function	No	Callback function to handle requisition list updates when the name or description changes. Use to refresh the parent component or show success notifications.
onAlert	function	No	Callback function to handle alert notifications when alerts are displayed.
enrichConfigurableProducts	(items: Item[]) => Promise<Item[]>	Yes	Enriches the configurable products contained in requisition list items. Takes an array of items and returns the same array with configured product data attached.

Slots

This container does not expose any customizable slots.

Usage

The following example demonstrates how to use the RequisitionListHeader container:

import { render as provider } from '@dropins/storefront-requisition-list/render.js';
import { RequisitionListHeader } from '@dropins/storefront-requisition-list/containers/RequisitionListHeader.js';

await provider.render(RequisitionListHeader, {
  requisitionList,
  routeRequisitionListGrid: () => '/requisition-lists',
  onUpdate: (updatedList) => {
    console.log('Requisition list updated:', updatedList);
  },
  enrichConfigurableProducts,
})(block);