POS Cart view events and handlers

Article
08/12/2022

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.

Share via