Trigger an action when a form loads, such as pre populating a form with existing data
When working with Fliplet’s form component you may want to do something once the form has loaded. A common example would be to prepopulate a form based on a user’s data so that they don’t need to re-enter the information if you already have it. You may also want to do this to allow users to edit previously submitted data.
To prepopulate a form, we first need to select the one being used in the screen we’re on. If there’s only one on the screen, this is relatively simple. We use:
JavaScript
Fliplet.FormBuilder.get()
.then(function (form) {
// Use 'form' to perform various actions
});
This get’s the first form it finds on the screen and lets you access it once it’s fully loaded. If you have multiple forms, you can specify the name of the form you want. Below we’re selecting a form with a name of ‘form-name-here’. Please note, the form name needs to exactly match the form name you’ve given the component in the component settings.
JavaScript
Fliplet.FormBuilder.get('form-name-here')
.then(function (form) {
// Use 'form' to perform various actions
});
Once we have the form we want, there are lots of things we can do with it (A full list can be found here). However, in this example we want to add some data to certain fields (ie, prepopulate the form with data we already have). To achieve that you can use the following code:
JavaScript
Fliplet.FormBuilder.get().then(function (form) {
form.load(function () {
return {
'Name': 'Nick',
'Email': 'nick@example.org'
};
});
});
This example finds a form on the screen then adds the name “Nick” to the field called “Name” and adds the email address “nick@example.org” to the field with name “Email”.
Take care to ensure the field names match the ones used in your form component’s settings.
If you want to use data from a Fliplet data source instead of typing it into the code, you can connect to the data source and select a record (ie, a row of data).
Once you have the record you can get the different values by specifying the column names for those values (it’s helpful if these match the field names in your app to avoid confusion and allow the data to automatically overwrite the form).
In the example below, the code connects to a data source with a data source ID of 188655 (you can find the data source ID in the data manager in Fliplet Studio) and selects the record where the “Name” is “John” and “Surname” is “Smith”.
JavaScript
Fliplet.FormBuilder.get()
.then(function (form) {
form.load(function () {
// Connect to a Fliplet data source with the ID 188655
return Fliplet.DataSources.connect(188655)
.then(function (connection) {
// Get the user with named John Smith
return connection.findOne({
where: {
'Name': 'John',
'Surname': 'Smith'
}
})
});
});
});
In the example above, if a user is found, it will return the row of data for that entry. Every field in the form with the same field name as the column name will be overwritten with the new data.
There are many more ways to specify a certain record. Some options are listed here with a few different examples.
Note: If there were multiple people with the same name, the above code would simply return the first one it found. A better way to do this would be to assign each user a unique ID and search by that instead. A commonly used unique ID is a user’s email address.