Step 9. Create a Pop-Up Note Editor

In this step, you will create a Pop-Up component to handle editing an employee Notes. The Pop-Up will be displayed below the NotesList. A Pop-Up is a reusable part component.

Concepts

  • This exercise will only support editing an existing employee note. The application could easily be extended to handle delete employee note and create employee note.
  • The main web page will launch the Note Editor as a Pop-Up component when an Edit Note button is clicked, selecting the first NotesList entry with a checked checkbox.
  • The Note Editor component is added to the web page as a visual control and positioned on the web page design.
  • The Edit Note button Click event invokes a Show method routine in the Pop-Up, passing parameters. The Pop-Up runs the Show method routine retrieves the required data and the invokes its ShowPopUp method so that it is visible.
  • The Note Editor pop up, retrieves Note details by executing a Find srvroutine in the server module iiixEmployeeNotesDataServer.
  • When user clicks a Save button, the Note Editor executes the Save srvroutine in server module iiixEmployeeNotesDataServer.
  • If the Save is successful, the Note Editor signals a uCompleted event.
  • The main web page monitors the Note Editor's uCompleted event and will then update a NotesList entry.

 

1.  Create a New / Reusable Part / New Pop Up Panel:

     Name: iiiNoteEditor

     Description: Employee Note Editor

     Target Platform: Web Browser

2.  Select the Layout ribbon and add a table layout with 2 rows and 1 column.

3.  From the Controls / All Controls tab, drag a Multi-Line Edit Box onto row 1.

a.  Change Size to Fit Both

4.  Click on the space below the Lists control, to select the resuable part component. On the Layout ribbon change Row 2 to Units Pixels and Height to 38.

5.  Drag a push button onto Row 2. On the Layout ribbon:

a.  Change Alignment to Center Right and Flow to Left

b.  Change margin Right to 20

c.  On the Details tab, change Caption to Save

d.  Change Name to Save_Note

e.  Create a Click event for the button

6.  Save the Popup component.