With AutoTools Web Screen Variables you can easily send data from Tasker into your Web Screens! Here's how it works:

Define Variables In HTML
This is the format for Web Screen variables in HTML:

Code (Text):

<meta name="autotoolswebscreen" type="variablejs" id="taskerVariable" label="Tasker Variable" description="An example of a Tasker variable you want to pass over on to the web page. "  defaultValue="Some value" />

If you define the above variable, this will be what the configuration screen will look like in Tasker:

As you can see a new field is automatically generated in the Screen Variable section at the bottom with the title Tasker Variable.

• It has to be a tag of the type meta
• name has to be autotoolswebscreen
• type can be either variablejs (JavaScript Variable) or variablehtml (HTML Variable)
• id is the unique ID for this variable. If it's a js variable, it'll be the name of the variable in the js code. If it's an HTML variable, it'll be the id of an element on the page.
• label is the title of the Tasker preference that will be shown when running this screen
• description is the description of the Tasker preference that will be shown when running this screen
  
• defaultValue is the default value in Tasker

There's also a super handy way to turn Tasker inputs into lists of elements in the final page with this built-in function:

Code (Javascript):

AutoTools.variablesToElements(variableNamesArray, rootElementsId, rootElementClass, itemTransformer)

This converts AutoTools Web Screen variables to HTML elements on a list. itemTransformer is optional and if present will be called for every element that's created. For a full example on how to use this, please check this example page.

For the full list of variable properties (and also AutoTools JavaScript functions) please check here.

You can define JavaScript variables and HMTL variables.

JavaScript Variables
Will create variables in the JavaScript code on the page which will contain whatever text you pass to it from Tasker

HTML Variables
Will fill in the element with the specified id on the HTML page with whatever text you pass to it from Tasker
Extra variable properties for HTML variables:

• attribute allows you to specify an attribute to set instead of setting the inner HTML of an element (for example, setting the href of an a element)

Let's look at an example:

STEP 1 - SHOW WEB SCREEN WITH VARIABLES

In a Task add a AutoTools Web Screen action and set the Source to the following URL:
https://joaoapps.com/AutoApps/Help/...tools/tutorials/webscreen/variables/page.html
Check that AutoTools automatically generated the Tasker Variable and Content input fields from the following <meta> tags present on the page:

Code (Text):

<meta name="autotoolswebscreen" type="variablejs" id="taskerVariable" label="Tasker Variable" description="An example of a Tasker variable you want to pass over on to the web page. Will be shown when the button is clicked." defaultValue="You clicked it!"/>
<meta name="autotoolswebscreen" type="variablehtml" id="content" label="Content" description="The HTML content you want to appear on the page when first loaded" defaultValue="Hello there. Click the button!<br/>"/>

Also check that the fields are already filled in with some default values.

If you now run the action you'll see a page with the text Hello there. Click the button! (which comes from the second Tasker input field with the id: content and label Content).
This input corresponds to an HTML element with the same id on the page:

Code (Text):

<div id="content"></div>

When the action is ran, AutoTools will take the text you gave it and put it in the HTML element in the page.

If you click the button you'll write whatever is in the other variable: taskerVariable

Code (Text):

<input type="button" value="Click Me!" onclick="document.write(taskerVariable)" />

As you can see, this is a button that simply replaces everything on the page with the contents of the JavaScript variable called taskerVariable.

By using Web Screen Variables you make your web screens much easier to configure and much more powerful in the process!