1281
Views
6
Comments
Solved
How to create a activate a modal/popup within a screen action

ENVIRONMENT

I am writing a traditional web app using OutSystems 11 on a windows 10 machine.

GOAL

In a web screen a user clicks a button, and in the button's screen action, the logic contains an if statement. When the IF statement evaluates to false, I want to have some sort of popup/modal/feedback message display a message to the user, and I am not sure what would be best to use. Here are some things I have tried:

1. I tried putting a Feedback Message in the 'false' path of the IF statement. This easily allows me to display a message, and is almost sufficient, but context remains in the web screen and I want to force the user to interact with the message before returning context to the web screen. Also, the size of the feedback message is small, and I would like to have a larger window display on the screen.

2. I have tried to implement a popup, but can't quite figure out how to do so. I have read a couple posts that give instructions, but hey are hard to follow. I think part of my problems implementing the popup is that the instructions I have found say to set a button method to navigate, and then set the destination to the web screen that represents the popup. I want to open the popup if an IF statement in a screen action evaluates to false, not when a button is clicked. 

3. I have tried reading about modals, but haven't been able to figure out how to implement them, or if I should be using them. It seems like a popup as a type of modal.

2025-08-22 10-19-44
Pramod Jain
 
MVP
Solution

Hi Ryan,

I have created a very simple example for you , please see attached. I have opened the model popup on button click action when the condition is true (you can open it in false condition) . Also kept a button on Model popup to take some action and make sure that user is interacting with the popup and closing it.


Regards,

-PJ-

ConditionalPopup.oml
UserImage.jpg
Ryan Rigby

One more question...Your attached example works beautifully. However, my application uses the SilkUIFramework, which also has a toggleModal screen action, but has no inputs to specify the modal id (TestModel.Id in your file). When I use the SilkUI toggleModal screen action, I see the following behavior:

1. The modal displays at the bottom of the screen

2. When I click on the screen (outside of the modal), the modal toggles off instead of keeping focus on the modal until the close button is pressed. 

When I use the OutsystemsUIWeb toggleModal screen action, the modal doesn't toggle on or off. Do you have any ideas why this unusual behavior is happening? Here is a screenshot showing the two toggleModal screen actions, and the portion of the screen action where I toggle on the modal.



Pramod Jain wrote:

Hi Ryan,

I have created a very simple example for you , please see attached. I have opened the model popup on button click action when the condition is true (you can open it in false condition) . Also kept a button on Model popup to take some action and make sure that user is interacting with the popup and closing it.


Regards,

-PJ-



2021-08-30 15-28-09
Leandro Correa

Hi Ryan,

Take a look at this documentation.


Regards,

Leandro.

2021-08-30 15-28-09
Leandro Correa

And this sample in the DepartmentDetail page.

PopUpSample.oap
2025-08-22 10-19-44
Pramod Jain
 
MVP
Solution

Hi Ryan,

I have created a very simple example for you , please see attached. I have opened the model popup on button click action when the condition is true (you can open it in false condition) . Also kept a button on Model popup to take some action and make sure that user is interacting with the popup and closing it.


Regards,

-PJ-

ConditionalPopup.oml
UserImage.jpg
Ryan Rigby

One more question...Your attached example works beautifully. However, my application uses the SilkUIFramework, which also has a toggleModal screen action, but has no inputs to specify the modal id (TestModel.Id in your file). When I use the SilkUI toggleModal screen action, I see the following behavior:

1. The modal displays at the bottom of the screen

2. When I click on the screen (outside of the modal), the modal toggles off instead of keeping focus on the modal until the close button is pressed. 

When I use the OutsystemsUIWeb toggleModal screen action, the modal doesn't toggle on or off. Do you have any ideas why this unusual behavior is happening? Here is a screenshot showing the two toggleModal screen actions, and the portion of the screen action where I toggle on the modal.



Pramod Jain wrote:

Hi Ryan,

I have created a very simple example for you , please see attached. I have opened the model popup on button click action when the condition is true (you can open it in false condition) . Also kept a button on Model popup to take some action and make sure that user is interacting with the popup and closing it.


Regards,

-PJ-



UserImage.jpg
Ryan Rigby

Thank you Leandro and Pramod! I appreciate both of your responses. 

For anyone reading this thread later, Leandro used a popup editor in his example and Pramod used a modal. I ultimately used a modal as was used in Pramod's post, so I marked Pramod's post as the solution, but both posts provide great examples. 

2021-08-30 15-28-09
Leandro Correa

You are welcome!

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.