I see too many people (and I’m as guilty as y’all) of using the new Components feature, to store “all the logic”.
In these few days of playing with them, I learnt, that you actually need to think of the components as tools, that yes, store the logic, but shouldn’t (at least for now) be storing any variables, such as current page, within pagination, or something similar.
For example, I went full component-heavy and decided to store everything into my custom pagination Component, which resulted in double inputs of the current page (external and internal) and it just caused me a huge heache.
At least for now, I’d suggest seeing the Components more as tools, that you throw your inputs/variables into, and they put out the transformed output (in case of components with logic).
I’d like to hear any opinions about how you use them though, and what are your experinces so far.
variable created inside component = “component variable”
variable created outside component = “app variable”
Logic at app level can ONLY use app variables
Logic inside component can use ANY variable - app variables and/or component variables
So, the only variables I make inside component are ones that will NOT be needed outside of component itself. If a variable will be used inside and outside the component - you just make it only on app level.
I just redid all of my input fields as components only to realize after that I cannot reference any of the inputted text outside of the components :(( am I missing something?
Indeed, you need to emit the events with the data - on change, using triggers. Basically you’re “extending” the reach of the fields inside the component.
Oh shoot, thank you guys for the info, I got everything to work!
Now let’s say I’m building a password form, and I have a button outside of my 3 components. Current Password, New Pass, and Confirm Pass. And the outside button is called Cancel. I want that button to clear the values from all three input fields.
So instead of extracting data out, is it also possible to push data into a component or to trigger a workflow inside a component?
I would suggest handling all the data that is not exclusive outside the component.
Always think of it, in some way like this:
Do my data affect only the behavior/internal logic of the component? → Component variable
Does my data affect/get used outside of the scope of the component? → Outside (classic) variable
As I mentioned before,
So I would handle the changing of the variable with the password input outside of the component. This would save you the hassle of thinking, how do I actually go inside the component and trigger - in your case, the logic of reseting the password.
I see myself, and many here delegating too much to the components, and overestimating what they currently can do. They’re a nice tool, but a bad master, they’re kind of a dummy holding a door, can’t do much, but are useful
The reason I want to use components is because it’s so much easier to update everything at once in a unified way. All my inputs are customized and it makes them so much easier to manage as components. I will likely have over a hundred inputs, and I don’t see another alternative that’s as flexible.
I still think you should use components (I’m not saying don’t use components - just handle the general logic outside of them) only to modify the outer state (a classic variable) as at the end of the day, you’ll be triggering the change password workflow from the outside (a workflow I’m guessing) not from inside of the components.
In January, based on what was said in today’s Office Hours @flo , it will be possible to expose the variable of a component, facilitating this process and not necessarily needing to use emit trigger events
You actually can do this right away if you use a different approach and are ok with modifying variables with js. Instead of creating an internal variable and expose it to the parent pass a global variable of type object as a property to the component and with js change the properties of this object. You automatically get reactive variable accessible from outside the component and basic operations like resetting the value without the need to trigger component’s actions.
add a property of type any. As default value manually add an object like the initial global variable. This is optional and is used only to have variable’s hints in the editor.
add a js action to update the data in the component property. In this case we want to increment thecount property. Note how we don’t need to reference the global variable but only the component property. This way multiple instances of the component can access differents variables.
Hmm, I remember trying this as one of the first thing, and it didn’t work back then. It changed the internal value of the prop, but it didn’t act as reactive. Maybe they updated it? I was appending objects to an array actually.
I’ll try that out again. But I can clearly remember it bugged out.
Yeah, the array seems to be bugging out this behavior, as it seems to update only on the refresh of the button, or some sort of reinit/change of the state.
When you wrap anything within an object as Mariano suggested, you can indeed do this. Which is cool, but I’m not sure how I feel about this.
For now to make this work, I had to do something like this in one of my components. @aurelie do you have any idea/suggestion, why the “reactive” arrays behave differently than reactive objects? It would be easier if I could just bind an array.
but yeah, thanks @dorilama for pointing this out, I gave up after the arrays didn’t work
Indeed this requires an object to work, and yoou need to update only properties of the object. This way you trigger the reactivity of the variable. You can always have your array in a property of the object.
Yeah, but this is very unfriendly to the fellow nocoders imo. Ideal scenario would be to let them pass the variables alone, as constructing an object goes out of scope for way too many nocoders.
I dont mind that much for myself, but it’s more like for the people using stuff after I’m done/when they buy my kits
For sure this is more “advanced” but it also enables more usage patterns than what you can do at the moment. If you are after the best experience for consumers of your components you can use custom code components where you have more possibilities.
I think that this updateVariable method only updates the component variables, and you also need the variable id wich is not available in the editor (although I know I can lookup in the context). Also we can already use that method with the nocode interface, right?
What I tried to do it here is similar to passing a ref to a child as a model and have the child modify it directly and the parent enjoying reactivity without the need of triggers. Modifying properties of a global variable of type object uses the built-in reactivity of variables there is no need of ids, is relatively easy and you dynamically initialize the component.
I’m sure what you are preparing will add even more usage patters
I actually hope they will make this possible with all the data types, and possibly even with no-code actions. But I’d be fine with only the types honestly
