NumPad support with CustomViewControllerBase

[ax365]

Extensibility request:

Provide support for adding NumPad and INumPadInputBroker to custom pos -views- that extend from CustomViewControllerBase. Similar to how custom pos -dialogs- extend from ExtensionTemplatedDialogBase and thus get the NumPad and INumPadInputBroker brokers “for free” (without requiring extension code to initialize it).

---

Context:

In the legacy RetailSDK, when creating custom views, we extended the ExtensionViewControllerBase abstract class. With the introduction of the CommerceSDK, ExtensionViewControllerBase is now deprecated.

This deprecated abstract class ExtensionViewControllerBase had some useful properties:

• Ability to embed an OOTB NumPad to a custom view
• An OOTB instance of INumPadInputBroker inherited from implementing INumPadContainer which allowed the NumPad to intercept keyboard (or scanner) input

With the new CommerceSDK, the requirement is to extend CustomViewControllerBase abstract class instead.

• We no longer have the ability to add an OOTB NumPad (with OOTB INumPadInputBroker) to a custom view.

---

The official sample extension on GitHub for the InStore.BarcodeMsrDialogSample utilizes IAlphanumericNumPad but this is for a -dialog- (not a -view-).

• The dialog class in the BarcodeMsrDialogSample is called BarcodeMsrDialog.ts
• It extends from ExtensionTemplatedDialogBase which provides the implementation of an input broker "for free" (no need for the extension code to initialize it)
• This functionality is not available for custom pos views though

---

As a potential workaround, I've attempted the following:

Implement INumPadInputSubscriberEndpoint:

Instantiate the broker from the subscriber:

Initialize options and bind the NumPad:

---

The workaround described above allows the NumPad to render on the custom view. But it's still not behaving fully as intended.

Below describes the main issue:

The screenshot below has been taken immediately upon loading of the custom view. And I’m typing on the keyboard but none of the digits are rendering on the NumPad (it doesn’t recognize it).

Because of that, as a test, I decided to click the NumPad “input bar” – you can see the dotted lines:

Now when I enter keyboard input, the digits show up:

^ If I “click out” of the input bar (no more dotted lines) – then it goes back to the first screenshot behaviour (it does not recognize/update keyboard input).

---

[lukedgr]

Hi ax365, thank you for providing all of details and screenshots. I see that the CustomViewController implements the INumPadInputSubscriberEndpoint interface by declaring the implementsINumPadInputSubscriberEndpoint field. Can you please confirm that this field is initialized and set to true in the view's constructor? I did not see that initialization in the code snippets provided. Thanks!

[ax365]

Thank you lukedgr,

Initializing implementsINumPadInputSubscriberEndpoint in the constructor has now resolved this issue. Now upon loading of the custom view, the NumPad will immediately respond to keyboard input.

[ax365]

Hi @lukedgr,

Two follow-up questions related to this:

• Do we have access to only a numeric NumPad? I'm currently implementing a payment screen and don't want the option for letters:

  

---

• Inside Pos.Controls.js, I found this property clearOnEnter. Are we able to specify this as false somehow? I also tried to return a Promise.reject() inside the NumPad callback method. But it still doesn't prevent the framework from clearing out the value upon clicking enter.