How to create dynamic forms with Atlaskit forms

[Geronimo Barrionuevo]

Hi everyone, I'm currently developing a Jira Cloud addon using Atlassian connect. The UI is implemented in React using Atlaskit. I need to create a form where you can add or remove dynamically an array of fields. For example, an user can have multiple addreses. Each address has a few fields like street, city, zipcode. When you press Add address, the form should show a new empty input group with those fields. Also, you could remove any of those input groups.

I checked the source code from @atlaskit/form and found out its based on final-form. In final-form you can extend it using final-form-arrays and react-final-form-arrays. This way, you can use FieldArray and with some mutations (push, pop) that are injected to the form I could achieve the functionality I'm looking for.

The problem is that @atlaskit/form instantiates the form and I couldn't find a way to inject the properties needed to manage field arrays.

I wonder if anyone has solved this use case which should be pretty common using @atlaskit/form and has an example for it or if I should use final-form instead.

Thanks for your feedback.

[Bastian Stehmann · Accepted solution]

Hi @Geronimo Barrionuevo ,

Welcome to the community. 

There is a developer community,  I think there you will get better answers for your problem. 

https://community.developer.atlassian.com/

[Geronimo Barrionuevo]

Thanks Bastian, i just posted my question there.

[zhuoqin]

Hi @Geronimo Barrionuevo,
I checked through all the form docs in Atlaski, it seems they haven’t built it yet, you could pick another js package to get this done, or you can do the similar way that I did:

The thing you should before start: when we dynamically add a field, the name is important and laskit uses it to output your key and value.

so we can create local variables for example addresses = [] in state
then map this array into your form, in each loop, add fields like

 <Field name={`addresses[${index}].city`} defaultValue={item.city} label="City" isRequired>
            {({fieldProps}) => <TextField {...fieldProps} />} </Field>

when you submit your form, you can get this addresses array data in the form onSubmit props callback.

[Doods Perea]

That is an interesting work @Geronimo Barrionuevo

Keep us updated here of your progress. 

Thanks!

Doods