RequisitionListView Container

Displays the contents of a specific requisition list including items, quantities, and management actions.

Version: 1.0.0-beta4

Configuration

The RequisitionListView container provides the following configuration options:

Parameter	Type	Req?	Description
requisitionListUid	string	Yes	Specifies the UID of the requisition list to display. Must be a base64-encoded string. If an invalid UID is provided, renders the NotFound state. Fetches the requisition list data internally using this identifier.
skipProductLoading	boolean	No	Controls whether to skip automatic product data fetching on component mount. Set to true in test environments to prevent API calls or when product data is loaded externally.
pageSize	number	No	Sets the number of items displayed per page for pagination. Controls how many requisition list items appear in each page view. Defaults to DEFAULT_PAGE_SIZE if not specified.
selectedItems	Set<string>	Yes	Provides a Set of selected item UIDs for batch operations. Tracks which items are selected for actions like adding to cart or deleting. Required to enable multi-select functionality.
routeRequisitionListGrid	function	No	Generates the URL for navigating back to the requisition list grid view. Use to implement breadcrumb navigation, back buttons, or custom routing logic that preserves query parameters or application state.
fallbackRoute	string	No	Sets the fallback URL to redirect when requisition lists are not enabled or unavailable. Defaults to ‘/customer/account’. Use to provide graceful degradation when B2B features are disabled.

Slots

This container does not expose any customizable slots.

Usage

The following example demonstrates how to use the RequisitionListView container:

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

await provider.render(RequisitionListView, {
  requisitionListUid: "abc-123",
  selectedItems: "example",
  skipProductLoading: true,
})(block);