Clear searchbox (textbox text) after query

Question

Using HTML Lightswitch

The application I'm working on is for our inventory team to scan barcode's off devices. I have a Browse screen with a local string property used as my search box (textbox) that's binded to a query. This search box is where a barcode scanner inputs the text. The barcode scanner we use automatically presses 'Enter' after the text has been entered. This causes the binded local property to execute the query. I'm then displaying the results on screen as visual validation for the user. At this point, the scanned text is still in the search box. I would like to clear the searchbox text OR highlight the text so my users can scan the next device without interacting with the computers mouse/keyboard/touchscreen.

Ideal workflow for user:

1. Scan barcode
2. Visually validate returned results
3. Scan barcode again

Updated above post.

Answer 1

Probably the simplest way of tackling this is to add two local barcode string properties to your screen.

One of these two local properties would be bound to the query's parameter but not placed on the screen (Barcode_Parameter).

The other local property would simply be placed on the screen as a TextBox (Barcode) as shown in the following screen-shot:

You would then implement code along the following lines in the postRender of the TextBox:

myapp.ScanDevice.Barcode_postRender = function (element, contentItem) {
    var screen = contentItem.screen;
    contentItem.dataBind("value", function (value) {
        if (value) {
            screen.setBarcode_Parameter(value);
            screen.setBarcode("");
        }
    });
};

This code will only update the local property that is bound to the query parameter (Barcode_Parameter) when a string is supplied and at the same point will clear the local property bound to the TextBox on the screen (Barcode).

The following shows the cursor placed on the cleared TextBox after the string 123456 has been entered and followed by a carriage return: