308
Views
5
Comments
Solved
[OutSystems UI] SetFocus client action
outsystems-ui
Reactive icon
Forge asset by OutSystems
Application Type
Reactive
Service Studio Version
11.53.43 (Build 62091)

I'm trying to use the SetFocus action in a "Next" button click action that takes a user between Step 1 and Step 2 of a Wizard. 

On click, I want the page to scroll up to the top, so I have the OnFocus destination set to the BehalfEmployeeSearchWidget (which is a persistent element at the top right of the screen regardless of which step you're on in the Wizard):


Here's how I configured the SetFocus action (note that the action comes after all the validations, so the action is executing when I load the next wizard step):


It is still not behaving as expected; focus is remaining on the buttons at the bottom of the page. You can see this in the attached video. Is anything misconfigured? Does SetFocus action work differently than I expect it to? 

(Sorry - cannot attach .OML because of company proprietary info.)





Screen Recording 2023-03-15 at 2.48.27 PM.mov
2023-04-16 15-25-31
Krishnanand Pathak
Solution

Hi @Mylah de la Rosa,


As I understand, you want set focus and scoll to that element(which is placed at top of screen)  when button(which is placed at bottom of screen)  clicked.
If yes, then use ScrollToElement with SetFocus by passing the same element WidgetId for both.


Use it as shown belowSharing the oml for reference.

Regards
Krishnanand Pathak

ScrollToElement.oml
UserImage.jpg
flowcooker

Thank you. This did the trick! 

2023-04-16 15-25-31
Krishnanand Pathak
2023-08-28 07-00-10
Paulo Torres
Champion

Hello,

You are expecting from the Focus to scroll your page?

The Focus is to Focus your input fields, make the same as if you click in the input field.

UserImage.jpg
flowcooker

You're right. I expected SetFocus to also scroll to that element. 

I used @Krishnanand Pathak 's solution to use the Scroll To Element. 

As an aside, if I understand you correctly, the SetFocus action will place the mouse cursor in the destination widget as though you clicked in it.  Since the destination widget in my case was a dropdown search pattern, it visibly doesn't appear to do anything to indicate focus was set to that field. It may be because of the widget type. 

I am removing the SetFocus action altogether and just using the Scroll To Element action.

Thanks for responding! 


2023-04-16 15-25-31
Krishnanand Pathak
Solution

Hi @Mylah de la Rosa,


As I understand, you want set focus and scoll to that element(which is placed at top of screen)  when button(which is placed at bottom of screen)  clicked.
If yes, then use ScrollToElement with SetFocus by passing the same element WidgetId for both.


Use it as shown belowSharing the oml for reference.

Regards
Krishnanand Pathak

ScrollToElement.oml
UserImage.jpg
flowcooker

Thank you. This did the trick! 

2023-04-16 15-25-31
Krishnanand Pathak
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.