For relationship fields, it is possible to automatically add the selected value without pressing the "Add" button or change it from Autocomplete to a DropdownList input type?

[SebaOfek]

Which Specific Feature is your question related to?

Form builder

Question

Hi,

The relationship fields are created by default as "Autocomplete" fields but the thing is that users always forgot to click the "Add" button

Users do not clicks the "Add" button!

(And after the form validation failure, the Add button is disabled, value must be removed and selected again)
Issue reported here

I tried by adding the value right after it's selected, but it didn't work (In fact I was not able to save a value filled on any available event prior to submit like OnValidate, the value is shown in the UI input control but is not there later on DataStore)

Other thing I tried was to turn the field from Autocomplete to DropDownList in Amplify Studio, the type field is a dropdown but the only available option seems to be "Autocomplete".

At least I need to move the Add and Cancel buttons from the right to the left side of the autocomplete textbox, I think I'll have more chances for the users to click "Add" button in that possition.

Hope you can help me, thanks!

[ykethan]

Hey @DataLoreB4, 👋 thank you for reaching out. Currently, Amplify studio only supports relationships fields on a autocomplete field.
To modify the buttons, we could use the css properties provided here for example: https://ui.docs.amplify.aws/react/components/flex

[SebaOfek]

Hey @DataLoreB4, 👋 thank you for reaching out. Currently, Amplify studio only supports relationships fields on a autocomplete field. To modify the buttons, we could use the css properties provided here for example: https://ui.docs.amplify.aws/react/components/flex

What about adding the value programmatically in the OnValidate event? Why when I set the value there, then when data is saved, the value is not there?

I have other use cases when I hide an input with overrride and then i want to set the value programmatically.

ex.

overrides={{
name: {
descriptiveText: "Enter a description for your job"
},
status:{
display: 'none'
}
}}
onValidate={{
status: (value, validationResponse) => {
value = 'INITIALIZING'
console.log(value)
return {
hasError: false,
errorMessage: ''
}
},
display: 'none'
},

I want to set the status in the OnValidate Event, in fact, I can, in fact, if I did not hide the status input and I set a value, I can see it at runtime, but then the value is not saved to the DynamoDB.

I there any way to set a value programmatically for an input control and get the value saved using the standard "submit" button of the form?

Thanks!!

[rtpascual]

Hi @DataLoreB4, if I understand your question correctly you can do this in your local app by updating the modelFields object for the input control in the top level Grid component's onSubmit event.

For example, if wanting to programmatically set the value of a 'Name' field that you have hidden:

return (
    <Grid
      as="form"
      rowGap="15px"
      columnGap="15px"
      padding="20px"
      onSubmit={async (event) => {
        event.preventDefault();
        let modelFields = {
          name: 'NameValue', // update the value of name
          dealership,
        };
        ...

Then the following validations and DataStore operations in onSubmit will use the new value you set programmatically as the logic is using modelFields for the form values.

Hope this helps!

[SebaOfek]

Hi @DataLoreB4, if I understand your question correctly you can do this in your local app by updating the modelFields object for the input control in the top level Grid component's onSubmit event.

For example, if wanting to programmatically set the value of a 'Name' field that you have hidden:

return (
    <Grid
      as="form"
      rowGap="15px"
      columnGap="15px"
      padding="20px"
      onSubmit={async (event) => {
        event.preventDefault();
        let modelFields = {
          name: 'NameValue', // update the value of name
          dealership,
        };
        ...

Then the following validations and DataStore operations in onSubmit will use the new value you set programmatically as the logic is using modelFields for the form values.

Hope this helps!

Hi @rtpascual , I'll try that and get back to you, thanks!

[SebaOfek]

Hi @rtpascual,

Sorry, I get it now, you was refering to .jsx generated by amplify all the time, I missundertood.

I was able to do what you suggested and it worked exactly as you said:

return (
<Grid
as="form"
rowGap="15px"
columnGap="15px"
padding="20px"
onSubmit={async (event) => {
event.preventDefault();
let modelFields = {
name: 'NameValue', // update the value of name
dealership,
};
...

But it's overridden when I pull too.

Is there any other option using overrides?

Thanks a lot, kind regards,
Sebastian.

[rtpascual]

Hi @DataLoreB4,

Oh I understand, I believe the solution would be to override onSubmit in order to perform what you are asking for. This would unfortunately mean you would have to recreate similar logic to what is autogenerated in your form for onSubmit.

[SebaOfek]

Hi @DataLoreB4,

Oh I understand, I believe the solution would be to override onSubmit in order to perform what you are asking for. This would unfortunately mean you would have to recreate similar logic to what is autogenerated in your form for onSubmit.

Well, I tried that but I couldn't make It with override because I cannot access the modelFields the same way as I can access them directly in the .jsx file.

For example, I can access the values of the fields but not their names:

onSubmit={(fields) => {
    const updatedFields = {}
    Object.keys(fields).forEach(key => {
        if (typeof fields[key] === 'string') {
            updatedFields[key] = fields[key].trim()
        } else {
            updatedFields[key] = fields[key]
        }
    })
    return updatedFields
}}

Can you put me in the right direction to access the fields names and values? Thanks!

[rtpascual]

I looked into it a bit more, the fields input you have there would have the names of each field as the key, so in your case it will be something like:

fields = {
  name: nameValue,
  dealership: dealershipValue,
}

And in your app, you can programmatically set the value for name in the function you pass into your form's onSubmit prop like the example below:

const handleOnSubmit = (fields) => {
  // perform any logic you want for the value of name
  return {
    ...fields,
    name: 'NameValue', // this is the same as before of setting name in modelFields in the jsx
  }
}

<DealershipCreateForm onSubmit={handleOnSubmit} />

Let me know if this helps.

[SebaOfek]

I looked into it a bit more, the fields input you have there would have the names of each field as the key, so in your case it will be something like:

fields = {
  name: nameValue,
  dealership: dealershipValue,
}

And in your app, you can programmatically set the value for name in the function you pass into your form's onSubmit prop like the example below:

const handleOnSubmit = (fields) => {
  // perform any logic you want for the value of name
  return {
    ...fields,
    name: 'NameValue', // this is the same as before of setting name in modelFields in the jsx
  }
}

<DealershipCreateForm onSubmit={handleOnSubmit} />

Let me know if this helps.

Sorry, but I don't get how I can access the field by it's name in place of the value.
// perform any logic you want for the value of name

I need to get or loop fields to identify the right one, and then get It's value.

For some reason I only get the values of the fields in the fields object.

I'll keep trying, thanks!

[github-actions]

⚠️COMMENT VISIBILITY WARNING⚠️

Comments on closed issues are hard for our team to see.
If you need more assistance, please open a new issue that references this one.
If you wish to keep having a conversation with other community members under this issue feel free to do so.