Atlaskit forms: how to create dynamic forms?

Atlassian Developer Tools
1

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.

2

Hi, were you able to get this done? I am looking for similar function.

3

Hi,
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.

1 Like
4

Thanks, I happen to check your reply very late. I chose to go with material table which exactly met my requirement!