[closed] Insert static data into WebApp via URL or other method

Questions about Thunkable
1

Is there a way to insert (simple) data to a webapp before it loads?

The scenario is that I have a web app and it will be displayed on a few screens, but each screen has different info…

There is a short setup screen to choose the identity which represents the physical placement of the screen.

From that point it works fine.

However. When the device is restarted (or if there is a power outage), it goes back to the setup screen because the browser is not cached (this is a remote kiosk device, so can’t be setup every time)

So, is there a way to feed a webapp information either from the browser or within the URL itself, for example:
/?location=1234
And have the webapp grab that data?

I don’t want to create a load of cloned apps so I’m hoping there is a solution to this, such as somehow setting/getting the location via static text or even via a WebAPI (I build my own).

Thank you.

2 Likes
2

When you say webapp, do you mean the Web Viewer component? Are you trying to open a url that may change? If so, just read that url from an external data source such as a Google Sheet, Airtable or Firebase.

1 Like
3

Perhaps something using this:

The webapp will be embedded in my own webpage, and although I don’t know JavaScript, I do have full control over what goes in the HTML.

Is there a way I can automatically send the webapp a ‘message’, so when the page loads, it gets the message from the JS above or below the iframe the webapp is in?
(maybe this? GitHub - thunkable/webviewer-extension: Communicate between the Thunkable Web Viewer and a website)

1 Like
4

Hi, no, sorry, I do mean WebApp

To clarify, I would like to setup the WebApp (e.g. https://thunkable.site/w/myappid) so that it receives some data from the browser itself, or uses some function to get device specific data, for example the hostname or (local) IP address.

The reason being, each device needs to self-identify and tell the webapp that data so it can display the correct.

If I can put something in the HTML of the webpage I create that holds the iframe for the WebApp, that the WebApp reads, that would be very useful :slight_smile:
e.g.

<html>
<script>some identification data here</script>
<iframe src="https://thunkable.site/w/K0XDxMqwl" title="Chop Down the Tree Thunkable App" height = 500 width = 500></iframe>
</html>

Then the WebApp reads that identification data (and uses it).

1 Like
5

If you have total control over your web page then you can send and receive messages between the web page and the Thunkable app using Web Viewer Extension.

6

So perhaps something like:

<script src="https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js" type="text/javascript"></script>
<div id="locationData">Location1234</div>
<script type="text/javascript">
    // when page loads, wait 1 second and send data
setTimeout(() => {
document.getElementById('locationData').onload = function() {
      ThunkableWebviewerExtension.postMessage('locationData');
    }
}, 1000);
 </script>
<iframe>......</iframe>

Again, I don’t know JS so this could be very wrong! :slight_smile:

1 Like
7

Yes, basically this is how you will do it. In your app you will have a Web Viewer component to receive the message from your HTML file.

1 Like
8

Thank you.

Will the WebViewer receive the data between the HTML DIV tags, or the whole HTML element with the relevant ID?

1 Like
9

It will send back whatever you pass to it whether a whole HTML element or a certain tag/property in the element.

See this example. I’m passing date elements to the HTML file and receiving a date object back.

10

Wait, so does the script have to be IN the WebView within the app itself, or can it be in the HTML that holds the iframe which displays the WebApp?

1 Like
11

I do have it working, but only when the WebView navigates to the webpage with the script in it.

What I’m looking for is to put the script outside the iframe that holds the WebApp, I suppose that is not possible?

1 Like
12

Please see this new post as it explains things more clearly, but also is a different topic as it is about getting device data, not inserting data into a URL.

1 Like