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.

Hi Ryan,

Take a look at this documentation.


Regards,

Leandro.

And this sample in the DepartmentDetail page.

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-

Solution

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. 

You are welcome!

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-