Form field key does not nest value

What are you trying to do?
Trying to read and write a form field value inside a nested object structure using the field key name. Specifically, trying to set up a field that would save its values into this structure:

{
  company_username: "currentUser.customProperties.active_company.company_username",
  campaign_title: "hello",
  technology_config: {
    type: null,
    placement: null,
    requirements: {}
  }
}

the issue is the technology_config.placement field.

Reproduction Steps:

  1. Created a form in Plasmic Studio
  2. Attempted to name the field key to create nested structure
  3. Tried multiple naming formats, all unsuccessful:
    • technology_config.placement
    • technology_config[placement]
    • ${technology_config.placement}
    • technology_config\[placement\]
    • technology_config[type=object,fields={placement:string}]
    • technology_config{placement}

The field either:

  • Takes the entire string as the literal field name
  • Returns undefined
  • Doesn’t create the nested structure as needed

in the picture the initial values correctly create the nested structure but as you can see in the bottom the technology_config.placement field just saves its value in the first layer not inside the object.

Current Behavior:
Field name is being treated as a literal string instead of creating the nested object structure.

Environment:

  • Using Plasmic Studio web interface
  • Form component with Ant Design 5 integration

Question:
What is the correct syntax for read/write nested object structures in form field keys within Plasmic Studio?

Thank you.

Hello @arturo_rabago, you can add a Form Field Group component to your form. Set the “Form group key” prop to technology_config, then add Form Field inside it, with Field key prop set to placement.

Hello sarah thank you! could you also point me to the right directions with another issue i’ve been trying to solve for hours.

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

  1. Create a Form List in Plasmic
  2. Add a JavaScript box to define the actions array
  3. Set initial configuration to [ { type_id: null } ]
  4. Attempt to dynamically update the array when type_id changes

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 you can help me with this, thank you!.

I recommend posting this as a separate query.