Required result: When you click a button in your form, a popup where you can edit the form data is displayed. The pop-up contains an Save and a Cancel button. When you click the Save button, the pop-up closes and the data in the form contains the new data. When you click Cancel, the data in the pop-up is discarded and the pop-up closes.

To create a pop-up window with a Save and Cancel button, do the following:

1. Open the form with the data you want to edit in the popup.

   In the example, the data already exists and is stored in a form variable. If you want to create new data from the popup, make sure to initialize the data in the View Model we create in the next step.

   

   Form with user details

2. Insert the View Model component into the form and define its ID.

   The view model creates a new context for its child components. It holds the differences to the form context. This will allow us to discard or save the differences in a single step: we will either merge the view-model context or discard it (for more details on how it works, refer to view model).

3. Insert the Popup component into the View Model component.

   If you plan to create a complex component tree in the popup, consider using the dynamic popup to prevent performance issues: the dynamic popup is created only when the popup is requested, while the modeled popup is created when the form is initialized, which can be time consuming.

4. Define the popup behavior:
   1. Create a Boolean form variable with the initial value to false and set the variable as value in the Visible property of the popup.
   2. Create the logic that will open the popup, for example, insert a Button with an ActionListener that sets the visibility variable to true and refreshes the popup.
      

      Setting Popup visibility for the *Save* button click

5. Create the popup content:

   1. Insert a layout component and input components into the Popup component.
   2. Bind input components to the local variable and define the labels.
   3. Insert the Button component for the Save button and attach to it an ActionListener that will execute the following:
      • Merge the changed data to the form context: On the Advanced tab in the Merge view model components property, insert the ID of your view model.
      • Close the popup: on the Basic tab in the Handle expression, set the popup visibility to false and in the Refresh components, insert the ID of the popup component.
      • Refresh the data in the form (outside of the view model): in the Refresh components, insert the IDs of the components.
        
   4. Insert the Button component for the Cancel button and attach to it an ActionListener that will execute the following:
      • Close the popup: on the Basic tab in the Handle expression, set the popup visibility to false and in the Refresh components, insert the ID of the popup component.
      • Discard the changes in the View Model: On the Advanced tab in the Clear view model components property, enter the name of your view model.
      • Set the listener to execute in the form context: On the Advanced tab, set the Execution context property to Top level.

   If left set to default, the listener would execute in the execution context created by the view model. Since we are discarding the data from the view model, the visibility setting would be discarded as well and the popup would remain open.

   

   Setting cancel as View Model action for the Cancel button click
6. Run the Form Preview and check the functionality.