How to Use HTML Container in G Web Development Software

Updated May 9, 2023

Environment

Launch G Web Development Software.
In the Panel, place HTML Container from Decoration palette.
Right-click and select Create Reference.
Place Static Control Reference (HTML Container) into the Diagram, outside of the While loop.
Place Obtain JavaScript Reference next to Static Control Reference (HTML Container) and connect both of them.

Launch a text editor and save the following code as AddH1.js. This code will create a new HTML element, H1, and append it into the HTML Container.

(function () {
    'use strict';
	
	window.addElement = function(container){
	const newElement = document.createElement("h1");
	newElement.innerText = "Hello World!";
        container.appendChild(newElement);
	}
}());

Right click WebApp.gcomp and select Import files. Import the AddH1.js.
Right click WebApp.gcomp and select New>>JavaScript Library Interface. Name it as Library.jsli.
Insert the following code to HTML script and link dependencies.
```
<script src="AddH1.js"></script>
```
Insert addElement as value for Javascript Global and click Add function.
Add a new JavaScript Reference parameter
1. Click Add Parameter.
2. Highlight the newly created parameter and expand the right Item pane.
3. In the Item pane, configure the parameter's data type to be JS Reference.
4. Rename it as container.
In index.gviweb, drag-and-drop AddElement from Project Items>>Software>>WebApp>>Library.
Connect AddElement's container input with Javascript reference out from Obtain JavaScript Reference.
It is ready to run. Observe that the "Hello World!" will be displayed at the location HTML Container is placed.