Is this a Mobile or Reactive Web app?

What's the code for the Focus client action look like?

Hi JC,

If I’m not mistaken, the screen is only rendered at the end of the flow or when there is something asynchronous happening, like a server action. A possible workaround there is to do a JavaScript with single $resolve() statement before setting the focus, not sure if that would work. Maybe that focus action should be changed to include that. 

Cheers,

Tiago Simões

Hi JC,

You have 2 options:

1- Using the autofocus extended attribute or

2- Use the $resolve() built-in function to trigger a render

Cheers,

Tiago Simões

Hi Tiago,

Not sure if it is just mine but the images doesn't load?

Thanks,

JC

Hi JC,

Maybe try with a different browser?
option 1 - add a “autofocus” attribute to the inputs with the value True or

option 2 - on the JavaScript add a “$resolve();” line before the line to set the focus

Hi Tiago,

The $resolve(); worked.

Question is, can I add this safely on my reusable focus JS?

Regards,

JC

Yes, that will make your JavaScript generated code to be compiled with promises and it will render the screen immediately when the data changes. 

The only downside is that if you use $resolve() you will not be able to use that inside functions, but I'm provably there will be no use cases to set the focus inside a function.

Well the only use case I have is this:

Edit: I removed it eventually. When I did it, OutSystems complained with my OnReady events that calls the Focus action:

Performance Suggestion
'OnReady_FocusInput' contains accesses to the local storage or server, which delays the screen's render. To avoid performance issues, use Aggregates or Data Actions instead.

Hi Juan Carlos,

You can safely ignore those warnings in the OnReady. 

Accesses to server on the in OnInitialize delay the render, the ones in OnReady do not. That warning was there also to teach developers transitioning from Traditional Web not to abuse these events to be used like Preparations. But that one about OnReady we'll probably remove it in the future.

Cheers,
Tiago Simões

Hi Juan,

Alternatively you can encapsulate the $ready() on a separate client action (e.g. called RenderScreenImmediatly) and only call that in client actions that do not call the server and you need to trigger a render before the end of the action. On the OnReady you would not need to call that action.

Cheers,
Tiago Simões

Here's my problem. Every time I type a single character in the input field the input losses focus.
I created an onChange client action with input of the InputId.

setTimeout(function(){

    document.getElementById($parameters.InputId).focus();

}, 100);