Updating Form Data

Clicking buttons in forms usually triggered the execution of the Do block. A new functionality called Use for Local Update is available for the Click action of a Button component. It allows you to update the form without executing the Do block.

Tutorial

The next tutorial explains how to create buttons to navigate between several pages of a form.

Open the Form Designer from the Create Form activity.
Drag and drop several Panel components or any other components of your choice.

In this example, each panel component represent a different page of the form, collecting different information.
Drag and drop a Hidden component (from the Data category). This is used to track the current panel number.

For this example, set the component Label as StepId. By default, the Field Key name is set as stepId.
Navigate to each Panel component > Conditional tab and set the conditions for displaying the panel.
In this example, each panel is displayed only when the stepId is equal to the panel number. To achieve this:
- In the Simple conditions section > This component should Display field, select True.
- In the When the form component field, select StepId.
- In the Has the value field, input the number of the panel (e.g., first panel—1, second panel—2, and so on).
Inside each Panel component, drag and drop Button components, as follows:
- For the first panel, add one Button component to navigate to the second panel (e.g, Next Step).
- For the last panel, add one Button component to navigate to the previous panel (e.g., Prev Step).
- For the in-between panels, add two Button components: one to navigate to the previous panel, and one to navigate to the next one.
Navigate to each button Display tab. Set the button Action to Click. The Use for Local Update checkbox is displayed. This is the feature that allows the navigation between form panels on button click, without executing the Do block.
Check the Use for Local Update box. The Update Data Logic code editor is displayed.
Use the predefined JavaScript snippet and enter the data you want to update between the curly brackets. Make sure you use the Field Key names of the form components you want to update (the ones set at step 3).

The JavaScript snippet has the following template: instance.emit('updateData', {[field_key_name]:[field_key_update_value]});, where [field_key_name] represents the component field key, and [field_key_update_value] represents the new value for the component.

For this example, use the following snippets:
- For Next Step buttons—instance.emit('updateData', {stepId:X});, and replace X with the number of the next panel (e.g., for the button in the second panel, use instance.emit('updateData', {stepId:3});)
- For Prev Step buttons—instance.emit('updateData', {stepId:Y});, and replace Y with the number of the previous panel (e.g., for the button in the second panel, use instance.emit('updateData', {stepId:1});)