Formio.js Submission Object
Many Form.io users often want to either manually alter the submission object or fetch and inject existing from data directly. The below guide demonstrates how this can be achieved using our Core Renderer, Formio.js.
Before jumping into the actual code, there are actually two forms used in the demo. Feel free to download and import them into your own project if you are physically following along.
Since there is a great deal going on in this application, we will start by taking notice of the parent form’s text-field.
It appears to have a default value of
Populating... when in actuality, its value is generated by the application and
is independent of the form’s definition.
every time a form change is made. If a new value is selected or changed, the nested form’s text-field will
dynamically update. For your convince, a
Log Submission button has been added to the form. Engaging with the button
will print to the console the current the submission object. For example, selecting any
Populate Option x
and then logging the submission will show that the nested form’s populated value is now attached to the submission object.
Finally, the other buttons illustrate other common use cases for injecting data. The first button demonstrates a manual
approach to populating a nested form, while the final two fetch and inject data from the Form.io servers.