Skip to main content

This content is closed to future replies and is no longer being maintained or updated.
Links may no longer function. If you have a similar request, please write a new post.

Question

 Miguel Angel Calderon Bravo (Miguel Calderon)
Plexus Tech
Senior System Architect (CSSA)
Plexus Tech
ES
Miguel Calderon Member since 2018 13 posts
Plexus Tech
Posted: Nov 4, 2019
Last activity: Nov 6, 2019
Posted: 4 Nov 2019 4:09 EST
Last activity: 6 Nov 2019 4:05 EST
Closed
Solved

User Interface Modal Dialog: I can't get the focus to go to the top Page

On my screen that I show as a modal dialog that has vertical scroll, I have a button at the bottom that performs some validations and the error message is displayed at the top of the screen, but the error message don't see because the focus stays at the bottom and no scrolling up.

I have tried the suggestions of the following 2 links:

https://collaborate.pega.com/question/set-focus-top-page
https://collaborate.pega.com/question/how-focus-top-page-screen

but it do not works, ¿may these suggestions not work because my screen is a modal dialogue?

ANY assistance would be greatly appreciated.

thnks u.

To see attachments, please log in.
User Experience

Accepted Solution

Posted: 5 years ago
Posted: 6 Nov 2019 3:33 EST
Miguel Angel Calderon Bravo (Miguel Calderon)
Plexus Tech
Senior System Architect (CSSA)
Plexus Tech
ES
Expected performance achieved.
 
Krithiga_GCS your solution was partly valid. It was necessary to set the order of execution of the actions on the submit button.
This is the order of execution of the button's actions:
  1. Run Activity 
  2. Set Focus 
  3. Refresh - This section 
  4. Close (the window that is a modal dialog)
 
 
Right solution: 
 
  1.  Placing a Dynamic layout on top of screen with a dummy input inside --associate the dummy input to a property--
  2. Hide that Dynamic layout using a css custom-class with the attributes: opacity: 0 !important; min-height: 0 !important; height:0 !important;
  3.  Add the following actions in submit button: 
    1. Run Activity
    2. Set Focus --to the dummy input hidden--
    3. Refresh - This section 
    4. Close (the window that is a modal dialog)

 

thank all for the help provided.
best regards.

To see attachments, please log in.
Posted: 5 years ago
Posted: 4 Nov 2019 5:18 EST
Miguel Angel Calderon Bravo (Miguel Calderon)
Plexus Tech
Senior System Architect (CSSA)
Plexus Tech
ES

Hi vaspoz, 


yes, I refresh the section so that the error message appears but does not display the top screen position.

I've also tried the javaScript "scrollToElement" to scroll to an element at the top of the screen that has a specific css class, but it doesn't work either.
 

thnks for your answer.

To see attachments, please log in.
Posted: 5 years ago
Posted: 4 Nov 2019 10:42 EST
Krithigassree Sambamurthy (Krithiga_GCS)
Pegasystems Inc.
Senior Software Solutions Engineer
Pegasystems Inc.
US

Hi Miguel,

Could you try placing a "dummy" input element on top of your screen -- associate it to a property and place focus on it explicitly by using the "SetFocus" functionality ? We can try to add a css class to hide it later if it works. 

I will also set up a sample locally to check if that'll help.

To see attachments, please log in.
Posted: 5 years ago
Posted: 5 Nov 2019 3:50 EST
Miguel Angel Calderon Bravo (Miguel Calderon)
Plexus Tech
Senior System Architect (CSSA)
Plexus Tech
ES

Hi Krithiga_GCS,
thank for your answer.

Your example doesn't work either.
Attached 2 captures with the "dummy" input on top configuration associated with a property and the "set focus" function in the button submit.
Also attached 1 gif with the Test.

I think it doesn't work because it's a Modal Dialog or by the RefreshThisSection that focuses on the submit button. Could it be this?

Do you know of any solution for the Section type Modal Dialog?

To see attachments, please log in.

Accepted Solution

Posted: 5 years ago
Posted: 6 Nov 2019 3:33 EST
Miguel Angel Calderon Bravo (Miguel Calderon)
Plexus Tech
Senior System Architect (CSSA)
Plexus Tech
ES
Expected performance achieved.
 
Krithiga_GCS your solution was partly valid. It was necessary to set the order of execution of the actions on the submit button.
This is the order of execution of the button's actions:
  1. Run Activity 
  2. Set Focus 
  3. Refresh - This section 
  4. Close (the window that is a modal dialog)
 
 
Right solution: 
 
  1.  Placing a Dynamic layout on top of screen with a dummy input inside --associate the dummy input to a property--
  2. Hide that Dynamic layout using a css custom-class with the attributes: opacity: 0 !important; min-height: 0 !important; height:0 !important;
  3.  Add the following actions in submit button: 
    1. Run Activity
    2. Set Focus --to the dummy input hidden--
    3. Refresh - This section 
    4. Close (the window that is a modal dialog)

 

thank all for the help provided.
best regards.

To see attachments, please log in.

We'd prefer it if you saw us at our best.

Pega Collaboration Center has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice