22
Views
6
Comments
Solved
Show Modal by JavaScript
Application Type
Reactive
Service Studio Version
11.53.43 (Build 62091)

I am making a component that displays Modal like JavaScript confirm. However, unlike confirm, I would like to display it in a customized layout.

I want to use it in various reactive apps. It is too much trouble to create a Modal component for each application, so I will create a component to display Modal in one application and refer to it from various applications.

If I try to make it with  Popup widget and Block, there is no output parameter, so it is impossible to know whether OK or Cancel was selected.

Therefore, I would like to use JavaScript to generate HTML elements so that Modal can be displayed.

Ideally, a JavaScript-generated popup should appear when a button is pressed, using a client action.

UserImage.jpg
Afaque Shaikh
Solution

Hi @Haruka Arakawa ,
This can easily achievable using some custom js code , CSS and 2 client action handler for cancel and confirm.
Here is Demo app URL which I have created as per your requirement. 

Also I am attaching oml file for your reference, as per your need you can modify it.
Thanks,
Afaque Shaikh



JSConfirmPopup.oml
UserImage.jpg
Haruka Arakawa

Thank you very much.  A Pop up was showed.

2024-03-23 18-16-49
Bryan Villalobos

Hi @Haruka Arakawa ,

You can implement it using Popup Widget inside a Block and utilize the events.


Regards,

Bryan

UserImage.jpg
Haruka Arakawa

Thank you very much.

But what I want to do is to display Modal in JavaScript. 

Besides whether or not OK or Cancel was selected, using blocks is inconvenient in many ways this time around.

2024-03-23 18-16-49
Bryan Villalobos

Hi @Haruka Arakawa ,

Can you please elaborate when you say “display Modal in Javascript”? Or you mean your trigger/calling point is inside a javascript block?

I am also unsure when you said using blocks is inconvenient. I think it will actually make your development simpler without implementing it via js. After all, even if you did it via JS, i think you will still have to spend almost the same amount of effort in handling the result.

You can still create it as a common block, and reuse it in other modules.

Regards,

Bryan


UserImage.jpg
Haruka Arakawa


Thank you very much. Sorry, my understanding of Blocks was limited, so I thought that Block could not exchange information across modules. It seems to work well.

UserImage.jpg
Afaque Shaikh
Solution

Hi @Haruka Arakawa ,
This can easily achievable using some custom js code , CSS and 2 client action handler for cancel and confirm.
Here is Demo app URL which I have created as per your requirement. 

Also I am attaching oml file for your reference, as per your need you can modify it.
Thanks,
Afaque Shaikh



JSConfirmPopup.oml
UserImage.jpg
Haruka Arakawa

Thank you very much.  A Pop up was showed.

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