Creating a Record
We will now create a Jig with a form that creates a record with multiple columns in our Dynamic Data table, which we defined in the previous Forms part.
First, we create an empty Jig and call it form.jigx. Delete the datasources section, as we don't need it now.
We need to add a form component to our Jig, as it will be the container for the form input components.
- Go ahead and use IntelliSense (Ctrl+Space) to add a form component to the children option of your Jig.
- Note the empty instanceId option. This is the unique identifier of your form. Set it to simple-form as we need it later to submit the form.
You can now go ahead and add the first input field to your form. Use Ctrl+Space to add a text-field to the children option of your form component.
Two options are important for every form field:
- instanceId - This is the unique identifier of each form input component and it will be used later to retrieve the field values using State. Set it to firstname.
- label - The label will be displayed on the actual component UI and is important for user interaction. Keep it simple and descriptive. Set it to First name.
Please note: It's best practice for mobile forms to be as short and simple as possible! No one wants to fill out dozens of fields on a mobile device. Because of this, all Jigx input components are marked as required (option isRequired) by default. If you want to make a field optional set isRequired to false, but ask yourself if you then really need that field on your form.
Next, add some more fields to your form. Note that for the email and phone fields we specified an additional option, called keyboardType. This will present the devices onscreen keyboard in the right mode. You can use Ctrl+Space to see all available types.
Go ahead and create a form with this YAML:
Good job! Now that we have the basic structure of our form in place we can start thinking about how to store its data.
In general, there are two main ways of sending a form's data back to your data store:
- Submit-Form Action - This is the standard approach for submitting data to your data store. Choose this one if your form just needs to create or update data in a single table.
- Execute-Entity Action - If you need more control about how and where to send your form data, select this action type. Keep in mind that it requires you to understand State to access the field values.
Now let's head over to the index.jigx fiel of our solution to add a widget for the Home Hub that takes the user to our form:
Publish your solution now, so that you can try it out on your mobile device 🎉 Remember, that you always check out the contents of your Dynamic Data form table in the Jigx Management. Navigate to the Solutions area in the left sidebar, select your solution and check out the Data section in the sidebar.
Next see how to update a record. For more examples on formatting your form see GitHub.
