Using HTML
- 1.You can draw any shape of UI on the ZEP canvas. In ZEP, UI elements are expressed through HTML.
- 2.You can bring an HTML file to a certain location using the
App.showWidget()function. In this case, the file name, alignment, as well as width and height of the widget can be configured using arguments. Please refer to the ScriptApp’s Methods page for more information on values for alignment. - 3.You can send the desired value to the HTML file using the
sendMessage()method to the created variable. - 4.Write the HTML syntax as shown below (my.html) and then use
addEventListenerto receive the message sent from main.js.
- main.js
//Set in advance the UI location values as variables
let position = 'middle';
let width = 400;
let height = 400;
// Create a tag called "state" using "my.html" and pass the value "hello"
let _widget = App.showWidget('my.html', position, width, height);
_widget.sendMessage({
state: "hello",
});
- my.html
<html>
<div id="test">-</div>
<script type="text/javascript">
**window**.**addEventListener**('message', function(e) {
// Since the sent tag value is "state", it is received in the form below
var state = e.data.state;
// Apply this to "id test" above
document.getElementById("test").innerText = state;
})
</script>
</html>
Please Note
- For the tutorial, we recommend setting the app type to Installable App.
- The JSON file name must be “main.” Please create a new text file and name it “main.js.”
Last modified 6mo ago