Creating UI Elements with JavaScript

What to Use

• Placeholder HTML Container
• Obtain JavaScript Reference

What to Do

1. Open or create a JSLI and add the JavaScript function you want to call from your web application. Add the parameters with one input having a data type of JS Reference.
   Note In order to directly access your HTML element, your function must have an input with a matching data type of JS Reference. You can also include an array of JS references.
   In the following example, the JavaScript function is Reflect.set, a function available in most browsers, with the name Property Set. In addition to the JavaScript Reference input, there are two additional inputs for the function.
   

   

   
   

   Note You can rename the function and properties, however the JavaScript Global function name must be the name of the function you are referencing.
2. Open or create a WebVI (.gviweb) and on the panel, select Decorations » Placeholder HTML Container and place it on the panel.
3. Use the Configuration pane on the right to configure the container.
   Note Use the Configuration pane or property nodes to configure the HTML container instead of injecting HTML to configure the placement and sizing.

   The container is empty by default and you can populate it with a control at runtime. If you use the Configuration pane to add a placeholder image, the placeholder image is visible in the container at edit time. Select Image visible at runtime to make the placeholder image also visible at runtime until the contents of the container are available.
4. With the HTML Container selected, click Create reference in the Configuration pane.

   The HTML Container does not have a terminal, so you must create a reference to interact with it on the diagram.

5. Create the following diagram to populate the HTML container on the panel with the JavaScript function you defined in the JSLI.

   Customize the gray sections for your unique programming goals.

   
   
   
   
   

   	The Static Control Reference represents the HTML Container you placed on the panel. Tip You can wire the HTML container to a property node to configure the size and position of your control. Obtain JavaScript Reference creates a JavaScript reference with a value of the HTML element within the container. Note The references do not have controls and are only visible on the diagram. You can wire references to terminals on a connector pane.
   	If you want your web application to run continuously in a web browser until it encounters an error, place your code in a While Loop with the conditional terminal wired to the error out parameter of your JavaScript function. In this example, the Property Set JavaScript function is wired to the conditional terminal. If Property Set returns an error, the conditional terminal will stop the loop from executing.
   	The JavaScript function uses the JavaScript reference from Obtain JavaScript reference. You can configure the function using the properties you defined in the JSLI document along with any other supporting code. In this example, the Property Set function outputs the number of loop iterations by converting the iteration counter output into a string using the HTML <b> tag.
   	To reduce loading time and improve performance when you run your built web application on a web browser, add a Wait node to any WebVI that uses an infinite While Loop.

Troubleshooting

Ensure you properly define the JavaScript calls you make in the JSLI.