This example shows how to use the JSLI to set an attribute on an element in the page during runtime.
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.
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):
Example code from the Example Code Exchange in the NI Community is licensed with the MIT license.