can you tell me if this is possible in webview of Thunkable x ?
javascript inject
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.
2 Likes
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
WOWWWW, 
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 ā#chartā 
that takes what was in the JSON string and concatenates the string to the correct place in [ādataā],
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