POS Cart view events and handlers
This article explains how extensions can consume the point of sale (POS) view events and handlers for custom scenarios. For example, the Cart view in POS exposes multiple events and handlers so that your extensions can perform custom business flows, based on events. The extensions can subscribe to an event and receive a notification when that event occurs.
Cart view event handlers
The base class that is used to consume the Cart view handlers is CartExtensionViewControllerBase.
export default class CartViewController extends CartView.CartExtensionViewControllerBase {
}
Base class | Event/handler | Description |
---|---|---|
CartExtensionViewControllerBase | cartLineSelectedHandler: (data: CartLineSelectedData) => void; | The handler for the message that appears when a cart line is selected. |
cartLineSelectionClearedHandler: () => void; | The handler for the message that appears when the selection of a cart line is cleared. | |
tenderLineSelectedHandler: (data: TenderLineSelectedData) => void; | The handler for the message that appears when a tender line is selected. | |
protected tenderLineSelectionClearedHandler: () => void; | The handler for the message that appears when the selection of a tender line is cleared. | |
protected cartChangedHandler: (data: CartChangedData) => void; | The handler for the message that appears when the cart is changed. | |
protected processingAddItemOrCustomerChangedHandler: (processing: boolean) => void; | The handler that adds the message about the item or customer processing state. | |
protected setSelectedCartLines(setSelectedCartLinesData: SetSelectedCartLinesData): void; | The handler that selects the cart lines that are shown on the page. |
The following example shows how to consume Cart view events.
import { ProxyEntities } from "PosApi/Entities";
import { IExtensionCartViewControllerContext } from "PosApi/Extend/Views/CartView";
import * as CartView from "PosApi/Extend/Views/CartView";
import { ArrayExtensions, StringExtensions } from "PosApi/TypeExtensions";
export default class CartViewController extends CartView.CartExtensionViewControllerBase {
public static selectedCartLineId: string = StringExtensions.EMPTY;
private _selectedCartLines: ProxyEntities.CartLine[];
private _selectedTenderLines: ProxyEntities.TenderLine[];
private _isProcessingAddItemOrCustomer: boolean;
/**
* Creates a new instance of the CartViewController class.
* @param {IExtensionCartViewControllerContext} context The events Handler context.
* @remarks The events handler context contains APIs through which a handler can communicate with POS.
*/
constructor(context: IExtensionCartViewControllerContext) {
super(context);
this.cartLineSelectedHandler = (data: CartView.CartLineSelectedData): void => {
this._selectedCartLines = data.cartLines;
if (ArrayExtensions.hasElements(this._selectedCartLines)) {
CartViewController.selectedCartLineId = this._selectedCartLines[0].LineId;
}
};
this.cartLineSelectionClearedHandler = (): void => {
this._selectedCartLines = undefined;
CartViewController.selectedCartLineId = null;
};
this.tenderLineSelectedHandler = (data: CartView.TenderLineSelectedData): void => {
this._selectedTenderLines = data.tenderLines;
};
this.tenderLineSelectionClearedHandler = (): void => {
this._selectedCartLines = undefined;
};
this.processingAddItemOrCustomerChangedHandler = (processing: boolean): void => {
this._isProcessingAddItemOrCustomer = processing;
};
}
}
Base classes for consuming Cart view events in Cart view UI extensions
There are several base classes for consuming events in the user interface (UI):
- Custom controls
- Custom fields in the Totals pane
- Custom columns in the Lines grid
- Custom columns in the Payment grid
- Custom columns in the Delivery grid
Custom controls
Base class | Event | Description |
---|---|---|
CartViewCustomControlBase | cartLineSelectedHandler: (data: CartLineSelectedData) => void; | The handler for the message that appears when a cart line is selected. |
cartLineSelectionClearedHandler: () => void; | The handler for the message that appears when the selection of a cart line is cleared. | |
tenderLineSelectedHandler: (data: TenderLineSelectedData) => void; | The handler for the message that appears when a tender line is selected. | |
protected tenderLineSelectionClearedHandler: () => void; | The handler for the message that appears when the selection of a tender line is cleared. | |
protected cartChangedHandler: (data: CartChangedData) => void; | The handler for the message that appears when the cart is changed. | |
protected processingAddItemOrCustomerChangedHandler: (processing: boolean) => void; | The handler that adds the message about the item or customer processing state. | |
protected setSelectedCartLines(setSelectedCartLinesData: SetSelectedCartLinesData): void; | The handler that selects the cart lines that are shown on the page. |
Custom fields in the Totals pane
Base class | Event | Description |
---|---|---|
CartViewTotalsPanelCustomFieldBase | public computeValue(cart: ProxyEntities.Cart): string { } | Compute the value for the custom field. |
Custom columns in the Lines grid
Base class | Event | Description |
---|---|---|
CustomLinesGridColumnBase | public title(): string { } | Set the title for the custom column. |
public computeValue(cartLine: ProxyEntities.CartLine): string {} | Compute the value for the custom column. | |
public alignment(): CustomGridColumnAlignment { } Supported values: enum CustomGridColumnAlignment { Left = 0, Right = 1 } |
Set left or right alignment for the custom column. |
Custom columns in the Payment grid
Base class | Event | Description |
---|---|---|
CustomPaymentsGridColumnBase | public title(): string { } | Set the title for the custom column. |
public computeValue(cartLine: ProxyEntities.CartLine): string { } | Compute the value for the custom column. | |
public alignment(): CustomGridColumnAlignment { } Supported values: enum CustomGridColumnAlignment { Left = 0, Right = 1 } |
Set left or right alignment for the custom column. |
Custom columns in the Delivery grid
Base class | Event | Description |
---|---|---|
CustomDeliveryGridColumnBase | public title(): string { } | Set the title for the custom column. |
public computeValue(cartLine: ProxyEntities.CartLine): string { } | Compute the value for the custom column. | |
public alignment(): CustomGridColumnAlignment { } Supported values: enum CustomGridColumnAlignment { Left = 0, Right = 1 } |
Set left or right alignment for the custom column. |
Feedback
https://aka.ms/ContentUserFeedback.
Coming soon: Throughout 2024 we will be phasing out GitHub Issues as the feedback mechanism for content and replacing it with a new feedback system. For more information see:Submit and view feedback for