Sending Data to Action from a Form

The Goal

Send data from form components to action by triggering a button event.

Form for sending filled data

What We Are Going to Do

Project Structure

• Action [updateTask]

  • Parameters

    • id [Integer]

    • name [String]

    • content [String]

• View [Form]

  • Container [container1]

    • Text Field [fldName]

    • Text Area [fldContent]

    • Button [button1]

View[dataFromAction]

Action[updateTask]

1. Create an Action

First, lets create blank action with fixed input parameters.

1. From the Main Menu, create a new Action and name it updateTask.

2. In the Outline panel add three parameters by clicking on the Plus button.

   1. Rename the parameters on id, name, and content.

   2. Set up properties of id to Integer in the Inspector panel, and switch Required to true. It makes the parameter mandatory.

   3. Leave the name and content configure to String.

3. All available parameters are visible in the Tester panel, where a yellow warning shows mandatory blank parameters. In our case id.

4. Try filling some values in the testing parameters corresponding to the value-type and clicking the Save & Run button.

5. If the input parameters are valid Tester output will returns following:

status: "LOADED"
output: null

Create updateTask Action

Setting Input Parameters

Required Integer id

2. Design a Basic Form

Design a basic form containing Text Input and Text Field components.

1. Put a Container on the canvas work-field and name it container1.

2. Set up its layout on Stretch with horizontal alignment at right.

3. Place Text Input intocontainer1, name itfldName, and set up its Label on 'name'.

4. The next component placed will be a Text Area, named fldContent, and labeled 'content'

5. 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.
6. Values of fldName are set up task.data.name; fldContent value is task.data.content.

Form Components

Text Input Setting

Text Area Setting

Current Outline

3. Binding a Button with Action

Clicking the new button triggers an event bound with our action.

1. Place a new Button component into container1 and name it button1.

2. Design it as you wish, or leave it at the Default.

3. Switch from Options to Event panel in the Inspector and clicking on the 'click' option will open the Event editor.

4. Drag & Drop Call Action component to Flow canvas and wire it together with Event Start.

5. Selecting the Call Action component allows us to define its attributes in Inspector.

6. Click on 'Click to select' and choose updateTask action.

7. Blank parameters will appear at Inspector that moment.

   1. Set up parameters Values on the following: id -> task.data.id; name -> fldName.value; content -> fldContent.value

8. We are done! Data will be sent to the action by clicking on the button1 in Preview mode or after Application deployment.

Flow Event Canvas

Call Action Parameters

Final Outline

The Conclusion

This method is commonly used to reference any outgoing forms or other components values referenced to action.