Adding Custom Event Handlers to Module React Components

Module Development
1

Hi, as the title says, I'm looking to figure out how to add custom event handlers to a react component. I've been looking at the ApexCharts repo for reference, but I'm not really seeing how it works. Does anyone have any fundamental pointers for implementing this?

2

Loose explanation with links to ApexCharts module code:

  1. In your client code, you need to create and register a ComponentStoreDelegate.

  2. This ComponentStoreDelegate lets you fire events that will be received on your ComponentModelDelegate running on the gateway.

  3. You can also send events the other direction too; you can fire events from your gateway ComponentModelDelegate that are handled by the client.

3

Ahh okay was hoping to avoid that. Thanks, I'll do my best.

4

It's not that bad :man_shrugging:

1 Like
5

Got it, so I think the handleEvent function is what I'm particularly interested in, here's a sample one from the perspective-component project:

handleEvent(eventName: string, eventObject: JsObject): void {
        logger.info(() => `Received '${eventName}' event!`);
        const {
            MESSAGE_RESPONSE_EVENT
        } = MessageEvents;

        switch (eventName) {
            case MESSAGE_RESPONSE_EVENT:
                this.handleComponentResponseEvent(eventObject);
                break;
            default:
                logger.warn(() => `No delegate event handler found for event: ${eventName} in MessageComponentGatewayDelegate`);
        }
    }

Do you happen to know what eventName and eventObject look like typically? Is there any documentation anywhere on this?

6

It’ll be whatever you pass in when you fire the event from your ComponentModelDelegate:

2 Likes
7

Hey so I've done more tinkering and wonder if you knew the answer to this. So I'm looking in this file:

For my own component I'm working on implementing a click handler when certain parts of the component are clicked. I'm looking at the ApexChartGatewayDelegate class and didn't see click handlers included in any of the cases. However I do then see it in the "prepareOptions", and it is also defined as a function in the ApexCharts class itself.

I'm also not sure how to implement these bind functions since I'm doing a functional component as opposed to a class component, and therefore can't extend the "Component" class (I think). Do you have any thoughts or pointers at this point? Sorry if my questions are too ambiguous, I can provide any additional information needed.

And just to reiterate, my goal is to be able to provide custom event handling for a custom component, like how apexcharts has it here:

image
image647×584 40.7 KB

8

Don't worry about this.

  1. In your ComponentDescriptor, set the events that you would like to trigger. This is also what makes the events appear in the designer.
    There are some other threads on the forum about what should be in the event's *.props.json file.
  2. In your client component, fire the events using props.componentEvents.fireComponentEvent(eventName, eventObject). The corresponding event will be triggered on the gateway when it's received.
2 Likes
9

How did I not find that thread... thank you so much. So just for my understanding, do all component events, including the default/non-custom ones, also trigger on the gateway?

10

Yup, all component events run on the gateway.

1 Like
11

Gotcha. So again using the example of the ApexChart.tsx file, do you understand for example how the 'xAxisLabelClickHandler' defined on line 510, is actually set up to be fired when the component's xAxis gets clicked? How is that connection established? My best guess is that it's done with the 'prepareOptions' function defined on line 201, but I still didn't see anything in there that explicitly says "when this part of the apexChart component is clicked, fire this handler function". Maybe the apexchart is handling a lot of it internally?

12

Yeah, that's how I understand it.

It looks like they're just mapping in all the chart events to trigger component events:

1 Like