Create UI elements to place on the panel of your web application using the Placeholder
You can add custom UI elements, such as controls, to your web application by creating a
placeholder on the panel. Using the placeholder, you can set the dimensions and other
properties of the element that work for both flexible and absolute layouts. You then
create a control reference and wire the reference into a JSLI, directly exposing the
Before you begin, create or open a web application.
What to Use
web application. Add the parameters with one input having a data type of
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
, a function available in most
browsers, with the name Property Set
. In addition to
You can rename the
must be the name of the function you are referencing.
- Open or create a WebVI (.gviweb) and on the panel, select and place it on the panel.
- Use the Configuration pane on the right to configure the
the Configuration pane or property nodes to configure the HTML container
instead of injecting HTML to configure the placement and
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.
- With the HTML Container selected, click Create
reference in the Configuration pane.
Container does not have a terminal, so you must create a
reference to interact with it on the diagram.
- Create the following diagram to populate the HTML container on the panel with
Customize the gray sections
for your unique programming goals.
The Static Control Reference
represents the HTML Container
placed on the panel.
can wire the HTML container to a property node to
configure the size and position of your
within the container.
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
wired to the conditional terminal. If Property Set
returns an error, the conditional terminal will stop the
loop from executing.
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.
in the JSLI. Refer to the following resources for more information.