UI Component Events

Defines the properties of events that can be generated by the UI Component. Events are defined with properties identical to those found in Model Events.

Implementing Component Events

Events defined for a UI Component are similar to Model Events, but can be fired from the code defined in the Source property.

Define an Event

UI Component events are defined in the same way as a Model Events. The event Name is the name that must be referenced in the Source when firing the event. Suppose an event is defined for the UI Component with the following parameters:

Field

Value

Name

exampleEvent

Description

Example Event

Format

  • Minimal Record Count: 1

  • Maximal Record Count: 1

  • Fields:

    • Name: input

    • Type: String

    • Description: input

Level

Notice

Fire Permissions

Observer

  • Note that this is done to allow the event to fire regardless of the permissions of the user opening the dashboard.

Firing an Event

From the React functional component, the fireEvent(eventName, payload [, context]) function can be used as follows to fire the event defined above.

const Component: React.FC<CustomWrappedComponentProps> = ({ component, componentModel, exampleProperty = "Example Property" }) => {
 ... 
 componentModel.setVariable("exampleEvent",[{input:"Example value for the event data table"}]) 
 ... 
};

The arguments in the example are as follows:

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

  • [{input:"Example value for the event data table"}] - A data table matching the format defined in the event Format. In this example, it is a data table with a single row and field named input, with value "Example value for the event data table".

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

Was this page helpful?