Ticket: Dynamic Actions Array Configuration in Plasmic Form List
Problem Description
I have a form group called actions with the initial value of actions[{ type_id: null }] where type id is a drop down, this group has multiple form fields that should populate when the array has more values, all depending on the dropdown selection.
in that same group i have a empty form field with the currentindex as the key which automatically populates object 0, 1, and so on. with the initial value of:
which is fetched through $state.buttonconfig.find(u => u.type_id === currentItem.type_id)
that variable returns something like this:
{
"type_id": "maps",
"name": "Maps",
"label": "Find Us",
"prefix": "https://maps.google.",
"icon_url": "maps_icon.png",
"validation": {
"type": "text",
"pattern": ""
}
this all works perfectly in the studio, the complete object populates every time i change the dropdown value which is the “type_id”
the issue begins when i try outside of the studio, even when i change the dropdown value nothing populates, i concluded that that happens because the initial value does not update dynamically outside of the studio which seems logical, the issue now is that i have tried dozens of ways to fix this and nothing works.
here is what i tried.
1.-using the list component instead of repeating the group. same issue the initial value of the list does not update with the changes of the dropdown to fetch the data.
2.- using the dropdown on value change handler. for some reason the handlers are absorbed by the form field when they are their children and stop working, which is another issue all by itself.
3.- Using a data provider inside and outside of the form field, inside does not read its value even when i match the value prop, outside even though it fetches the data correctly i cant find a way to pass the data to a form field, if i do it in initial value it wont update just like before.
4.- trying to use a component inside the form field called “currentIndex” where its value is the $state.buttonconfig.find(u => u.type_id === currentItem.type_id), this is the closest i’ve been however all components expect a string value, when the value is an object i get a react error (even though the form field it does get the value), if i could find a form component that its value is an object or an array that could work.
5.- tried creating a custom component with an object state variable for the form field to take the object value. i just could not make the form field read the value of the children component, even after naming the prop/state value and the handler onChange.
using all sorts of codes to update the array like:
[
{
type_id: null
},
...(type_id !== null
? ($state.buttonconfig.filter(config => config.type_id === type_id) || []).map(config => ({ ...config }))
: [])
]
or super complex functions using proxies. same issue, since the initial value is not dynamic i cant do it.
6.- using the dependencies field. this only retriggers the validation.
All i need is for a form field to update other form fields is there a way to that? it sounds like such a simple thing to do but i just can’t find a way to do so. i also don’t want to introduce state variables since that can potentially break the array in the future, if im able to do it though the form field alone i could add or delete variables from the initial value array and will still work perfectly. thats also why im using the current index.
Reproduction Steps
- Create a Form List in Plasmic
- Add a JavaScript box to define the
actionsarray - Set initial configuration to
[ { type_id: null } ] - Attempt to dynamically update the array when
type_idchanges
Code Example of Current Attempt
[
{
type_id: null
},
...(type_id !== null
? ($state.buttonconfig.filter(config => config.type_id === type_id) || []).map(config => ({ ...config }))
: [])
]
I hope someone can help me with this, thank you!.
.