Prefilling Forms

Input Web Controls display the value of the Variable they are bound to, regardless of how that value was configured. This makes it possible to design forms that come prefilled with data that displays in the Input Web Controls as though the form was already filled out. Designing forms in this way allows the user to edit the data directly if necessary while also preventing them from needing to re-enter information that’s already been established.

In practice, the data that prefills a form is typically pulled from an existing source, like AirData or an external API, although it can also be a summary of information provided earlier in the Journey itself.

To demonstrate how this works, let’s take a look at this form from the "Flight School 101" App Template.

If we Preview this form as it comes out of the box, we’ll see that it does not come prefilled. The variables bound to each of the input boxes are empty, and if a user wanted to fill out the form, they would need to enter each field from scratch.

However, if we assign values to the relevant Variables before or while the Web Page loads, the form will load pre-filled. Values can be assigned to Variables in different ways, such as using a Set Variable Action, or binding the Variable to the output of a Data Flow.

In the example below, we’ll add some Set Variable Actions to fire when the Web Page is viewed and hardcode Values to the form’s Variables:

If we Preview again, now the Input boxes come auto-populated with the values assigned to them:

Users can edit the pre-filled information as needed before proceeding. Changes will overwrite the Values used to auto-populate the form.

Discussion

While the example above presents a way to pre-populate a form in the simplest of ways, in practice, most applications look up data from other systems, like AirData:

Or from an external system:

For example, data can be automatically collected if a Journey started via incoming call or text. The calling number is saved under session.start to be then used as a lookup.

PreviousRepeating Elements NextValidation of User Data

Last updated 1 year ago

Discussion

While the example above presents a way to pre-populate a form in the simplest of ways, in practice, most applications look up data from other systems, like AirData:

Or from an external system:

For example, data can be automatically collected if a Journey started via incoming call or text. The calling number is saved under session.start to be then used as a lookup.