Using HTML

You can draw any shape of UI on the ZEP canvas. In ZEP, UI elements are expressed through HTML.
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.
You can send the desired value to the HTML file using the sendMessage() method to the created variable.
Write the HTML syntax as shown below (my.html) and then use addEventListener to 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.”

- If you do not know how to deploy an app, please refer to the ZEP Script Deployment Guide.

PreviousChanging Avatar Image NextCommunicating with an External API

Last updated 2 years ago

Was this helpful?