Dual Display Extanstion Issue in Store Commerce App

[awkaft]

Environment Information:

• We are using D365 ERP and Store commence app for our departmental store chain in Pakistan.
• We have recently upgraded to D365 from AX 2012 R3.
• In D365, we have configured dual display in store commence app for all cash terminals.
• Approx. count of items in single sale transaction is min (20 Items) max (160 items).
• Default item focus configuration setting for dual display is 5 but we have set it on 20.
• Our current D365 Version is given below
Installed product version : 10.0.38 (10.0.1777.115)
Installed platform version : Update62 (7.0.7120.116)

Problem Statement:

• Customers standing Infront of dual display screen are currently unable to view last scanned item which is scanned by the cashier in Store Commence app during sale transaction.
• On Customer screen, dual display show only top 17 items and auto scroll/ auto focus functionality is not working, due to which our customers are unable to view all purchased items and their price.
• In Store commerce app, when cashier scroll up to void any specific item then dual display screen is not displaying the voided line which is recently voided by cashier.
• We are facing this issue on all dual display screen.

Please see below screen shots


This is really embarrassing situation for our store staff and we are unable to justify walking customers that dual display screen in D365 cannot set auto focus on items
Resolve above stated issue as soon as possible because our customers on all stores are unable to view list of all scanned items and prices they purchased at store.

Feel free to let us know if you need further information is required from our side.

[zhangguanghuib]

Can you please try if this code works for you:

It may has limitation only be triggered whenever cart changes, when scroll cart line on the main POS screen, the dual display cartline data line will not scroll to match the main POS screen.

[zhangguanghuib]

@awkaft can you please try this possible solution and let me know if it works?

Step 1: add CartViewController to track which cartlines are selected:
https://github.com/zhangguanghuib/NewCommerceSDK/blob/main/POS_Samples/Solutions/DualDisplaySample/Pos/ViewExtensions/Cart/CartViewController.ts

Step 2: In Dual Display, whenever cart changes, it will scroll to the cartlines to match the main POS screen:

https://github.com/zhangguanghuib/NewCommerceSDK/blob/main/POS_Samples/Solutions/DualDisplaySample/Pos/CustomControl/DualDisplayCustomControl.ts

[awkaft]

hi @zhangguanghuib did not resolve the issue.

[awkaft]

still facing same issue.

[zhangguanghuib]

@awkaft can you mark this question answered?

[shaheen8]

Used the code suggested by @zhangguanghuib

Issue still persists - I debugged a bit and noticed that the standard call to CartChangedHandler is failing

My code is using the instance to scroll the scrollbar in the dual display to the last item

I suspect the CARTCHANGEDDATA is not loading

this.cartChangedHandler = (data: CartChangedData) => {
this._cart(data.cart);
let currentCartLineId: string = localStorage.getItem("currentCartLineId");
let isNewLine: boolean = !StringExtensions.isEmptyOrWhitespace(currentCartLineId) && this._dataList.data.filter(line => line.LineId === currentCartLineId).length > 0 ? false : true;
this._dataList.data = ObjectExtensions.isNullOrUndefined(data.cart) ? [] : data.cart.CartLines;

        // Find the line height
        let listLine: HTMLDivElement = document.querySelector(".dataListLine") as HTMLDivElement;
        let rowHeight = 39;
        if (listLine?.clientHeight) {
            rowHeight = listLine?.clientHeight;
        } 
        // If a new line is adding
        if (data.cart && data.cart.CartLines.length > 0 && !StringExtensions.isEmptyOrWhitespace(currentCartLineId)) {
            //Find the current cart line:
            this.currentCartLine(this._dataList.data.filter(line => line.LineId === currentCartLineId)[0]);

            if (isNewLine) {
                if (!StringExtensions.isEmptyOrWhitespace(currentCartLineId)) {
                    if (data.cart.CartLines.length >= 16) {
                        setTimeout(() => {
                            let dualDisplayScrollingContainer: HTMLDivElement = document.querySelector('[aria-label="Scrolling Container"]') as HTMLDivElement;
                            let totalHeight: number = dualDisplayScrollingContainer.scrollHeight;
                            let shouldScrollTop = totalHeight - rowHeight * 15;
                            // dualDisplayScrollingContainer.scrollTop = shouldScrollTop;
                            dualDisplayScrollingContainer.scrollTo({
                                top: shouldScrollTop, // Replace with the position you want to scroll to
                                behavior: 'smooth'
                            });
                        }, 700);
                    }
                }
            }
            else {//Update existing line
                setTimeout(() => {
                    let selectedIndex = ArrayExtensions.findIndex(data.cart.CartLines, (cartline: ProxyEntities.CartLine) => cartline.LineId === currentCartLineId);
                    let dualDisplayScrollingContainer: HTMLDivElement = document.querySelector('[aria-label="Scrolling Container"]') as HTMLDivElement;
                    let shouldScrollTop = rowHeight * selectedIndex;
                    // dualDisplayScrollingContainer.scrollTop = shouldScrollTop;
                    dualDisplayScrollingContainer.scrollTo({
                        top: shouldScrollTop,
                        behavior: 'smooth'
                    });
                }, 700);
            }
        } else {
            this.currentCartLine(null);
        }
    };