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:
If you define the above variable, this will be what the configuration screen will look like in Tasker: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" />
![]()
As you can see a new field is automatically generated in the Screen Variable section at the bottom with the title Tasker Variable.
There's also a super handy way to turn Tasker inputs into lists of elements in the final page with this built-in function:
- 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
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.Code (Javascript):AutoTools.variablesToElements(variableNamesArray, rootElementsId, rootElementClass, itemTransformer)
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:
Also check that the fields are already filled in with some default values.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/>"/>
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:
When the action is ran, AutoTools will take the text you gave it and put it in the HTML element in the page.Code (Text):<div id="content"></div>
If you click the button you'll write whatever is in the other variable: 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.Code (Text):<input type="button" value="Click Me!" onclick="document.write(taskerVariable)" />
By using Web Screen Variables you make your web screens much easier to configure and much more powerful in the process!![]()
![](data/resource_icons/0/269.jpg?1497030954)
Getting Started With AutoTools Web Screen Variables
Learn how to use Web Screen Variables to make passing data from Tasker to your Web Screen easier!