How to use "call Postmessage" and "Whene receives message" with Web viewer?

Questions about Thunkable
1

First of all I would like to congratulate the creators of the thunkable project. Very good.

Notice in advance that I am no expert. However, I would like to use the webviewer tool to access a url and be able to send and receive information by sending a message. Using javascript (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage).

Is this what the webviewer’s “call postmessage” and “whene receives message” methods are for?
And if so, how does it work?

I have already made some attempts and research, but so far without success.

Could anyone give an example of how to use these methods? Thanks.

I take this opportunity to add that, another very useful function would be “onload” method.

Thank you all.

2

Can you provide more info? Do you have an example of the type of info you need to transmit?

I use API gets and posts to send and receive data

Here is one example post

Can you show block setups for what you’ve tried already? It’s possible you were on the right path and just a need a slight bump to stay on course

3

Thank you very much for your reply.
In fact, I needed before testing the function, to know what is possible to do.

Using an API is not the same. I’m already using it on thunkable, but for other reasons and it works perfectly.

As I mentioned, the objective will be to use the “post message” method, in the same way that it is used in javascript (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) for example when sending a message to an iframe - is this what we are talking about?
If so, how does it work?

In javascript you can use:
$ (function () {
// Create IE + others compatible event handler
var eventMethod = window.addEventListener? “addEventListener”: “attachEvent”;
var eventer = window [eventMethod];
var messageEvent = eventMethod == “attachEvent”? “onmessage”: “message”;

// Listen to message from child window
eventer (messageEvent, function (e) {
$ (’# div’). html (‘parent received message !:’ + e.data);
}, false);
});

Ideally, this function should be explained and documented in thunkble docs with examples.

Thank you very much.

1 Like
4

It is a little strange that there is no answer, no explanation, no tutorial for a function that exists on the thunkable platform …

1 Like
5

Hey @daponto this is a brand new feature i think. I am wanting to learn more about this asap.

for example, i want to be able to pass data to a sheet liek this
I am just learning react.js and basic javascript. (a newbie)
I would think that i should be able to POST my data and then retrieve it with something like
the post body would be an object with parameters like “data”:“1,2,3”
and a short piece of script like this

function doPost(e) { var data = e.parameter.data}

and then somehow that gets passed into the code below (which was copied and pasted directly from google)

@actech do you have any insight into this? I’ve seen you reference passing data to the webvier many times.

      <html>
      <head>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">
          google.charts.load('current', {'packages':['corechart']});
          google.charts.setOnLoadCallback(drawChart);

          function drawChart() {
            var data = google.visualization.arrayToDataTable([
              ['Year', 'Sales', 'Expenses'],
              ['2004',  1000,      400],
              ['2005',  1170,      460],
              ['2006',  660,       1120],
              ['2007',  1030,      540]
            ]);

            var options = {
              title: 'Company Performance',
              curveType: 'function',
              legend: { position: 'bottom' }
            };

            var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

            chart.draw(data, options);
          }
        </script>
      </head>
      <body>
        <div id="curve_chart" style="width: 900px; height: 500px"></div>
      </body>
    </html>```
6

Hi @jared thank you for your answer.

I am not an expert maybe that is why i think it is a very confusing answer. Sorry.

7

I think the question is very valid and simple…

What is the intention with the PostMessage functionality, why is it there and what can we do with it?

I also miss other functionalities that are often present for webviews. Like can you notify me when the URL is changed? or even let me know what the URL is?

I know there is a getURL function, but it simply returns the URL I initially provided. If user navigate to another url, the same URL is returned from my webview, that is not nice.

Do not get me wrong, it is nice to have a webview, but we need more and we need examples :slight_smile:

Just my 5 cents…

3 Likes
8

Hello,

I am trying to include payments in the app (i am aware of google policies).

The most known platform is Paypal. So i tried to do include it using 2 different ways:

  • Web Api → Paypal Api. I don´t get exactly the way of doing it. I didn´t find any tutorial or clear steps to do it. So after obtaining the Oauth2 (first step) i am stocked.

  • Web Viewer → Paypal Checkout Everything goes well till the moment i have to receive the answer after the transaction. In other words, i don´t get any answer using this method. image

Did anyone get the way of doing it?

Many thanks.

9

I guess that the answer is related to this post: How to use "call Postmessage" and "Whene receives message" with Web viewer?

There is no documentation regarding to “Web Viewer” --> “Receiving messages”

Could someone from the staff give us some guidance?

Thanks.

10

Jonathan, Sorry to say, but we have been begging for some input on this for a while, as the function looks interesting - at least it has a great name, but nobody seem to step up and explain what it is for…

11

This is explained on github.

I have already used this as has actech in some examples.

The issue is that this forum is not to teach JavaScript. There are many forums that accomplish that task.

3 Likes
12

@jared You make me happy today!

I really apreciate.

2 Likes
13

If you do get it working, please post your solution here. I think other community members would love to see the solution, as well as me!

1 Like
14

I just got it working. This would be the way (Using WebViewer)

In thunkable → When i press the Button3 the webviewer goes to the adress where the html is. And when the purchase is done, it receives the message from html file.

image

In the html file → I placed the text of the Prueba.txt.
Prueba.txt (1.9 KB)

So, the process would be: You click Button3 in Thunkable, the webviewer goes to your web page where you will see paypal buttons, you click on them, you accept (as a buyer) to send the money. Then when everything is completed, you will receive in Thunkable the message with the order info.

I am sure that there are better ways to do it, but at least this seems to be working.

Regards!

4 Likes
15

Jared, that is a bit harsh - a few lines of text on how to setup the communication is a fair level of documentation imho. Your 14 lines would suffice for most.

16

I’m sorry if you feel something I said is harsh. I don’t intend it to be so. I will try to choose my wording more carefully in the future.

I think that @jonathanvalgarlh4ow provided a good explanation there! Thank you!

1 Like
17

Hi everyone,

Sorry for the delay in adding these details to the Web Viewer docs.

The docs have been updated, giving a general overview of what the Post Message/Receives Message blocks do.

They point to the GitHub for greater detail about how to implement this, since at that point you’re getting into web development so it makes sense to point to an external resource.

Thanks for bringing this to our attention!

4 Likes
18

I hope that you are using Axios as a network request library. Axios is promise-based, which gives you the ability to take advantage of JavaScript’s async and await for more readable asynchronous code.

I don’t know what is your response when the promise is resolved. Is it an error or plain HTML?

19

I’m interested in paying with paypal too, can you help me better understand what to do in the app?
Thx