Storing Temporary Data

Overview

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 User.
• Add fields like name, email, location and 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 + Field to create a new form field.
• Add all the fields for the user with the right key as 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 + Handler to create an onLoad handler.
• Choose the Set a variable action.
• Set the key as userProfile and fill in the value from the Get one User endpoint.
• 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 {{params.[key]}} where key is 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 {{variables.userProfile}}

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.