ApprovalRulesList Container

The ApprovalRulesList container displays all company purchase order approval rules in a paginated table. When rendered, the container automatically retrieves approval rules data using a customer GraphQL query.

Each approval rule is presented as a line item displaying the rule name, type, status, applicable roles, approver roles, and creator. Actions available for each rule depend on the customer’s assigned ACL permissions: View (opens details page), Edit (opens form in edit mode), Delete (removes the rule), and Add New Rule (creates a new rule).

ApprovalRulesList container

Displayed information

• Rule name, type, status
• Roles the rule applies to
• Approver roles
• Rule creator
• Edit, Delete, and View actions (depending on ACL permissions)
• Pagination with configurable page size
• Empty state when no rules exist

ACL permissions

Parameter	Type	Req?	Description
initialPageSize	PageSizeListProps[]	No	Sets the initial pagination size for the table. Controls how many items appear per page on initial load. Use to optimize display for different screen sizes, match user preferences stored in your system, or improve performance on mobile devices.
routeCreateApprovalRule	function	No	Generates the URL for creating a new approval rule. Returns a URL string or performs navigation. Use to implement custom routing logic, add context parameters for rule creation, or integrate with your application’s routing system.
routeEditApprovalRule	function	No	Generates the URL for editing an approval rule. Receives the rule ID as a parameter. Returns a URL string or performs navigation. Use to implement custom routing logic, add context parameters, or integrate with your application’s routing system.
routeApprovalRuleDetails	function	No	Generates the URL for viewing approval rule details. Receives the rule ID as a parameter. Returns a URL string or performs navigation. Use to implement custom routing logic, add context parameters, or integrate with your application’s routing system.
setColumns	function	No	Transforms the default table column configuration. Receives default columns and returns modified columns. Use to show/hide columns based on user roles, reorder columns for better UX, or add custom column definitions with computed values or formatting.
setRowsData	function	No	Transforms or filters row data before rendering. Receives default rows and returns modified rows. Use to add computed fields, format data for display, filter rows based on business logic, or enrich data with external API calls.
className	string	No	Adds custom CSS classes to the container element. Use to override default styles, integrate with existing design systems, or apply conditional styling based on application state.
withHeader	boolean	No	Controls whether to render the container header section. Set to false when embedding the container within a layout that already provides its own header to avoid duplicate navigation elements.
withWrapper	boolean	No	Controls whether to wrap the container in a styled wrapper element. Set to false when integrating with existing design systems or when the container is embedded within another styled component that provides its own layout structure.
skeletonRowCount	number	No	Sets the number of skeleton loading rows to display while data is being fetched. Controls the visual feedback shown during data loading. Use to improve perceived performance and provide consistent layout during async operations.

• Magento_PurchaseOrderRule::view_approval_rules
• Magento_PurchaseOrderRule::manage_approval_rules

Integration example

Basic

import { ApprovalRulesList } from '@dropins/storefront-purchase-order/containers/ApprovalRulesList.js';
import { render as provider } from '@dropins/storefront-purchase-order/render.js';

await provider.render(ApprovalRulesList, {
  routeCreateApprovalRule: (id) => '/approval-rules/create',
  routeEditApprovalRule: (id) => `/approval-rules/edit?ruleRef=${id}`,
  routeApprovalRuleDetails: (id) => `/approval-rules/details?ruleRef=${id}`,
  withHeader: true,
  withWrapper: true,
})(element);

Custom Page Size

await provider.render(ApprovalRulesList, {
  routeCreateApprovalRule: (id) => '/approval-rules/create',
  routeEditApprovalRule: (id) => `/approval-rules/edit?ruleRef=${id}`,
  routeApprovalRuleDetails: (id) => `/approval-rules/details?ruleRef=${id}`,
  initialPageSize: [
    { text: '10', value: '10', selected: false },
    { text: '20', value: '20', selected: true },
    { text: '50', value: '50', selected: false },
  ],
})(element);

Configuration

Parameter	Type	Required	Description
initialPageSize	PageSizeListProps[]	No	Configuration for page size dropdown options. Customize available page sizes (e.g., 10, 20, 50 items per page) and set the default selected page size with selected: true. The default is typically 20 items per page.
routeCreateApprovalRule	(id: string) => string	No	Function that generates the URL for creating a new approval rule. Return the path to the create approval rule form page. The ID parameter allows for potential pre-filled data.
routeEditApprovalRule	(id: string) => string	No	Function that generates the URL for editing an approval rule. Return the path to the edit form with the rule ID in the URL. Used by the Edit action button in each table row.
routeApprovalRuleDetails	(id: string) => string	No	Function that generates the URL for viewing approval rule details. Return the path to the rule details page with the rule ID. Used by the View action button in each table row.
setColumns	(defaultColumns: Column[]) => Column[]	No	Function to customize table columns configuration. Use to reorder columns by returning a custom column array, hide specific columns by excluding them, or add custom columns for additional data.
setRowsData	(defaultRows: Row[]) => Row[]	No	Function to transform or enhance row data before display. Use to add calculated fields to each row, format or transform existing data, or inject custom properties for special rendering.
className	string	No	Additional CSS classes for custom styling. Apply custom layout or spacing adjustments, or add theme-specific styles.
withHeader	boolean	No	Shows or hides the section header. Use true (default) for a standalone rules list page. Use false when embedding in another component.
withWrapper	boolean	No	Wraps the table in a Card component. Use true (default) for standard page layout. Use false when embedding inside another card.
skeletonRowCount	number	No	Number of skeleton rows shown during loading. Use 5 (default) for a typical loading state. Increase for larger page sizes to match expected content.

Admin panel configuration

The Purchase Order (B2B) feature must be enabled at both the store and company levels:

• Store level: Stores > Settings > Configuration > General > B2B Features > Order Approval Configuration > Enable Purchase Orders
• Company level: Customers > Companies > Edit Company > Advanced Settings > Enable Purchase Orders