Programming Lookup and Numpad controls for LS Central Web POS

If you’ve been used to working with LS Central Windows POS you my find a bit of a surprise when upgrading your existing solution or programming lookups and numpads for LS Central Web POS

Programming lookups and numpads for LS Central Web POS

LS have implemented the POS user interface with client add-in components embedded within a Business Central page.

The fundamental difference between the Web and Windows POS is in the interaction between Business Central and the LS client add-in components:

• LS Windows POS – Uses .NET add-in components which behave synchronously.
• LS Web POS – Uses JavaScript client add-in components which behave asynchronously.

So what does this mean for my AL code?

Synchronous behavior means you can invoke the Numpad or Lookup control and get the result as a return value. Nice and simple in terms of AL code:

if OpenNumericKeyboard(DepositTxt, '', ValueTxt, false) then
  Evaluate(Amount, ValueTxt);

With the LS Web POS, the asynchronous behavior of the JavaScript add-in components requires a bit more work; You must first invoke the control, then wait for an event which will contain the result.

The event you need to subscribe to will vary depending on the control you’ll be using, but you’ll find the relevant events in Codeunit “EPOS Controler” (LS spelling, not mine!), for example:

• OnKeyboardResult
• OnLookupResult
• OnNumpadResult

OK, so lets look at an example.

Programming a Numpad control

So the steps are as follows:

• Open the numeric keyboard control
• Subscribe to the OnNumpadResult event to get response
• Process the response, if the result is for you

Open the NumericKeyboard

To invoke the number pad control we use the OpenNumericKeyboardEx() procedure from Codeunit 10012732 “EPOS Control Interface HTML”, which has the following parameters:

• Caption: The title of the number pad control. Should be instructional to the user.
• DefaultValue: If required, you can pre-populate the value on the popup using this parameter.. or leave blank
• Result: Not used
• payload: An identifier we can use when deciding if to handle the OnNumpadResult() event, for instance we could use the POS Command code.

    local procedure RecordFootfall()
    var
        EPOSControl: Codeunit "EPOS Control Interface HTML";
        EnterFootfallLbl: Label 'Enter store footfall';
        Result: Action;
    begin
        EPOSControl.OpenNumericKeyboardEx(EnterFootfallLbl, '', Result, RecordFootfallCommand());
    end;

Subscribe to the OnNumPadResult() event

Once we’ve opened the numeric keyboard control, well need to wait to pick up the result via an event. We subscribe to the OnNumpadResult() event in Codeunit 10012718 “EPOS Controler”, and test the raised event is the one we’re interested in using the payload parameter:

    [EventSubscriber(ObjectType::Codeunit, Codeunit::"EPOS Controler", 'OnNumpadResult', '', false, false)]
    local procedure OnNumpadResult(payload: Text; inputValue: Text; resultOK: Boolean; VAR processed: Boolean)
    begin
        case payload of
            RecordFootfallCommand():
                HandleFootfall(inputValue, resultOK, processed);
        end;
    end;

Process the result

The processed parameter needs to be set to true to stop LS from trying to continue and process this result. It will actually error in our case as at some point it will try and evaluate the payload to an integer.. in usual LS error handling finesse…

We can use the resultOK parameter to check if the user pressed the OK button. As the return value is a Text variable we’ll have to evaluate this to a Decimal to get the format we require.

    local procedure HandleFootfall(FootfallAmountTxt: Text; ResultOk: Boolean; var Processed: Boolean)
    var
        Footfall: Decimal;
        DataTypeErr: Label 'Footfall amount must be a decimal value.';
    begin
        Processed := true;
        if not ResultOk then
            exit;
        if FootfallAmountTxt = '' then
            exit;
        if not Evaluate(Footfall, FootfallAmountTxt) then
            error(DataTypeErr);
    end;