Using Variable defined in HTML within EachScape
Install the Tutorial App: HTML Variables
From the Dashboard, select he Tutorial Tab and choose the 'HTML Variables' tutorial app.
Or simply click here to install it into your workspace.
Setting Variables Using the HTML Block
To set variables from an HTML block simply make a request to a special URL that will trigger a Custom Script.
- Any query parameters in that URL will be set as variables.
- These variable(s) will be available throughout the app using the normal [[var:myVariableName]] expander.
Query Parameters are automatically set as variables accessible within EachScape
Special URL
In an HTML Block, you can create a link that will run the custom script.
This is done using the "script" protocol:
In an HTML Block, you can create a link that will run the custom script.
This is done using the "script" protocol:
<a href="script:myCustomScript">Run Script</a>
The above link HTML would run the Script called "myCustomScript" when "Run Script" is clicked.
You can also set Variables when you call your script:
<a href="script:myCustomScript?var1=apple&var2=42">Script with
Variables</a>
Variables</a>
The “script:” part is always used. the part after the colon is the name of the custom script. If you add a query string (as in the second example) those get saved as variables.
2 Approaches
The HTML Variable Tutorial app illustrates two approaches to setting the variable
In the HTML Variable tutorial app, both approaches trigger a Custom Script called "handleFormOutput" and set variables called "firstName" and "lastName".
1st Approach
The first approach uses pure HTML with a form whose "action" parameter points to the special URL to trigger a custom script. By setting the "method" parameter to "get", the web form will add the form fields to the url as query parameters, which will cause them to be set as variables in the app (the "name" attribute of the input objects is used to name the variables).
The first approach uses pure HTML with a form whose "action" parameter points to the special URL to trigger a custom script. By setting the "method" parameter to "get", the web form will add the form fields to the url as query parameters, which will cause them to be set as variables in the app (the "name" attribute of the input objects is used to name the variables).
2nd Approach
The second approach uses a similar form, but instead of just submitting the form, we use jQuery to override the click action of the submit button and we use the ES.API, which is automatically bundled with the app, to call the custom script.
When the submit button is clicked, the JavaScript code grabs the values of the two text inputs (firstName and lastName) using jQuery and uses the requestScript method of ES.API to call the custom script. The variables are sent as the "variables" field of the object that is passed to the requestScript method.
Note that the ES API depends on jQuery, so jQuery must be included in the document before the ES API is included.
When the submit button is clicked, the JavaScript code grabs the values of the two text inputs (firstName and lastName) using jQuery and uses the requestScript method of ES.API to call the custom script. The variables are sent as the "variables" field of the object that is passed to the requestScript method.
Note that the ES API depends on jQuery, so jQuery must be included in the document before the ES API is included.