Returning Data to Xojo Web App

Targets Web
1

The javascript documentation needs to be greatly enhanced

2

John,
You can find an example for the new functionality of HTMLViewer that is included in 2020R1 in the Examples folder at
Example Projects/Desktop/Controls/HTMLViewer-Exec.xojo_binary_project

1 Like
3

Here is one of the best resources for JavaScript, HTML and CSS:

1 Like
4

Thanks Anthony but I need it in a web project

5

Again, thanks Michel . . . I’ve looked at this over and over . . . What’s missing is how to get data back into a variable (array) in my app.

I’m trying get an array of actual weblistbox row heights.

6

I would start by having a look at the example that Anthony posted.

Then you need to study JavaScript loops to get each cell’s height, and perhaps send a comma separated string out.

From Xojo’s side, you can then simply do a split.

7

@Michel_Bujardet I think @John_Scanlan does know how to split. His problem is to get the data from the Javascript Variable to xojo cause this is not only not well documented. It is not documented. And yes: it would be nice if it is even not hashtagchanged event which we are always using because there is no documentation except we are to stupid to find what is also possible. Because there is no documentation I have another problem with it. To fullfill ISO 12207 we have to use documented functionality with the exception we have to develop it by self. Otherwise it would be Software of unknown providence what makes it really complex to use. The same issue I have with ISO 60601 and Iso 13485 which are needed rules for medical devices and medical software. So thank you for your help.

2 Likes
8

The example projects for this in Xojo Web 2.0 can be found at Xojo 2020 Release 1/Example Projects/Web/WebSDK/. They’re not entirely fleshed out yet, but you can get a good idea of what’s going on by browsing through their code. They’ve said that more examples are forthcoming, as well as documentation, and I’m confident this will happen fairly soon as it is both highly requested and needed.

In the interim, there are two ways of getting data from JavaScript to your Xojo WebSDK components:

triggerServerEvent
In order to use this function, in your JS class definition, you can simply call this.triggerServerEvent with the following parameters:

  1. Event Name (string)
  2. Parameters (data to pass back to Xojo)
  3. Force (boolean, optional) – tells the Xojo Web Framework whether it should send the event regardless of whether it’s been registered as one your component will accept within your WebSDK JavaScript class definition.

Inside your JavaScript class definition, this is as simple as calling

this.triggerServerEvent("eventName","data",true);

If you wish to call triggerServerEvent outside of your class code, then you can use the getNamedControl method of the XojoWeb class to get the JavaScript object representing your component, then call triggerServerEvent.

Here’s a basic example of that:

var controlObject = XojoWeb.getNamedControl(controlID);
if (controlObject != null) {
    controlObject.triggerServerEvent(eventName, params, true);
}

Handle Request
The HandleRequest event of the Xojo-side WebSDK classes can also be used for passing data between JS and Xojo, and it’s pretty straightforward as well. You’re basically creating an XHR request and sending it off with the proper data. An example in your JS code might look like this:

$.ajax({
    method: "POST",
    url: "/" + XojoWeb.session.identifier() + "/data/" + controlID + "/eventName",
    data: "some data"
});

Then you simply implement the HandleRequest event to act on that data.

Hope that helps!

6 Likes
9

I guess that’s what he meant. Would be nice if there would be quickly the xojo 2020 Web SDK documentation ready for the public. Otherwise it is for the user really complex to get this out. Thanks for the reply.

3 Likes
10

Xojo.TriggerServerEvent was perfectly documented and described in Web 1.00 WebSDK.

From what I read in Anthony’s post, the difference is that now it is this.triggerserverevent in Web 2.00, instead of xojo.triggerserverevent.

1 Like
11

Mostly correct. The triggerServerEvent function is now a method of Xojo’s JavaScript base class for components rather than existing as a direct child of the XojoWeb class.

This makes a lot more sense than the way it was implemented in Web 1.0 as you now no longer need to specify the context (ControlID) in which to raise the ExecuteEvent event as you did in Web 1.0.

You can still get to it from anywhere, as I outlined above, but more often than not you’ll be calling it from within your JavaScript class code anyway.

12

I never use WebSDK, so hope this thread will provide sample working sample so that I can grasp what is this mean for my web development. :thinking:

13

As I said above, documentation and more examples will be available from Xojo in the near future. In the meantime you can view the example already included and use the information I supplied here to get started.

2 Likes
14

Y’all keep telling me to look at the examples, but there is none.

There is no example that transfers data from JS to Xojo, particularly not for the web

15

Desktop > Controls > HTMLviewer

Example for desktop applications.

For Web there is:
Web > WebSDK > some examples

16

There is but it is not that what you are expecting

17

what do you mean Thorsten?

18

John, can you please elaborate about what you want to do ? There are thousands of way to pass data back to the app.

Where does JS execute ? It won’t be as easy if you run JS in a WebHTMLViewer, for instance, since being an iFrame, if it is not on the same domain as the app, you can’t communicate for security reasons.

Could you post your current JS code ? The significant portion of it, of course. It is important to know the kind of data you want to pass back. Is it a simple variable, or an array, or something else entirely ?

19

From the beginning the goal has been to create a drag and drop between weblistboxes. I tried listboxes created out of containers but the window took minutes to load.

Since there are no mouse events in 2020 R1, I’m still using 2019 R3.2.

So the idea is to just identify in what row the mousedown event occured by using the y coordinate.
To do this I need the row heights (including rows created by wrapped cells). Unfortunately when you ask for the row heights you get the minimum row heights not the actual row heights.

So, I need the row heights after the weblistbox has been drawn.

I’ve been able to write a list of rowheights to a label when a cell is clicked in the weblistbox: “21; 36; 36; 36; 21; 36; 36; 36”. This is correct. I can easily work with this text list.

I just can’t get that text back into Xojo.

Here’s my working jscript (in the mousedown event of the weblistbox) that creates the list of rowheights in the label (label2):

jscript = “document.getElementById(’” + wp.cc.create.label2.controlID + "’).innerHTML = ‘’; "
wp.cc.create.label2.ExecuteJavaScript(jscript)

for i as integer = 1 to me.rowCount ‘rows
jscript = "var x = document.getElementById(’" + me.controlID + "’); " + _
"var y = x.getElementsByTagName(‘tr’); " + _
“var str1 = document.getElementById(’” + wp.cc.create.label2.controlID + "’).innerHTML; " + _
“var str2 = y[” + str(i) + "].offsetHeight; " + _
“document.getElementById(’” + wp.cc.create.label2.controlID + "’).innerHTML = str1.concat(str2); "
wp.cc.create.label1.text = jscript
wp.cc.create.label2.ExecuteJavaScript(jscript)
jscript = “var str3 = document.getElementById(’” + wp.cc.create.label2.controlID + “’).innerHTML; " + _
" document.getElementById(’” + wp.cc.create.label2.controlID + "’).innerHTML = str3.concat(’; '); "
if i < me.rowCount then
wp.cc.create.label2.ExecuteJavaScript(jscript)
end if
next i

20

Feel free to stand in row, also interesting for me to find a solution.

1 Like