UI Component Variables

Defines properties of variables declared by the UI Component, and will appear as a Component Property. Values of these variables can be set via the Component Properties Editor, and referenced and accessed just like any other component property of a dashboard component, e.g. via bindings.

Variable definitions of UI Components are identical to those in Model Variables, and can also be directly interacted with from the code defined in the UI Component Source property.

UI Component variables are defined in the same way as a Model Variables. The variable Name is the name that must be referenced in the Source when using the variable. Suppose a variable is created with the following data:

The variable definition fields which are not listed above can be left to their default value.

One way to use the variable in the component code is to include exampleProperty (the variable Name) as a argument in the React functional component:

const Component: React.FC<CustomWrappedComponentProps> = ({ component, componentModel, exampleProperty = "" })

The variable value can then be referenced with {exampleProperty}, just as a typical argument in a React functional component. The full code could look something like the following:

import React from "react"
import {AbstractWebComponent} from "utils"
class Model extends AbstractWebComponent implements WebComponentModel {
  init() {}
  destroy() {}
}
const Component: React.FC<CustomWrappedComponentProps> = ({ component, componentModel, exampleProperty = "Example Property" }) => {
  return <span>Example Property Value: {exampleProperty}</span> 
};
registerMySelf($COMPONENT_NAME, Component, Model)

When the UI Component is added to a web dashboard from the Component Palette, the variable will be visible under the component’s Properties Editor with the description given in the variable definition, “Example Property”.

The UI Component will be rendered every time there is a change to any variable (property) defined for the component. If there is a need to force render the component for any other reason, the function forceRenderComponent() can be called from the React function component like so: const Component: React.FC<CustomWrappedComponentProps> = ({ component, componentModel, exampleProperty = "Example Property" }) => { ... componentModel.forceRenderComponent() ... };

In the case that the variable (property) value should be set from the code of the UI component, perhaps to trigger a binding, or any other reason, the setVariable() function can be used.

From the React functional component, the componentModel.setVariable(variableName, payload [, context]) can be used in the above example to set the value of exampleProperty to ”New Value”:

const Component: React.FC<CustomWrappedComponentProps> = ({ component, componentModel, exampleProperty = "Example Property" }) => {
...  
  componentModel.setVariable("exampleProperty",[{exampleProperty:"New Value"}])
...
};

The arguments in the example are as follows:

• "exampleProperty" - the name of the property defined above

• [{exampleProperty:"New Value"}] - A data table with values to assign to the indicated variable. In this example, the variable is a data table with a single row and field named exampleProperty.

• The optional argument context is left blank, since the default context is the component context.

Was this page helpful?

Tell us more

Send

Thank you!