Changing input focus to another field

Changing input focus to another field

  
I have a drop down for dates (e.g. Today, Tomorrow, None, Custom). When the user selects "Custom", I want to shift input focus to the date field next to it for the user to enter a date. Can someone please show me how to do that? Thanks!
Gerald Seidl wrote:
I have a drop down for dates (e.g. Today, Tomorrow, None, Custom). When the user selects "Custom", I want to shift input focus to the date field next to it for the user to enter a date. Can someone please show me how to do that? Thanks!
 
 Hi Gerald,

See attached a sample, using a built-in ajax pattern (you may need to use www.outsystems.com/ipp if you want to publish it). In short:
  • notice the On Change / Destination property in the combo box;
  • notice the Name and Visible properties in the text input;
  • in the OnDateComboChange screen action, the text input is refreshed and we focus input to the text input (using the RunJavaScript action from the HTTPRefreshHandler extension).

As an alternative solution, you may use only client-side scripting for avoiding performing an ajax call. For this, you would use the extended properties in the combobox (onchange event) to execute the necessary javascript for showing/hiding and shifting focus to the text field. You'll need some javascript knowledge for this - check http://www.javascriptkit.com/jsref/select.shtml for more info.
wrote:
 
 Hi Gerald,

See attached a sample, using a built-in ajax pattern (you may need to use www.outsystems.com/ipp if you want to publish it). In short:
  • notice the On Change / Destination property in the combo box;
  • notice the Name and Visible properties in the text input;
  • in the OnDateComboChange screen action, the text input is refreshed and we focus input to the text input (using the RunJavaScript action from the HTTPRefreshHandler extension).

As an alternative solution, you may use only client-side scripting for avoiding performing an ajax call. For this, you would use the extended properties in the combobox (onchange event) to execute the necessary javascript for showing/hiding and shifting focus to the text field. You'll need some javascript knowledge for this - check http://www.javascriptkit.com/jsref/select.shtml for more info.
 
 Thanks very much Paulo. Do you think it's also possible to highlight the field/contents of the field, or drop down the calendar associated with it?
Gerald Seidl wrote:
 
 Thanks very much Paulo. Do you think it's also possible to highlight the field/contents of the field, or drop down the calendar associated with it?

 Hi,

Do you mean the Ajax Refresh highlighting animation effect? It won't affect the input that much, but you can use it in a container including the field, for example.

For dropping the calendar when the user clicks on the text input, see the updated attached sample.

You may also want to explore the FlatStyle property of the calendar, it may be useful if you want to display the calendar inline, instead of waiting for the user to click on the text field.
wrote:

 Hi,

Do you mean the Ajax Refresh highlighting animation effect? It won't affect the input that much, but you can use it in a container including the field, for example.

For dropping the calendar when the user clicks on the text input, see the updated attached sample.

You may also want to explore the FlatStyle property of the calendar, it may be useful if you want to display the calendar inline, instead of waiting for the user to click on the text field.
 
 Thanks again Paulo. How would I do the highlighting effect?
Gerald Seidl wrote:
 
 Thanks again Paulo. How would I do the highlighting effect?
 
The animation effect is a property on the Ajax Refresh node (in the OnDateComboChange screen action).

It looks better on some HTML elements than others, so feel free to apply it to different widgets (ex: containers, tables...). Extra tip: if you can't select your widget in the Ajax Refresh, that's probably because you didn't set the Name property in the widget.