Sending Data to Action from a Form
The Goal
Send data from form components to action by triggering a button event.
What We Are Going to Do
View [
Form
]Container [
container1
]Text Field [
fldName
]Text Area [
fldContent
]Button [
button1
]
1. Create an Action
First, lets create blank action with fixed input parameters.
From the Main Menu, create a new Action and name it
updateTask
.In the Outline panel add three parameters by clicking on the Plus button.
Rename the parameters on
id
,name
, andcontent
.Set up properties of
id
to Integer in the Inspector panel, and switch Required totrue
. It makes the parameter mandatory.Leave the
name
andcontent
configure to String.
All available parameters are visible in the Tester panel, where a yellow warning shows mandatory blank parameters. In our case
id
.Try filling some values in the testing parameters corresponding to the value-type and clicking the
Save & Run button
.If the input parameters are valid Tester output will returns following:
2. Design a Basic Form
Design a basic form containing Text Input and Text Field components.
Put a Container on the canvas work-field and name it
container1
.Set up its layout on Stretch with horizontal alignment at right.
Place Text Input into
container1
, name itfldName
, and set up its Label on 'name'.The next component placed will be a Text Area, named
fldContent
, and labeled 'content'Values of both components can be filled as a constant or mapped by action from the previous Loading Data Tutorial; what is exactly our case here.
Values of
fldName
are set uptask.data.name
;fldContent
value istask.data.content
.
3. Binding a Button with Action
Clicking the new button triggers an event bound with our action.
Place a new Button component into
container1
and name itbutton1
.Design it as you wish, or leave it at the Default.
Switch from Options to Event panel in the Inspector and clicking on the 'click' option will open the Event editor.
Drag & Drop Call Action component to Flow canvas and wire it together with Event Start.
Selecting the Call Action component allows us to define its attributes in Inspector.
Click on 'Click to select' and choose
updateTask
action.Blank parameters will appear at Inspector that moment.
Set up parameters Values on the following:
id
->task.data.id
;name
->fldName.value;
content
->fldContent.value
We are done! Data will be sent to the action by clicking on the
button1
in Preview mode or after Application deployment.
The Conclusion
This method is commonly used to reference any outgoing forms or other components values referenced to action.
Last updated