Now that we know how to ask our guests for their name, let's ask them a few more things! We can expect a lot of different people coming to our IT conference - they could be developers, testers, product owners, project managers, businessmen and so on. Perhaps we want to calculate how many representatives of various professions will visit us? Or maybe (if there are enough people) we want to prepare special, personalized events? It would be also a decent idea to somehow gather their visions and expectations about the conference or any additional valuable information for the organizer.
Let's modify our schema by adding two new properties:
additionalInfo in order to have the additional fields rendered:
After the schema change, we must not forget to add the fields to our form.
We will add the
profession field above the
workExperience field and the
additionalInfo at the bottom:
Let's stop for a while and think of what we have. Obviously, we there is a form generated, but it's not quite what we've expected:
professionfield is rendered a an ordinary text input, where anyone can type literally anything. It would be far better if it would be displayed as a selectable list of options.
additionalInfoproperty is supposed to store lots of text, so it's preffered to be displayed as a text area.
We can handle it in two ways:
- By replacing the
AutoFormwith a desired field.
- By manipulating the schema using the
1. Replacing the
uniforms provide a set of predefined out-of-the-box fields that we can use instead of the
The perfect one for a
profession property is a
SelectField. All we have to do to have it rendered is to provide the list of available options.
The same thing applies to the
additionalInfo - in order to see it as a text area we can use the
Let's see our changes in action:
As you can see, now we have a beautiful select field and a text area!
Now that we know how to use predefined fields within the
AutoForm, let's see how to do it in a more fancy way,
without the necessity to replace the
AutoField. That means modifying our schema and shows true magic of the uniforms.
Before touching the schema, let's have a look at the React form first:
As you can see, both
LongTextField have been removed in favor of the
Now we can focus on modifying the schema.
Instead of having to type the React component by ourselves inside our form, we can declare it inside the schema, thanks to the
uniforms property, as it's demonstrated below:
What's changed is that now we've included the available options inside the
profession property definition -
uniforms are smart enough to deduce result field type, thanks to the
When it comes to the
additionalInfo, there is a slightly different approach applied - we can explicitly tell the
AutoForm what field should be rendered.
Just don't forget to import the desired one!
The resulting form remains very the same: