Storing temporary data becomes essential when building applications. We might want to show some data and then change it based on certain events.
Example: Storing data for an edit form
An edit form is usually prefilled with some data so that the values can be changed. In order to acheive this, we need to understand how to store temporary data.
For this example, we will be a creating a simple User Edit form.
Create a User table
- Create a table under Canonic DB Datasource and name it
- Add fields like
locationand so on for the table.
- In the CMS, add some data.
Create the form fields
- Drag and drop the form component onto the canvas.
- Under the fields section in the properties panel, click on
+ Fieldto create a new form field.
- Add all the fields for the user with the right
keyas per the keys stored in the table.
Store the temporary data on page load
Once the Edit form page is loaded, some data needs to be stored temporarily. In order to do so,
- Open the page settings for the Edit form page.
- Click on
+ Handlerto create an onLoad handler.
- Choose the
Set a variableaction.
- Set the key as
userProfileand fill in the value from the
Get one Userendpoint.
- Under configure input, add the user ID for the user whose data you want to fetch. Ideally, this should be coming from page params, which can be accessed using
keyis the param key.
Doing this will store that user's data on Load of the Edit form page.
Use the stored data
Now that the data is stored, we need to use it in the form component to render that user's data.
- Open the Form properties panel.
- For the Default Value input, add the value
This should store the user's data in the form by default when the page is loaded. Now this data is changed whenever the User data needs to be edited.