Loading Data from Action to Form
The Goal
Our goal is to return data from an action and put them into form fields as initial values.
The most common use cases are edit pages. We have data already in the database and we want to load them into to the form so user can edit them.
1. Create an action
Let's create an action that will return some sample data.
From the Main Menu, create a new Action and name it
getTask
.From the Functions panel drag the Output function and drop it to the flow canvas. Then connect
Start
node with theOutput
node.Select the
Output
node and edit it's configuration options as follows:Change the type of
Return value
property toMap {}
(a little icon next to the field).Add three items:
id
,name
andcontent
Open each item and set their value to: id:
1
, name:Task AAA
, and content:Hello from task 1
.
To test if your setup is correct, click on the
Save & Run Action
button. You should see the following data in the Tester output:
2. Create a view
Now, we are going to create a simple view with two form elements and one action data source.
From the main menu, create a View and name it as you wish.
In the Outline panel, click on the Plus button and select Add Data from Action. This will create an object called Action Data Source.
Then in the inspector panel, click on the Action Name field and select the
getTask
action we've just created in the previous step.Also, we recommend to change the action data source ID to
tasks
.If configured correctly you should see the
tasks
item in the Data Explorer panel. When you open it it should have theLOADED
state and you should see data returned from the action in thedata
property.Now, place the Text Input and Text Area components into the view canvas. Change their IDs as follows: Text Input:
fldName
; Text Area:fldContent
.
3. Link data
So far we've added the action data source and components. Now, let's link them together.
Select the
fldName
component.In the Inspector panel, find the Value property and switch it to expression (click the fx button).
Now let's put there an expression that returns the data from our data source:
task.data.name
. This tells us that we want to access thename
property from ourdata
that has been returned from ourtasks
data source. You can see this hierarchy in the Data Explorer panel.Do the same for the
fldContent
component as well but changename
tocontent
in the value expression.
Conclusion
Try to upgrade the form - add a field for a missing ID property.
Last updated