Back to all Tutorials

Edit Forms

Start the flow with a data table in the canvas. Extract one of the rows and move it to a different screen where its details are displayed. Then add a button to confirm the changes that will replace the original data.

edit process

  • Go to the Product List screen of the previous example.
  • Add a data table with only two columns: one with the photograph and the other with the name of the product.

edit-row

  • Add a click event to the product name in the row from the data table by using the Set Value action. Select the Product variable and drag the row from the data table to define the value.
  • Note: the row clicked by the user is placed in the variable.
  • Add a second event to the product name that displays the Edit Product dialog box (you can move a selected row between different screens only in the form of a variable).
  • Note: the variable stores all the information of the instance displayed in the row (in this case, all of the product information) and not only the information displayed in the columns. Therefore, when changing the screen, the variable contains a product, not an image and text.

Edit Product screen:

edit product

Design a form that shows the values of the row selected in the Product List screen. Remember that this row is available in the "product" variable, but you must choose the information you want displayed for each field.

  • Generate a On page Load and a Set Value event in each field and use the Select function from the List tab to select the value.
  • Note: You can choose an attribute from the Data Master by using the Select function.
  • Drag the product variable to the first gap and the attribute of our mock Data Master for the selected field to the second.
  • Apply the same process to the rest of the fields.

To apply the values entered by the user to the confirmation dialog box, drag the fields to the variables. This way they are stored. Finally, link the OK button to the Edit Confirmation screen.


Edit Product Confirmation screen:

confirm edit product

  • Retrieve the values of the variables in the texts that correspond to the On Page Load and Set Value events.
  • Create a new interaction in the Confirm button with the Modify Product Data Master event.
  • Drag the "product" variable to the first gap. For the rest, move the variables.
  • Establish a link with the Product List screen.
  • Click the Simulate button. If you follow the entire flow from the Product List screen, you’ll see how the data are updated each time you make a change.
Back to all Tutorials