3468
Views
5
Comments
Solved
How to create a modal for Web Screen

Hi Experts,


How can i create a modal using a Web Screen.


Thanks and Best Regards.

2021-03-02 19-14-35
Miguel Oliveira
Solution

Hi joshua aquino,


1. You need to drag the modal widget to your webscreen and give it a name.

2. Create a button to open the modal and a Icon or a expression inside the modal to close it.

3. Create a screen action "OpenOrClose" and inside drag the toggle modal widget and pass the name your your Modal.Id

4. Assign the destination to the button and the expression in your modal to your OpenOrClose screen action

5. dont forget also to put to the button and expression the method Ajax submit

Image 1 


Image 2-  OpenOrClose ScreenAction


Thanks


UserImage.jpg
Ryan Rigby

These instructions are very nicely written. Thanks for providing them. I have a sample .oml file that implements a modal this way and it works great. However, in the actual application I am writing, I am required to use the SilkUIFramework, and it causes some weird behavior. The SilkUI togglemodal action doesn't take any inputs, so if I have more than 1 modal, I can't specify which one to use. It also displays the modal at the bottom of the screen and if I click outside of the modal, the modal is toggled off and focus returns to the original web screen from which the modal was opened. If I instead use the OutSystemsUIWeb togglemodal action, the modal won't toggle on or off. Do you have any ideas why this may be happening?

Miguel Oliveira wrote:

Hi joshua aquino,


1. You need to drag the modal widget to your webscreen and give it a name.

2. Create a button to open the modal and a Icon or a expression inside the modal to close it.

3. Create a screen action "OpenOrClose" and inside drag the toggle modal widget and pass the name your your Modal.Id

4. Assign the destination to the button and the expression in your modal to your OpenOrClose screen action

5. dont forget also to put to the button and expression the method Ajax submit

Image 1 


Image 2-  OpenOrClose ScreenAction


Thanks




UserImage.jpg
Raphael Jones

Is the modal widget available for free? I've look around the modules in OutsystemsUI and can find ToggleModal but not the actual Modal widget. How can I get it?

2019-05-22 11-30-09
Marcelo Ferreira

Hi Joshua,

Can you explain better what are you trying to accomplish?

Models can be included in web screens but inside it you can only use screen elements for example Inputs, forms, webblocks.

Regards,

Marcelo

UserImage.jpg
Jay-jay

Marcelo Ferreira wrote:

Hi Joshua,

Can you explain better what are you trying to accomplish?

Models can be included in web screens but inside it you can only use screen elements for example Inputs, forms, webblocks.

Regards,

Marcelo

Hi Marcelo,


Thanks for the reply.

i have found that pop up modal is what i need instead of modal.


Thanks and Best Regards


2021-03-02 19-14-35
Miguel Oliveira
Solution

Hi joshua aquino,


1. You need to drag the modal widget to your webscreen and give it a name.

2. Create a button to open the modal and a Icon or a expression inside the modal to close it.

3. Create a screen action "OpenOrClose" and inside drag the toggle modal widget and pass the name your your Modal.Id

4. Assign the destination to the button and the expression in your modal to your OpenOrClose screen action

5. dont forget also to put to the button and expression the method Ajax submit

Image 1 


Image 2-  OpenOrClose ScreenAction


Thanks


UserImage.jpg
Ryan Rigby

These instructions are very nicely written. Thanks for providing them. I have a sample .oml file that implements a modal this way and it works great. However, in the actual application I am writing, I am required to use the SilkUIFramework, and it causes some weird behavior. The SilkUI togglemodal action doesn't take any inputs, so if I have more than 1 modal, I can't specify which one to use. It also displays the modal at the bottom of the screen and if I click outside of the modal, the modal is toggled off and focus returns to the original web screen from which the modal was opened. If I instead use the OutSystemsUIWeb togglemodal action, the modal won't toggle on or off. Do you have any ideas why this may be happening?

Miguel Oliveira wrote:

Hi joshua aquino,


1. You need to drag the modal widget to your webscreen and give it a name.

2. Create a button to open the modal and a Icon or a expression inside the modal to close it.

3. Create a screen action "OpenOrClose" and inside drag the toggle modal widget and pass the name your your Modal.Id

4. Assign the destination to the button and the expression in your modal to your OpenOrClose screen action

5. dont forget also to put to the button and expression the method Ajax submit

Image 1 


Image 2-  OpenOrClose ScreenAction


Thanks




UserImage.jpg
Raphael Jones

Is the modal widget available for free? I've look around the modules in OutsystemsUI and can find ToggleModal but not the actual Modal widget. How can I get it?

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