Create page custom event

UI Builder
1

Hello,

I have a use case involving a page (let´s call it “ManageOrganizations”) that contains a reusable component responsible for handling a list of elements (e.g., a list of organizations) that users can modify. When modifications occur (and this happens when the user selects a specific button of the reusable component), I want this reusable component to flag the need for a change (for this purpose I´m using a boolean property named “saveOrganizations” stored in the Page Data).

The challenge is that I want the parent page to be aware of this flag and trigger the action to save the list of organizations in the database. While I know I can achieve this with a timer in the parent page to check the flag’s status, I am exploring more efficient options.

Question:

Can I create a new event handler in the parent page that specifically checks the status of this flag? If so, how can I implement this?

I noticed a method called “add native event listener” but when I attempt to use it, I receive the error “Error: Device Provider is not configured”. Unfortunately, I couldn’t find any documentation regarding this method.

Any guidance would be greatly appreciated.

Thank you for your assistance!

Regards,
Manuel

2

Hello, @Manuel_Germano

Changes to the Page Data trigger a re-render of the UI, which is not the most efficient approach. A better solution would be to create a custom function that contains the logic to save the list of organizations to the database and call this function directly when clicking the button inside the reusable component.

However, if this solution doesn’t fit your needs and you require a workaround, you can consider the following approach involving the visibility of a block: Trigger event via changes in Page Data
If you run into any difficulties with implementing the workaround, feel free to reach out.

Regards,
Serhiy