I would like to display a small modal alert, bootstrap style.
so a mix of html and javascript to display.
what is the best way to achieve it ?
htmlviewer ?
websdk with visual or non visual control ?
webcontrol with executejavascript ?
I’ve tried different code but the alert is never displayed…
any hint appreciated !
Probably best with a WebSDK control. I haven’t built a Web2 control in a while, I don’t know whether the visual or non-visual framework would work better for your use case.
problem is there is no visual item in xojo, only a call with parameters
and there is a visual item in the browser, so I don’t know if I should use a visual or non visual websdk control !
Hey @Jean-Yves_Pochez, isn’t WebMessageDialog enough for what you need?
Var dialog As New WebMessageDialog
dialog.Title = "Modal Header"
dialog.Explanation = "Some text in the modal."
dialog.CancelButton.Caption = "Close"
dialog.CancelButton.Visible = True
dialog.ActionButton.Visible = False
dialog.Show
a Xojo WebMessageDialog you can drag into a WebPage.
plain html dialog
https://www.w3schools.com/tags/tag_dialog.asp
bootstrap 5.x dialog with html
alerts
on the fly forms can be done with java script and Document Object Model.
useful entry for input forms
https://www.w3schools.com/html/html_forms.asp
@Ricardo_Cruz_Fernandez nice catch.
but how do you get the button that is clicked if you have many ?
I mean , still creating the webmessagedialog on the fly like this, not creating a webdialog and embed it in a webpage.
I would still like to make it in html+java, because I would like to add some html in the explanation zone.
edit: all right found this.
If you still want to show some HTML instead of a plain message, you could wrap the “Explanation” property between “raw” special tag, so Xojo won’t escape it:
Var dialog As New WebMessageDialog
dialog.Title = "Modal Header"
dialog.Explanation = "<raw>Some text <strong>in the modal</strong>.</raw>"
dialog.CancelButton.Caption = "Close"
dialog.CancelButton.Visible = True
dialog.ActionButton.Visible = False
dialog.Show
If you create it in code, you’ll need to AddHandler to the ButtonPressed event. If you drag it onto the IDE, add an event handler visually.
thanks guys this helps me a lot.
I still want to have a modal behavior, so even if I have a addhandler, how can I get the button clicked ?
I would like to have a call like
var s as string = MyWebAlert("title","explanations","okbtntitle","cancelbtntitle")
anywhere in the code
how can I get the text of the clicked button or the integer ID in a modal behavior ?
(it was not the response to the post one before)
if you execute java script you can change the page to whatever you want.
Self.ExecuteJavaScript(TextArea1.Text)
if you create a class and set super to WebMessageDialog
you have the button events inside your class and you not need AddHandler
You can’t have modal behavior on Web. The event handler passes the button pressed, but you cannot stop execution and wait. Web is asynchronous.
a example with the usage of a class
https://drive.google.com/file/d/1Bqcyh4gv6mJgbpEb1uECJ8leZukPF-QV/view?usp=sharing
the minimum of a button click for open the dialog
Var d As New MyWebAlert("<raw><h1>Hello World</h1></raw>")
AddHandler d.Ready, WeakAddressOf MyWebAlert_Ready
d.Show
and the event part if something was clicked
Public Sub MyWebAlert_Ready(obj As MyWebAlert)
Label1.Text = obj.Value
RemoveHandler obj.Ready, WeakAddressOf MyWebAlert_Ready
End Sub
well, after a night of sleep (and thinkings) I really need to wait for the user to answer.
it’s a button, to delete a record
I ask the user “do you want to really delete this(these) record(s)”
and I have to wait for its answer to do it
how can I achieve that, in a simple “desktop” way , but with a webapp ?
if myConfirm("really delete the record(s)?") then
...do stuff...
else
... user canceled ...
end if
you could give the myConfirm a object with a interface execute
somehow
myConfirm(obj,"really delete the record(s)?")
or the adress of a method.
i think you need to warp this “do stuff” in a method to prevent this modal behavior.
what is missing in xojo is something like await in c# (which not block any ui)
Operating modally as we understand from desktop is a bad idea in Web. The way to implement this is to cover the page with an element that behaves as a blocking mechanism to prevent the user from performing any actions until they have answered the modal message. When they click a button, you send the data back to the server then dismiss the dialog and blocking element.
some questions like “do you really want to delete xxx records” really needs the user to be focused on one task only … so I assume the modal behavior completely for this kind of task.
now the real question: is it feasible in xojo ? with a websdk or webmessage subclass or executejavascript ? what is the easiest way to do this ?
if we stay under bootstrap, there are classes already designed for a modal action
I just don’t know how to implement them in xojo …
Yes, it is possible in the way I describe above. I do it with GraffitiAlert and other specific implementations. The blocking element prevents the user from doing anything until they click a button, the data gets back to the server, and you do whatever needs to be done and dismiss the alert.
You should use the WebSDK as already directed by @Tim_Parnell above.
thanks Anthony. do you make it with a visual control or a non visual one ?