How do I create a web form in Scriptable?

Scriptable
1

As per the title, how do I create a web form in Scriptable?

I’m new to javascript and although i have scriptable doing a lot, I can’t work out how to display a simple html form and the log it in the console.

Here’s a simple form…


<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form> 

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

</body>
</html>

I just need to display this and then show the results in console.log once submit has been clicked

Anyone have an example?

2

The ‘basic editor’ script used in this post shows how you can reference content in the web view using an evaluation.

Instead of returning content from the view, you could push it to the console instead.

3

Thank you

That’s allowed me to display the form in scriptable, I just don’t know how to use the submit button or save the results to the console log

4

Well, taking the code from the post I originally linked you to, changing the form to contain a couple of input fields rather than a text area and changing the evaluation to output those fields to the console instead, I came up with this example.

let strHTMLOriginal = `<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
<body>
  <form>
    <input id="field1" value="one" /><br>
    <input id="field2" value="two" />
  </form>
</body>
</html>`

let viewOne = new WebView();
await viewOne.loadHTML(strHTMLOriginal);
await viewOne.present();

console.log(await viewOne.evaluateJavaScript(`document.getElementById("field1").value`));
console.log(await viewOne.evaluateJavaScript(`document.getElementById("field2").value`));

Your form is referencing a PHP page as the submission action for which you would need to be running a local server that support PHP; I’m guessing that isn’t something you really want.

In fact, I haven’t included a submit button at all because I don’t believe it needs one. You can just do the evaluations on close.

image
image2048×640 70.7 KB

image
image750×528 29.1 KB

I’m sure it can be made more efficient, but I’m hoping that this just helps make it more accessible and understandable to you. Does that help?

5

Thanks

That’s works perfectly.

Is there no way to have a submit button though, feel more natural to use than clicking close in the top right hand corner?

6

There’s no mention in the documentation of anything to trigger this.

The usual browser-based window.close() doesn’t apply to the webview.

There is a discussion about a workaround for programmatic closure, but you would need to pass out the values of the page as one or more parameters to the script (I’d probably try sending the form values as JSON) as you re-run it. But, if you want it to feel more natural, you would just need to put in the effort to apply the approach described in this thread:

7

I’ll take a look at that thanks.

I’ve just noticed that once you past the code you posted above into Shortcuts, it says it won’t work. Configured web view is not supported?

8

My guess is that it says more than that, giving you some options of what is supported for an inline Scriptable script run in Shortcuts.

image

If you enable the Run in App parameter, it will work, but of course you won’t see any console output and it will not return to Shortcuts.

Shortcuts isn’t actually something you mentioned until this last post. If you want it to have a chance of working entirely in Shortcuts, I would suggest following the instructions in the error message. Unless you have a handy web host, I would opt for the loadFile() approach.

9

To be fair, I’m not fussed how it’s used but I did want to say, hey Siri, run blah blah

10

You could probably still do it, but there’s obviously some gaps as I can’t imagine your end goal is to drop the content of a few name fields you type into a web form into the Scriptable console.

If you are just gathering building blocks to get content out of a web form produced by Scriptable, run by Shortcuts, and triggered by Siri, then I think everything’s now covered.

If there’s something missing, perhaps you could clarify what that is?

11

I am wanting to create a way of creating new customers.

Every time I create a new customer, I need to add the customer name, address, contact number, email, website. I then have to create a new customer folder with sub folders, I need to add unit to my accounts program, I need to add it to my database and finally I need to create a unique customer ID.

I have managed to get Scriptable to create the folder, add it to my database and create the unique ID so almost there.

The only thing I am having an issue with is finding a nice way to input the data.

Ideally I would like to say Hey Siri, add a new customer, I don’t trust Siri with the spelling of customers names so I would like to manually add type the information.

This is where I am stuck, I want a nice way to do this that is easy.

Thoughts?

12

Having been awake for sometime, I have thought about this more.

Requirements:
Create a client folder with sub folders.
Create an Airtable database entry consisting of name, unique ID, website, contact info.
Transfer data to QuickBooks for invoicing
Finally…
I’d like to say Hey Siri, add new client to get started or click on a widget.

Input 1:
I first thought of a web form, all the details can the be in one place, it’s easy to fill plus I can duplicate it for my website so customers can fill it out them selves.

Problems: I see with this
I want a submit button.
I want a full page view, no address bar etc so it looks like an app.
Part of me feels like there are better ways to collect data.

Input 2:
Ask for input in iOS shortcuts

Problems I see with this.
It seems like I need Scriptable to do most of the work and I read you shouldn’t mix them.
Multiple boxes one after another meaning it’s delayed and would take longer to complete.

Now to save time and the need to fill out multiple fields, I thought of an option.

Once I have the company name, this is enough for me to create my unique ID, customer folder and Airtable entry but eventually I will need more info to quote, invoice etc.

I’d rather not fill out multiple fields so what if I just asked for 1 or 2… the website and possibly the email address. I can then try to scrape the contact data from the website which should consist of the company address, contact number etc. I can use that data to complete the Airtable entry.

As mentioned above, I already have Scriptable creating the folders, Airtable entry and unique ID.
I just need to find a way to make it all work in a aesthetically pleasing way.

13

For the submit button I posted a link earlier to a thread that would seem to provide a workaround for that.

loadURL() is the only web view function that looks to support a full screen trigger, so you would need to write and host your input form and a way to deliver the content in a way Scriptable can access. The alternative would be for you to write an actual i*OS app to get your own perfect aesthetic.

There are lots of ways to collect data, some more sophisticated than others, but none as good as an app you define yourself.

I think the best app for designing and delivering your own UI that I’ve seen would be Pythonista, but that’s Python, not JavaScript. I’ve not used JSbox (there are certainly other forum users who have) but I believe that would allow you a greater range of UI building options, and that is JavaScript based.

Drafts has JavaScript scripting and a way to do HTML prompts. If you happen to be a Drafts user, I would suggest taking a look at the options that might give you as you could have a shortcut run a Drafts action from a verbal Siri trigger.

Hope that helps.

14

I’d rather stay away from creating a sole app.

I’ve not taken a look at the submit button yet but looking at the post, it seems to have worked so I will get onto that.

I’m trying to get the WebView.loadURL() but I don’t understand, the code you posted above includes webview, if i change the code from loadHTML to loadURL and replace the html code with a url, I would expect it to work at least for the test purpose.

15

As long as the URL is for a hosted page containing the HTML, I’m not sure how or why your tests would b failing.