Unable to set default form data using formComponent.setData()

App Building
,
1

Hey everyone,

I have a use case where I have a form to create a record in the database, and I want to be able to 'load' data for existing records into the form so that users can edit records.

I have a query which returns the relevant data, however when I try and use the form.setData() method, it doesn't behave as I would expect.

Example of the data

const data = {
    id: 16,
    uuid: "908b8d75-6d55-409b-b6bc-ba19d6e0c7a3",
    group_name: "Express",
    group_type: "Roller Blinds",
    max_width: "2700",
    max_width_center: "",
    min_width: "300",
    max_drop: "2900",
    min_drop: "500",
    styles: [ "a4e24b9f-3791-4178-ab61-533ae6b289da", "f763fbc8-98eb-47f5-9883-9d0ed31555d0" ],
    product_type: "Blinds",
    width_note: "",
    drop_note: "",
    depth: "",
    material: "",
    tracking: "",
    brackets: "",
    operation: ""
}

Upon using formComponent.setData(data), I can see in the State section of the menu that the initialData properties are being set, however, the values do not appear in the form fields.

image
image2740×1017 227 KB

I did think of a workaround where I can have a variable for each of the input fields, and then loop over those and use the component.setValue() method to add the values that way.

I am also unable to get this to work, I did this with the first input field(product_type) to validate my assumptions, however it looks like the value is being set, then removed.

Here is the code I am using to manually set the values for each input

section_CreateProductGroupForm.clear();

const productDataToLoad = query_ProductGroupsList.data[i];

// This would be my preferred method of setting the values
// section_CreateProductGroupForm.setData(productDataToLoad);

// The workaround for this will be manually adding each of the values to the form
const inputFields = {
  'product_type': component_CreateProductGroup_ProductTypeInput
};

Object.keys(inputFields).forEach(fieldKey => {
  const element = inputFields[fieldKey];
  const value = productDataToLoad[fieldKey];
  element.setValue(value);
})
component_CreateProductGroup_ProductTypeInput.setValue(productDataToLoad.product_type);
  
section_CreateProductGroupModal.open();

If anyone has had experience with fixing an issue like this, I would love to get your insight.

Thankyou!

2

Can you double check what the form key id or component id is for each of the fields in your form and that they correspond to properties in your data object?

eg I can see a field with a label of "Group Name" in the form and a property called group_name in your data - does that text input field have a form data key or id that matches this?

Also check what the default value of those fields are set to.

3

Hey @dcartlidge, thank you for checking this out!

All of the form fields do have matching form data keys.

image
image2899×1335 185 KB

I did actually notice when I had the state menu open that the values are being set, however they are immediately removed. There was an event listener set on that modal which was clearing the values out. I have instead moved the clearing of those values to another function and it is working as expected.

Thankyou for taking the time to respond to my query.

1 Like