更新表单数据

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.

教程

下一教程将介绍如何创建用于在表单的多个页面之间导航的按钮。

1. Open the Form Designer from the Create Form activity.

2. 拖放多个面板组件或您选择的任何其他组件。在此示例中，每个面板组件代表表单的不同页面，收集不同的信息。

3. Drag and drop a Hidden component (from the Data category). This is used to track the current panel number.

   对于此示例，将组件标签设置为StepId 。默认情况下， “字段键名称”设置为stepId 。

   

4. 导航到每个面板组件的 > “条件”选项卡，然后设置显示面板的条件。在此示例中，仅当stepId等于面板编号时，才会显示每个面板。为此，请执行以下操作：

   • 在“简单条件”部分中的“此组件应显示”字段中，选择True 。

   • 在“添加表单组件”字段中，选择StepId 。

   • 在“具有值”字段中，输入面板的编号（例如，第一个面板 — 1 ，第二个面板 — 2 ，依此类推）。

     

5. 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.

6. 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.

7. Check the Use for Local Update box. The Update Data Logic code editor is displayed.

8. 使用预定义的 JavaScript 代码片段，并在大括号之间输入要更新的数据。确保使用要更新的表单组件（第 3 步中设置的组件）的“字段键”名称。该 JavaScript 代码片段包含以下模板： instance.emit('updateData', {[field_key_name]:[field_key_update_value]}); ，其中[field_key_name]表示组件字段键， [field_key_update_value]表示组件的新值。对于此示例，请使用以下代码片段:

   • 对于 Next Step 按钮 -instance.emit('updateData', {stepId:X});，并将 X 替换为下一个面板的编号（例如，对于第二个面板中的按钮，使用 instance.emit('updateData', {stepId:3});）
   • 对于 Prev Step 按钮 -instance.emit('updateData', {stepId:Y});，并将 Y 替换为上一个面板的编号（例如，对于第二个面板中的按钮，使用 instance.emit('updateData', {stepId:1});）

示例工作流

要查看完整的工作流或供日后参考，请下载XAML 示例