Using Javascript in webviewer?

can you tell me if this is possible in webview of Thunkable x ?

javascript inject

https://puravidaapps.com/inject.php

This is not something I’m familiar with, but @actech would know more about this I think.

Did you try using the data URL property data:text/html?
Can you tell us a bit more about the app you are trying to build @ANAND_VELANDY and which site you are sending data to? Would the WebAPI component be a viable alternative, by any chance?

I will have to check data:text/html.

Basically I have a website where normally user have to login with ID and Password.

I wish to make a webview App, with Save ID and Password Feature.
So once logged in, next time website login could be done automatically with javascript and stored ID+Password.

eg website: https://puravidaapps.com/webviewertest.html

How to fill out a form of a webpage and click a button using some JavaScript.

This was possible in classic. wherein webviewer1.goToUrl: javascript:(function() {…}
worked.

Can this be done in Thunkable X Webviewer?
So that I can auto Login to my website, from App?

Hi,

See the Canvas and HTML screens in this project.

https://x.thunkable.com/projects/5c8e64dfe1aad2f778a4c5ad/project/properties/designer/

If you need two-way data exchange between the app and WebViewer, then use FireBase and FireBase JavaScript for this.

Good morning, I have the same problem with you. Have you solved it?

hi @ANAND_VELANDY,
Did you resolve your issue?
I need the app to auto fill user/pass into my webview too.
anyone have solution?

You should be able to accomplish this soon! I hired a developer on fiverr.com to do something like this for me. It cost 7$ in total.

1 Like

Assuming you own the website, you can write javascript to get a message from Thunkable that contains the username and password, and use that to fill in the webview. You’ll need to include thunkableWebviewerExtension.js on the webpage. There is a simple example linked on the page below

5 Likes

You’ll this be used to inject other types of data @paulmw. I’m thinking stuff like hosting a page with a google chart. Could I send the chart data and let my server render the image?

You can definitely have a chart in a webpage and pass data using these block (it’s one of the reasons I’ve implemented this).

So you should only send strings as messages. What I’d do is create a list or object in Thunkable that has the data you want, then use the “generateJSONFromObject” block to make a JSON string. Use the post message block with that string, and then in your website’s javascript use JSON.parse(message), and then you’ll have an object with all of your data.

1 Like

Just made a graph example for you: https://x.thunkable.com/copy/60e6376165b009edfcd66bedaa7813c8
The code for the html is here: https://github.com/thunkable/webviewer-extension/blob/master/examples/graph.html

Both are linked from the github page: https://github.com/thunkable/webviewer-extension/

I like C3.js so I used that, but the concept is the same for other graphing libraries.

4 Likes

@paulmw

WOWWWW, :bowing_man:

Thanks!! I need to look into this more. I like this a lot! Is it safe to assume we can only pass along 1 piece of info or could more be passed along in an object? For example, i am using quickchart.io for my graphs currently, and i pass along in an API POST, custom tick marks for both X and Y axis, and coordinates for a trendline.

2 Likes

Yes you can use an object.

The key is that the post message block only takes in strings. But as long as you use the generateJSONFromObject block (like in my example), you can convert a list or object into a string. In my example I converted the shuffled list into a string, then used JSON.parse(message) to get the list back so I could use it in the graph.

3 Likes

Thanks @paulmw, I will have to study this. I see how you got the first item (i think), you when you bindto “#chartScreen Shot 2020-04-05 at 12.11.35 AM that takes what was in the JSON string and concatenates the string to the correct place in [‘data’],

and then this code overwrites(?) the original code where the bindto method is.

If that’s close, I thank codeacademy.com and the couple hours of javascript i have under my belt. If not, I drop my head in shame and i’ll go study some more. lol

Thanks for all of your help!!

Yeah, you got it mostly correct. The code is essentially copied from the c3 documentation: https://c3js.org/gettingstarted.html

“bindto” basically finds the element with id “chart” and now the library knows where it should generate the graph.

columns:[ ['data1'] ] sets the initial data of the data1 series, which is empty to start. If I wrote columns:[ ['data1', 5,6, 7] ], then there would be 3 data points on the graph, (0,5), (1, 6), and (2, 7).

Running chart.load() overwrites the previous column data (which was empty when the graph was initialized). If my message was [7,8,9], then the value of columns is [['data1, 7, 8, 9]], and my graph would have point (0,7), (1,8), and (2, 9).

1 Like

@Kartik14 @inspiringtec1wvk @manyone @cttricks, you may be interested in this thread!

Yes! I was just reading that in their docs! so if i understand then, i could create the entire JSON on my end in the app, and send it to the file. instead of ['data1']concat.(messageList) , i would use chart.Load(messageList);

the first just concatenate the 2 arrays, so i could just replace the entire JSON body i think.
is that correct?

if so, I’ll take a crack at a built up example!

There are lots of ways of handling this, that’s one of them. Try it out, and post if you have questions. I can post another more complicated example with more options if people need it.

I’m stoked! Thanks so much #teamThunkable and @paulmw for all the great features. Man, this is really exciting for me. I really am a graph lover, it’s part of my profession. My app users see between 1-5 graphs every day they use their app. If i size things correctly, I will be able to have much nicer AND interactive graphs!

My most complicated graph JSON looks like this from quickchart.io (which uses chart.js libraries).

{
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May'],
    datasets: [
{
      	label: 'Corrects',
      	data: [ 10, 60, 70, 180, 190 ], borderWidth:1,pointBackground:'green',
	fill: false,
	borderColor:'green'}, 
{
    	  label: 'Incorrects',
     	 data: [ .10, 20, 30, 40, 50 ], 
	fill: false, 
	borderColor: 'red', pointStyle:'star', pointRadius:4, borderWidth:1
    }]
  },
  options: {
    	title: {
     	 display: true,
      	text: 'BEHAVIORNAMEGOESHERE',
      	fontColor: 'Black',
      	fontSize: 32,
    },
    	legend: {
      	position: 'bottom',
    },
    	scales: {
      
      	yAxes: [{ type: 'logarithmic', 
        
        	ticks: {
        	autoSkip: false,
        	min:.001, max: 1000,callback: function (value, index, values) {if( value==.001 || value==.01 || value==.1 || value==1 || value==10 || value==100 || value==1000){return value + ' per minute';}},}}],},},}

Random unsolicited advice for how to approach this:
I’m guessing some information displayed in your graph comes from your app. I would only send the information generated from the app to the webpage using postMessage. Then read the message in your webpage and use it to generate the JSON you’ll use for quickchart.io. Don’t try making this entire JSON object in Thunkable. For maintainability, you’ll want to use the fewest blocks possible to make this work.

1 Like