Important: This tutorial uses the experimental forms module. To use fully supported charts, use the ui module for your forms.

Required result: The user accesses a Grid with entries of a shared Record type via a document. When they click the Edit column in a row, a Popup with editable data of the row is displayed. They can either save the changes or drop the changes. The Popup is reusable.

Note that this tutorial does not implement optimistic locking so if a record is changed from a different transaction while being edited, the changes are overridden.

We will use the Applicant shared record displayed below.

Applicant record with the Level enumeration used in the Applicant Record field

Creating the Public Popup

First we will create a form for the popup. The form will be used and displayed on two occasions: when the user will be creating a new applicant and when they will be editing an existing applicant.

To create the public popup ApplicantDetailsPopup, do the following:

1. Create a form definition ApplicantDetailsPopup.
2. In the Outline view, select the form root component and, in its Properties view, set its type to forms::Popup and make sure it is public.
   
3. Create the applicant form variable, which will hold the data of the new or edited applicant: right-click the root node in the Outline view and
4. Define form constructors in the methods file of the form:

   • a non-parametric constructor we will use when creating a new applicant:

     It initializes the applicant variable to a proxy of the *Applicant** type.

   • a parametric constructor we will use when editing an existing applicant:

     It takes the Applicant parameter and stores its proxy the form variable.

     ApplicantDetailsPopup {
        //constructor called for a new applicant:
        public ApplicantDetailsPopup(){
          //change proxy of the Applicant type is assigned 
          //so that applicant is created only after the user clicks Save:
          applicant := proxy(Applicant)
        }
        //constructor called for an existing applicant:
        public ApplicantDetailsPopup(Applicant applicant){
          //change proxy of the applicant object is assigned 
          //so that changes on the applicant are stored only after the user clicks Save:
          this.applicant := proxy(applicant)
        }
     }
     

5. Design the form: keep in mind it represents the content of a popup; bind the input fields to the application variable as appropriate.
   
6. Define the click listener expression on the Save button:

   { click:ClickEvent ->
         //apply the changes
         mergeProxies(false, applicant);
         //close the popup:
         this.setVisible(false) 
   }
   

7. Define the click listener expression on the Close button:

   { click:ClickEvent ->
         this.setVisible(false) 
   }
   

Using the Public Popup

Create the ApplicantList form with the list of applicants with the following components:

1. Insert a Vertical Layout.
2. Insert a Grid:
   1. In its properties:
      1. Set ID to applicantListGrid.
      2. Set the data source to Type and its value to the record type Applicant.
   2. Insert a Grid Column for each applicant property:
      • Set the Value Provider to Property Paths.
      • Set the values of value providers to the Applicant fields, such as Applicant.name.
      • Set the appropriate Renderer, for example, for the Applicant.level, set the Enumeration renderer.
   3. Insert a Grid Column that will render the Edit button that will open the public Popup with the row data:
      1. Set Value Provider to Constant with the value "Edit".
      2. Set Renderer to Button.
      3. Below define the button action so that it creates and displays the popup with the data of the edited applicant:

         { clickedApplicant:Applicant ->
             //create the popup with details:
             def ApplicantDetailsPopup appDetailsPopup := new ApplicantDetailsPopup(clickedApplicant);
             //display the popup:
             appDetailsPopup.setVisible(true);
             //set listener on the popup, so the grid with applicants is updated when the popup closes:
             appDetailsPopup.setPopupCloseListener({ e->applicantListGrid.refresh()});
         }
         

3. Below the Grid insert a Create Applicant Button that will create a new applicant using the non-parameteric constructor of the public popup:

   { click:ClickEvent ->
       //creates the public popup with the non-parametric constructor:
       def ApplicantDetailsPopup appDetailsPopup := new ApplicantDetailsPopup();
       appDetailsPopup.setVisible(true);
       //refreshes the grid so it contains the new applicant:
       appDetailsPopup.setPopupCloseListener({ e->applicantListGrid.refresh()});
   }
   

   

   Resulting form
   Now you can use the ApplicantList form in documents or user tasks as their UIDefinition.

You can download the tutorial example here.