Sounds like you have a reusable element (custom-element-a) on a page. The page is being described as the parent component.
What I mean is that I created a reusable element itself and then defined a “value” state within it. I also generated a custom event with the name “setState” and the parameter “paramVal.” I use this custom event because I don’t want an external component to set the value of the reusable element’s state directly; instead, I want communication to occur via this event.
Fig A: reusable element named “reusable-element” contains state named “value”
Fig B : Custom Event “setValue”
Fig B : “reusable-element” has a Custom Event titled “setValue” to set the state “value” based on its Custom Event Parameter titled “paramVal.”
Fig C : An internal action (clicked button) within the reusable element that modifies the state with a formula.
There is no way for you to set up an event when the reusable element custom state value changes as the page you want to take an action from based on that change in the reusable element’s custom state value is not accessible from the page.
I see …
Easy way is to make it so the custom state is on the reusable element itself and not a child element of the reusable element making it so the custom state value of the reusable element is accessible from the page workflows where you can set up a conditional workflow based on the reusable element’s custom state value.
Yes, the explanation is actually rather simple: I want the reusable element to be encapsulated, I don’t want the state to be immediately accessible from the outside, and I only want communication into and out of the reusable element to occur via events (custom events). This is because it simplifies sending data into and out of elements with a single action.
Consider, for example, a reusable element calculator that requires three states, stateOne, stateTwo, and stateResult. To populate the stateOne and stateTwo from the Page, you can either use the setState action as depicted in figure 1 or trigger the setValue event of the reusable element as depicted in figure 2.
Above Fig 1 : directly setting the state of reusable element.
Fig 2 : calling custom event in reusable element to setValue
The implementation of the second technique utilizing events is simpler because the user is aware of the parameters to send to the reusable-element and only needs to take one action. This provides a sort of API contract in which two parameters are required when calling setAction.
While the second way requires at least two actions, Page does not know which state of the reusable element should be modified.
Up until this point, this truly meets my requirements. Now we have reusable-element with setValue API contract.
However, my next issue is how to tell Page that the state of the reusable-element has changed. Because the page cannot obviously listen for custom events from within the reusable element.
This solution has weaknesses: Page must know the state of this reusable element it requires. How does Page determine that stateResult is the desired output?
In the meantime, if Page can listen to the custom-event “OnResultChange” from the reusable-component, it will be able to retrieve the required results from the onResultChange parameter.
Is there a flaw in my assertion, or is there something I do not know?
