Hello. I was wondering how can I manage two modals in the same screen. Currently, when I click on the first modal link, both of them popup. I want to make only the one I click to popup.

Hi,

Do you have the "ToggleModal" action for both modals in separated screen actions?


Regards,

Ricardo

Hi Márcio,

  • Name the modals e.g. "Modal1" and "Modal2".
  • In each action of each link use the "ToggleModal" with the corresponding id (i.e. Modal1.Id and Modal2.Id)
  • In each modal you can add a button to close the corresponding modal, again with the "ToggleModal" action.
  • Make sure that you use an "Ajax Submit" in the links and buttons.

Cheers,

Menno

I am having the same issue where two modals appear after click on the link. I have the modals in separate blocks. 

Block1:

Link that opens one modal - No Problem

Block 2

Link clicked opens modal from block1 and modal from block2


ModalOpen Action

- Set the ModalName (ie ModalFileEdit, ModalFileUpload)

- Runs an Ajax Refresh on the container containing the modal

- Calls the server action - Modal\toggleModal


We are still on version 10 of the platform. Thanks.

Ricardo Pereira wrote:

Hi,

Do you have the "ToggleModal" action for both modals in separated screen actions?


Regards,

Ricardo

Yes, I have two togglemodals for both modals.

Menno Hoogsteen wrote:

Hi Márcio,

  • Name the modals e.g. "Modal1" and "Modal2".
  • In each action of each link use the "ToggleModal" with the corresponding id (i.e. Modal1.Id and Modal2.Id)
  • In each modal you can add a button to close the corresponding modal, again with the "ToggleModal" action.
  • Make sure that you use an "Ajax Submit" in the links and buttons.

Cheers,

Menno

Hello Menno, I renamed both modals with Modal1 and Modal2, but inside the server action for toggleModal, can I simply name them toggleModal1 and toggleModal2?


Menno Hoogsteen wrote:

Hi Márcio,

  • Name the modals e.g. "Modal1" and "Modal2".
  • In each action of each link use the "ToggleModal" with the corresponding id (i.e. Modal1.Id and Modal2.Id)
  • In each modal you can add a button to close the corresponding modal, again with the "ToggleModal" action.
  • Make sure that you use an "Ajax Submit" in the links and buttons.

Cheers,

Menno

I'm on Outsystems 10 also.


Hi,

Do you have ToggleModal1 and ToggleModal2 inside the same screen action? (because you can't!) 

Just to understand better the situation, can you share a printscreen of your code to do the toggle?


Thanks!

Ricardo

Ricardo Pereira wrote:

Hi,

Do you have ToggleModal1 and ToggleModal2 inside the same screen action? (because you can't!) 

Just to understand better the situation, can you share a printscreen of your code to do the toggle?


Thanks!

Ricardo

Ricardo, both toogleModal are in different action screens. 


has anyone tested this if we can make 2 modal on the same screen? In Outsystems UI you can do this, but since we are using Silk UI and the togglemodal does not have allow you to specify the widget id.

Hi Michael,

I believe in OutSystems 10 you can only have one Modal per screen... the workaround would be to implement different content for your modal that would be shown depending on some local variable that you change on the screen action that opens the modal.

In OutSystems 11 this has been addressed, and you can toggle a specific Modal (they work more like popups).

Hi Márcio,

As you said in first post, when you click on any one link it opens both of them, this was the same observation that I had.

I have used two modals in same screen.

What I did to use both of them -

I copied 'Modal' from web patterns in my application, I kept the first one which was using Modal from web patterns as it is.

After placing that Modal from web patterns in application interface, I changed some javascript code and css code present in it.

Changed class names of containers shown below such that correct selectors will get used in jquery code - 

Edited css of this new 'Modal' with correct new class names.

JS code change is - 


Now, after performing these changes one can drag n drop this anywhere and can use it same way like we use original Modal, correct modal will get open.

This was quick fix, sharing this because it worked and may help someone.


Thanks,

Durgesh.



I created a sample app wherein i created the 2 modals and 2 different buttons to open the modals and called the action inside the button with method as ajax submit. In both the cases the same modal gets open.

Jorge Martins wrote:

Hi Michael,

I believe in OutSystems 10 you can only have one Modal per screen... the workaround would be to implement different content for your modal that would be shown depending on some local variable that you change on the screen action that opens the modal.

In OutSystems 11 this has been addressed, and you can toggle a specific Modal (they work more like popups).


Jorge,

In version 11 this has been address if you use the outsystems ui but with the silk ui still the same the togglemodal method in silk ui does not have any input  parameter as to which widget id to execute.

But i got you idea on how to do the workaround.

Thanks

Glad I could be of help!

Regarding your use of Silk UI on OutSystems 11, I would recommend against using theSilk UI Modal pattern in Outsystems 11 (as well as any of the other greatly improved patterns).

Using Silk UI patterns that have better counterparts in OutSystems UI Web will just add to your legacy, that at some point you will need to address (and upgrading from Silk UI to OutSystems UI isn't trivial). It will also mean that you're missing out on the improvements OutSystems UI Web brings (and I'm sure you will see more effort being poured into improving/fixing OutSystems UI than Silk UI in the future).