1. ZEP 캔버스 위에 내가 원하는 형태의 UI를 그릴 수 있습니다. ZEP에서는 HTML 을 통해 UI를 표현할 수 있습니다.
  2. App.showWidget() 함수를 통해, HTML 파일을 특정 위치에 불러올 수 있습니다. 이 때 인자로 파일명, 정렬, 위젯의 가로와 세로 크기를 정해줍니다. 정렬에 들어가는 값은 ScriptApp에서 Methods를 참고해주세요.
  3. 생성한 변수에 sendMessage() 메소드를 통해, 원하는 값을 HTML 파일에 전달할 수 있습니다.
  4. main.js에서 전달 받은 값을 사용하려면, HTML 문법에 맞게 작성한 다음 addEventListener를 통해 message를 아래 예시와 같이 받아올 수 있습니다.
//UI가 노출될 위치(정렬, 가로, 세로) 값을 변수로 사전에 제작
let position = 'middle';
let width = 400;
let height = 400;

// my.html로 state라는 태그를 만들어 hello라는 값을 전달
let _widget = App.showWidget('my.html', position, width, height);
_widget.sendMessage({
	state: "hello",
}); 

<html>
<div id="test">-</div>
<script type="text/javascript">
		**window**.**addEventListener**('message', function(e) {
			// state라는 태그 밸류를 보냈으니 아래 형태로 받는다
			var state = e.data.state; 
			// 위의 id test 라는 곳의 텍스트로 적용한다
			document.getElementById("test").innerText = state;
		})
</script>
</html>

<aside> 🚧 참고

</aside>