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
dialog.Show()
I’m sure there has to be a way without creating an own/custom WebDialog for such a basic task?
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?
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)…
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.
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.
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.
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
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).
I have slightly modified this and put these two Methods in a Module:
Public Sub ShowWithActionDanger(Extends dialog As WebMessageDialog)
dialog.Show
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');")
javaScript.Add("})();")
WebMessageDialog(dialog).ExecuteJavaScript(String.FromArray(javaScript, ""))
End Sub
So I can now simply do this:
Var dialog As New WebMessageDialog
' ...setup the dialog...
dialog.ShowWithActionDanger()
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.
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.
