Making a Input Alert

Tutorials and DIY Guides
,
1

Hello all,

I recently came across this when playing around with Thunkable X.

This is a way to add alerts with text inputs (at least on iOS, idk about android)

To do this, you will need the following components:

  • Webviewer

You will also need a simple HTML File, this is what calls the alert, I have included a sample to download here, you will need to open it in your word-editing software, and change what the alert should be, labelled “Prompt” and the background color to match your app. You will also need to re-download this as a .html file. (Community wont let me upload)

HTML Download:
alert.txt (152 Bytes)

Then its time to get coding,

Open a new project in Thunkable X, and upload the HTML file to your files, then set the url of the Webviewer to what you named your .html file, open up your app, and you see that an alert with a input pops up!

Example:

IMG_0508.PNG
IMG_0508.PNG1536×2048 144 KB

I hope this helps you all out!

Best,
Ian

5 Likes
2

This is great. I can see many use cases for this. Thanks for sharing @ianphaas!

2 Likes
3

Thanks,

Any idea on how to send that information back to Thunkable X?

Because right now it doesn’t do anything.

2 Likes
4

I love it! :smiling_face_with_three_hearts: :smiling_face_with_three_hearts: :heart: :heart:

1 Like
5

@ianphaas i am not getting how to upload it in my app please share a sample project

6

i found the way thank you for this tutorial

7

hmm.
thts like permissons

8

@eko.devs.apploroceo what do you mean by permission

9

@ianphaas i have a doubt how can we get the text that user has written

10

yes initialize vars and do

11

I have attached an improved script below. You can use the “When WebViewer Receives Message” block to get the value the user input.

alert.txt (152 Bytes)

You will need to follow the directions in this post to set it up with Thunkable.

1 Like
12

@ianphaas i tried already that and tried again with the improved script it gives nothing

13

@ianphaas The last file you sent is the same as the one above.

1 Like
14

Sorry, I must have sent the wrong file, try this one again, alertv2.txt (304 Bytes)

2 Likes
15

nice one @ianphaas looks like there is a problem in your txt file here is the completed one - alertv2.txt (305 Bytes)

16

in your file you wrote

<!DOCTYPE html>
<html>
<head>
<script src="https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js" type="text/javascript"></script>
<script>
var answer = prompt("Insert Text Here");
ThunkableWebviewerExtension.postMessag(answer);
</script>
</head>
<body>
<body>
</html>

at postMessage you missed “e”

here is mine -

<!DOCTYPE html>
<html>
<head>
<script src="https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js" type="text/javascript"></script>
<script>
var answer = prompt("Insert Text Here");
ThunkableWebviewerExtension.postMessage(answer);
</script>
</head>
<body>
<body>
</html>
3 Likes
17

Sorry about the typo! I was just trying to type it fast so I could get it done! My apologies!

2 Likes
18

Thanks @ianphaas! :grinning: This helped a lot in my project!