Working with Custom Events

Release 1.7.0 in June 2022 introduced support for Custom Events.

Custom Events can be used to define your own custom Triggers, and control when a Sidebar Panel mod refreshes.

PixieBrix uses the DOM Event API standard. Therefore, custom events can be used to communicate bi-directionally with the host page.

Emitting/Dispatching a Custom Event

To emit a custom event, use the Emit a Custom Event brick. The brick takes two inputs:

• eventName: a unique name for the event. The name should be globally unique

• data: an optional data payload

PixieBrix dispatches the event on the root document of the frame.

Running a Trigger on a Custom Event

To run a trigger on a Custom Event, choose “Custom Event” from the Trigger dropdown and configure the trigger:

• Custom Event: the name of the event. Should match the eventName in your use of Emit a Custom Event (see Emitting/Dispatching a Custom Event above)

• Element: an optional selector controlling the elements on which to listen for the event. Use when running triggers for events from the host page. The Emit a Custom Event brick emits events on the document itself.

If the event includes data, that data will be available to the Trigger mod bricks as @input.event

If the event includes data, that data will be available to the Trigger mod bricks as @input.event

Refreshing a Sidebar Panel on Custom Event

Custom Events can also be used to control Sidebar Panel updates. To configure a Sidebar Panel to update on a custom event, choose “Custom Event” from the Panel Refresh > Trigger dropdown.

Then, configure the event to listen for:

• Custom Event: the name of the event. Should match the eventName in your use of Emit a Custom Event (see Emitting/Dispatching a Custom Event above)