Formio.js Submission Object

Introduction

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.

Application Assets

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.

  • Parent form - which contains the child form, panel formatting, and button definitions.
  • Child form - which contains a simple text-field that we will be populating dynamically.

Formio.js

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.

Taking a look at the javascript, note the event listener that checks our parent form’s select component value 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.