WebMessageDialog with Button Indicator Danger

While I know Xojo quite well, I haven’t used Xojo Web much…

…so here I am with a probably simple question: “How can I get Xojo’s WebMessageDialog to show the Action Button properly styled for a destructive action?”

A WebButton has the Indicator: Danger.
Adding that Indicator to the WebMessageDialog seems to do nothing.
And I don’t see a way to apply that to the ActionButton.

Here’s what I’ve tried:

Var dialog As New WebMessageDialog
dialog.Title = "Destructive Action"
dialog.Indicator = Indicators.Danger
dialog.ActionButton.Caption = "Destroy"
dialog.CancelButton.Visible = True
dialog.Message = "Are you sure you want to perform this destructive action?"
dialog.Explanation = "This action cannot be undone."
AddHandler dialog.ButtonPressed, AddressOf DestructiveActionButtonPressed

I’m sure there has to be a way without creating an own/custom WebDialog for such a basic task?

Does changing the ‘Indicator’ property in the IDE give you the visual change you’re looking for at runtime?


The Dialog.Indicator is not a reference to the button and has no effect on the Dialog.
The buttons have no indicator option.
See: #72102 - WebMessageDialog Indicator property has no effect

It will be great if we can change the buttons indicator and also if the dialog use some of the Indicator color. @Ricardo_Cruz maybe for next release give us more options?

Edit: now that Ricardo added #60051 - Easy setting to change the Buttons to Outline Buttons having those options on WebMessageDialog using code will be great.

1 Like

That’s for WebButton - yes.

However, I’m looking for a solution to set this in a WebMessageDialog, which has WebMessageDialog Button’s (and they don’t seem to have a Property .Indicator)…

Thanks… I haven’t found that in Issues myself.

So a basic feature that’s missing :wink:

But then again - some of you seem to apply Styles in App’s HTML Header and use customized things in code, such as WebListBox Header’s that have centered text. Who knows - maybe there is a way to do that in a WebMessageDialog, too?

Sorry, I haven’t spend the time on that as we use normal WebDialogs to show information and change the buttons to what we need (Danger, Success, Warning, etc.)

I guess with some JavaScript you can try to find the _action button inside the modal-footer and change the class from btn-primary to btn-danger. As the ID is shared with the WebMessageDialog maybe it can be done.

As I mentioned above, JavaScript can help.

I did some tests and was able to get this:

I had to create a method that I use calllater to use, so added this line of code after your code above

timer.CallLater(1, WeakAddressOf ChangePrimaryToDanger, dialog)

I’m no expert with JavaScript or understand the difference between WeakAddressOf and AddressOf (I should study this), but having the method as:

Public Sub ChangePrimaryToDanger(value as variant)
  var dialog as WebMessageDialog = value
  var exec() as String
  exec.Add( "(function() {" )
  exec.Add( "  let field = document.getElementById('" + dialog.ControlID + "_action');" )
  exec.Add( "  field.classList.remove('btn-primary');" )
  exec.Add( "  field.classList.add('" + "btn-danger" + "');" )
  exec.Add( "})();" )
  dialog.ExecuteJavaScript( String.FromArray( exec, "" ) )
End Sub

it works.

Please if someone has recommendations on the code above, share the suggested changes.

Note: it was a quick test only tested locally, may not work in all situations, etc.

1 Like

Have you considered building a WebDialog in the IDE, and using it in lieu of a WebMessageDialog? You could have complete control over the look/feel in that way.


Public Sub ChangePrimaryToDanger(value as String)
  var dialog as WebMessageDialog = value
  var exec() as String
  exec.Add( "(function() {" )
  exec.Add( "  let button = document.getElementById('" + dialog.ControlID + "_action');" )
  exec.Add( "  button.classList.remove('btn-primary');" )
  exec.Add( "  button.classList.add('btn-danger');" )
  exec.Add( "})();" )
  dialog.ExecuteJavaScript( String.FromArray( exec, "" ) )
End Sub



for use in a more detailed dialog, you can also use my websdk button (inspired by xojo websdk example) to add the indicator (and more) to your buttons.

It would be nice to have the Indicator property working in the WebMessageDialogButton control.


Thanks to all of you!
I’m always surprised how fast to get answers and even solutions (even if considered a workaround).

As there are several solutions to this topic, here is my summary:

Unfortunately, a basic feature missing in Xojo Web.

Let’s vote this up to get this added :wink:

Meanwhile, a workaround would be to roll out an own WebDialog (but that doesn’t fit in the concept of a RAD environment to me, if one has to add custom dialogs for basic popup-questions).

Or use some JavaScript - thanks to @AlbertoD and @Anthony_G_Cyphers
Here’s the Link to their solution.

I have slightly modified this and put these two Methods in a Module:

Public Sub ShowWithActionDanger(Extends dialog As WebMessageDialog)
  Timer.CallLater(1, AddressOf ShowWithActionDangerTimerAction, dialog)
End Sub

Private Sub ShowWithActionDangerTimerAction(dialog As Variant)
  If (Not (dialog IsA WebMessageDialog)) Then Return
  Var javaScript() As String
  javaScript.Add("(function() {")
  javaScript.Add("  let button = document.getElementById('" + WebMessageDialog(dialog).ControlID + "_action');")
  javaScript.Add("  button.classList.remove('btn-primary');")
  javaScript.Add("  button.classList.add('btn-danger');")
  WebMessageDialog(dialog).ExecuteJavaScript(String.FromArray(javaScript, ""))
End Sub

So I can now simply do this:

Var dialog As New WebMessageDialog
' ...setup the dialog...

So it’s in a single place to use from everywhere - and a single place to change once the Xojo Web Frameworks allows to do that in other ways.


Is always nice to see people (new or experienced with Xojo) start using Xojo Web.
They can find things that others have missed (or reported that might get more attention for next release).
More people using Web is better for everyone.
Basic (missing) features get added. Bugs get pointed out. New Features are created. WebSDK shared. CSS/JavaScript alternatives presented (until that is included).
In the end an easier to use and more complete Web solution.

1 Like

Hi Ricardo, do you want an Issue created for this? or my comment in Issue #72102 is enough?

1 Like

That should be enough, I can create it Tomorrow morning :blush:


No need for a new one - you’re already assigned to this one: #72102 - WebMessageDialog Indicator property has no effect :wink:

1 Like

I agree with @AlbertoD, the Indicator should be wired to each button, not the WebMessageDialog. Bootstrap doesn’t have support for indicators in modals.


So do I.
I just wanted to say that I don’t see the need for a new Issue to be opened.
Use the linked one, and implement it the right way (via Buttons, not via Dialog), such as @AlbertoD has suggested in that Ticket.


@Ricardo_Cruz thank you for being awesome and coming here to figure out the best solution to the problem.

I know everyone would agree with me to say that we all really appreciate the level of effort and skill you provide for us. :heart: