Sometimes we need to trigger an event on a page that does not have an appropriate event handler in a particular component. For example: a button in a reusable component should trigger the execution of some Codeless block on the page where the reusable component is deployed.
My general question is this:
What’s the best way to trigger an event via Page Data (or some other way)? Right now, we can:
put the trigger button for the reusable component inside of a POD block, and thus add the button on the page where the reusable component is deployed. Problem is that we now need to add such a button (or something) on every page where the reusable component is deployed, even if we don’t need/want such a button on some pages (because an empty POD container crashes the page).
have an invisible “parent” block on the page, with another “child” block inside of it. We can add visibility logic such that the parent is made visible by the presence of a property in Page Data, this in turn mounts the child block where we can create “on mount” logic. In that logic we 1) trigger our desired event and then 2) delete the property in Page Data which toggles the visibility of the parent block back to “off”. While this works, it seems like it’s a very round-about way to achieve what we want.
Is there perhaps a better, more elegant way to trigger logic when Page Data gets a property assigned/unassigned to it? Custom code?
I apologize, but your question’s essence isn’t entirely clear to me.
If you could kindly provide a straightforward and specific example, it would greatly assist us in identifying a solution.
Hi @Alexander_Pavelko — OK, say I have a reusable component “A”. It contains a button “Go”, and I put “A” as item into a repeater block on a page “P” page. On that page, I also have “Modal” (the marketplace component) which has logic block “open modal”:
What is the best/easiest way to execute the “open modal” block when user clicks “Go” in the reusable component?
For this example, it’s enough to call Open Modal in the onClick handler of the button.
However, the issue might arise if you use this reusable component on another page where there is also a modal window, am I understanding it correctly?
No… the issue is that the reusable component does not know where it is… it does not know there is a modal on the page, so there is no “open modal” logic block available in the reusable component. The button is in the reusable component, but the logic block is only available on the page, outside of the reusable component.
Thank you, I understand the issue now. In my case, everything worked because I changed the onClick handler of the button before making the component reusable.
However, after making it reusable, we no longer have access to the context.
But we have plans to add custom events and actions for reusable components in the near future.
Hi @Alexander_Pavelko OK, I understand. In the meantime, could you try to answer my question: is there a good way to trigger an event on a page based on changes that occur in Page Data? Our approach at the moment is:
a) Databinding for visibility of a “parent” block on the page (dimensions of this block can be 0px X 0px):
But if, for some reason, you can’t replace the functionality with handlers, I think you can simplify launching the event a bit by using the On Visibility Change handler.
Aha! Yes, this works… I did not realize “Modal Visibility Logic” actually means “Modal Open Logic”. Thank you
For the more general challenge/question about triggering an event (generally) based on changes that happen in Page Data: I guess our “block within an invisible parent block” approach will work for us
