Hi Tulip Community,
I created a custom widget that helps me get around the ‘setFocus’ issue that I have seen some discussion on within the community board. It also solves an issue and use case I see as being helpful.
Widget name is : Tab past Input Label to Input field Widget (v2)
Essentially, this is a widget that includes a label field and a Text input box, but when the user uses the [TAB] key to enter into it, it skips over leaving the focus on the label field and puts the focus right on the input text control. A very real use case I see for this is in a discrete manufacturing operation where the operator is required to scan in several parts(part number or serial number) in sequence, into a list of parts along with their labeled names, on a workcenter or Tulip App.
Using a barcode scanner, with it configured to append a [TAB] key after each scan allows for the user to easily more from input field to next input field without having to ‘tab’ through text fields.
Pretty simple widget actually.
I use the jQuery library.
I’ve defined it with 3 Props:
Prop1: ‘Enter Label’ – input only value specified from App to be the ‘label’ field of the widget
Prop2: ‘Outputfromtextbox’ – input/output value for what user actually enters in textbox
Prop3: ‘InputWidth’ – input only value for width, in px, of input text box
I’ve also defined 3 Events for this widget:
Event1: ‘NewValueInActual’ – gets fired whenever an onchange event happens on the input textbox
Event2: ‘keypress’ – not actually used yet but was playing with an event to fire on every keypress, mostly to work in conjunction with the proposed purpose of Event3.
Event3: ‘returnPressed’ – I was trying to figure out a way to simulate, or generate, a [TAB] key press when the user pressed the ‘[ENTER]’ key. Was never entirely successful in this. Not actually used either
Some of the javascript code, specifically the ‘focusNextElement’ was also some, unsuccessful, attempt to simulate a [TAB] key press when ‘[ENTER]’ was pressed, to automatically skip to next widget.
I have another version, which I will be putting out here shortly, where I put the label field above the input textbox.
Please feel free to enhance and improve upon this basic widget.
customWidget-Tab past Input Label to Input field Widget (v2).json (5.5 KB)
Thanks,
William
@wkurth4008