Actualizar datos del formulario

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

El siguiente tutorial explica cómo crear botones para navegar entre varias páginas de un formulario.

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

2. Arrastra y suelta varios componentes del panel o cualquier otro componente de tu elección. En este ejemplo, cada componente del panel representa una página diferente del formulario, recopilando información diferente.

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

   Para este ejemplo, establece la Etiqueta del componente como StepId. De forma predeterminada, el nombre de la clave de campo se establece como stepId.

   

4. Ve a cada componente del panel > pestaña Condicional y establece las condiciones para mostrar el panel. En este ejemplo, cada panel se muestra solo cuando stepId es igual al número del panel. Para lograr esto:

   • En la sección Condiciones simples > campo Este componente debe mostrar , selecciona True.

   • En el campo Cuando el componente del formulario , selecciona StepId.

   • En el campo Tiene el valor , introduce el número del panel (p. ej., primer panel: 1, segundo panel: 2, etc.).

     

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. Utiliza el fragmento de JavaScript predefinido e introduce los datos que deseas actualizar entre las llaves. Asegúrate de utilizar los nombres de clave de campo de los componentes del formulario que deseas actualizar (los establecidos en el paso 3). El fragmento de JavaScript tiene la siguiente plantilla: instance.emit('updateData', {[field_key_name]:[field_key_update_value]});, donde [field_key_name] representa la clave del campo del componente y [field_key_update_value] representa el nuevo valor para el componente. Para este ejemplo, utiliza los siguientes fragmentos:

   • Para botones Next Step :instance.emit('updateData', {stepId:X});y reemplaza X con el número del siguiente panel (por ejemplo, para el botón del segundo panel, utiliza instance.emit('updateData', {stepId:3});).
   • Para botones Prev Step :instance.emit('updateData', {stepId:Y});y reemplaza Y con el número del panel anterior (por ejemplo, para el botón del segundo panel, utiliza instance.emit('updateData', {stepId:1});).

Flujo de trabajo de muestra

Para comprobar el flujo de trabajo completo o para tener una referencia futura, descarga el ejemplo XAML