Set Attribute for WebVI

[MilanR]

Description

Description-Separate-1

This example shows how to use the JSLI to set an attribute on an element in the page during runtime.

Note:

This example is manipulating the internal behavior of NI controls. NI only supports configuration through the editor via property pane configuration, property nodes, etc.

Directly manipulating an NI control through the JSLI is not recommend and subject to change in behavior in the future without warning.

Instead use the HTML Placeholder Container to develop custom controls with custom behavior. For an introduction to HTML Placeholder Container usage see the topic Creating UI Elements with JavaScript.

Steps:

First find a control in the WebVI and in the HTML class attribute configure a unique class to identify the control in the page. For example add the class my-string-control to an exisiting string control:

Next on the block diagram use the Set Attribute VI from the attached SetAttribute.gcomp to select for a specific element in the page and set an attribute name and value. For example the selector .my-string-control textarea will locate the control with class my-string-control and find the inner textarea that it contains. We can then set attributes on the textarea such as the placeholder attribute and the maxlength attribute:

Note: Notice how the HTML class attribute is configured with the value my-string-control and does not have a dot prefix while the selector .my-string-control textarea does contain a dot prefix for the class. To learn more about selectors see the MDN document CSS Selectors.

The above changes the behavior of the NI String Control to use a placeholder text and be restricted to a maxlength (Reminder: manipulating the behavior of NI controls is not supported, see warning at start of page):

Changelog:

Release 2 - Support for G Web Development Software 2021

Release 1 - Initial Release

Description-Separate-2

[soren_jensen]

I need to hide a tab control while the page is loading, and then later programatically from NXG show the tab. Is that possible ? (currntly only the tab selector can be set default to "hide", unfortunately that can not be set to "show" programatically. )

[MilanR]

Hi søren_hallberg_jensen! This library is pretty low-level and doesn't include that as an example (the current example only shows string controls). I'd recommend asking in the G Web Development Software forum which is followed by more of the G Web engineers and community.