How to implement a confirmation dialog with Qodly

With html/js it’s easy to implement client side a confirmation dialog to let user confirm if he want or not an action will be perform (as dropping a record for exemple).

Is there actually a way to realized this with Qodly ?

There are ways to do so at this moment, by showing/hiding a stylebox containing your confirmation dialog over the rest of the app.
As this is still a bit tricky, we are currently working on a much better and easier way to proceed. Stay tuned.

this is what i’m doing. it’s not ideal (especially if you have multiple webforms, and you are trying to create generic dialogs), but it works.

Is the confirm stylebox showed in front need to mask all the the rest of the app in order to simulate modal ?

yes, otherwise mouse events will be received by the other components. it’s not ideal. it’s a hack.
alternatively, you could hide all the other components on the webform while the “dialog” is active.

I currently add a 100% sized transparent stylebox around the “dialog” to simulate a modal window.

The “dialog” component is hiden on the webform on load event, but it shortly appear when the webform is rendered. Are you experiencing this ?

Yes I confirm this is behavior is typical.
What you can do is the following:

  • Do not use an onLoad event to hide your dialog
  • Hide it right away, in Qodly Studio, by assigning it a “hidden” css class containing display: none
  • Remove this css when you need to display your dialog

You can assign several css to a given component.
QodlyScript commands addCSSClass() and removeCSSClass() can be used to add or remove CSS class to/from you dialog.

Note that we are preparing, as we speak, a feature allowing a nicer Dialog/Popup management, so I advise you to not spend too much time on this.

1 Like

Thank’s for your response. I had actually managed to solve display issue playing with css classes as you suggest.

I can’t wait to see the new features that will be integrated into Qodly.